forked from oat/in-the-database-2
		
	slightly better (but still temporary) frontend and /api
This commit is contained in:
		
							parent
							
								
									758e2ef7e2
								
							
						
					
					
						commit
						4635778e0d
					
				
					 7 changed files with 100 additions and 44 deletions
				
			
		
							
								
								
									
										14
									
								
								public/index.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								public/index.html
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,14 @@ | ||||||
|  | <!DOCTYPE html> | ||||||
|  | <html lang="en"> | ||||||
|  | 
 | ||||||
|  |     <head> | ||||||
|  |         <meta charset="UTF-8"> | ||||||
|  |         <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||||
|  |         <title>Index</title> | ||||||
|  |     </head> | ||||||
|  | 
 | ||||||
|  |     <body> | ||||||
|  |         <h1>Hi</h1> | ||||||
|  |     </body> | ||||||
|  | 
 | ||||||
|  | </html> | ||||||
							
								
								
									
										36
									
								
								public/list.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										36
									
								
								public/list.html
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,36 @@ | ||||||
|  | <!DOCTYPE html> | ||||||
|  | <html lang="en"> | ||||||
|  | 
 | ||||||
|  |     <head> | ||||||
|  |         <meta charset="UTF-8"> | ||||||
|  |         <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||||
|  |         <title>list</title> | ||||||
|  |     </head> | ||||||
|  | 
 | ||||||
|  |     <body> | ||||||
|  |         <div id="doc-list"> | ||||||
|  |         </div> | ||||||
|  | 
 | ||||||
|  |         <script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script> | ||||||
|  |         <script> | ||||||
|  |             axios.get('/api/list').then(({ data }) => { | ||||||
|  |                 console.log(data); | ||||||
|  |                 const el = document.getElementById('doc-list'); | ||||||
|  |                 for (const doc of data) { | ||||||
|  |                     let p = document.createElement('p'); | ||||||
|  |                     p.innerText = `${doc.artist} - ${doc.title} by ${doc.credit}`; | ||||||
|  |                     el.insertAdjacentElement('beforeend', p); | ||||||
|  | 
 | ||||||
|  |                     let charts = document.createElement('ul'); | ||||||
|  |                     for (const chart of doc.charts) { | ||||||
|  |                         let l = document.createElement('li'); | ||||||
|  |                         l.innerText = `${chart.difficulty} ${chart.rating} - ${chart.name}` | ||||||
|  |                         charts.insertAdjacentElement('beforeend', l); | ||||||
|  |                     } | ||||||
|  |                     el.insertAdjacentElement('beforeend', charts); | ||||||
|  |                 } | ||||||
|  |             }); | ||||||
|  |         </script> | ||||||
|  |     </body> | ||||||
|  | 
 | ||||||
|  | </html> | ||||||
							
								
								
									
										37
									
								
								public/upload.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										37
									
								
								public/upload.html
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,37 @@ | ||||||
|  | <!DOCTYPE html> | ||||||
|  | <html lang="en"> | ||||||
|  | 
 | ||||||
|  | 	<head> | ||||||
|  | 		<meta charset="UTF-8"> | ||||||
|  | 		<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||||
|  | 		<title>File upload</title> | ||||||
|  | 	</head> | ||||||
|  | 
 | ||||||
|  | 	<body> | ||||||
|  | 		<input type="file" id="file"><br> | ||||||
|  | 		<button id="upload-btn">Upload</button> | ||||||
|  | 		<br> | ||||||
|  | 		<p id="status-spn"></p> | ||||||
|  | 
 | ||||||
|  | 		<script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script> | ||||||
|  | 		<script> | ||||||
|  | 			document.getElementById('upload-btn').addEventListener('click', async () => { | ||||||
|  | 				const file = document.getElementById('file'); | ||||||
|  | 				if (file.files.length) { | ||||||
|  | 					console.log(file.files[0]); | ||||||
|  | 	 | ||||||
|  | 					const formData = new FormData(); | ||||||
|  | 					formData.append('file', file.files[0]); | ||||||
|  | 					try { | ||||||
|  | 						let response = await axios.post('/api/upload', formData); | ||||||
|  | 						const chart = response.data; | ||||||
|  | 						document.getElementById('status-spn').innerHTML = `<b>${chart.artist} - ${chart.title}</b> has been uploaded!`; | ||||||
|  | 					} catch (error) { | ||||||
|  | 						document.getElementById('status-spn').innerText = `Error: ${error.response.data}`; | ||||||
|  | 					} | ||||||
|  | 				} | ||||||
|  | 			}); | ||||||
|  | 		</script> | ||||||
|  | 	</body> | ||||||
|  | 
 | ||||||
|  | </html> | ||||||
|  | @ -28,13 +28,12 @@ export function run(app) { | ||||||
| 						authorization: `${postRes.data.token_type} ${postRes.data.access_token}` | 						authorization: `${postRes.data.token_type} ${postRes.data.access_token}` | ||||||
| 					} | 					} | ||||||
| 				}); | 				}); | ||||||
| 
 | 				res.send(`hi ${userInfo.data.username}#${userInfo.data.discriminator}<br><img src="https://media.discordapp.net/avatars/${userInfo.data.id}/${userInfo.data.avatar}.png">`); | ||||||
| 				res.send(`hi ${userInfo.data.username}#${userInfo.data.discriminator}`); |  | ||||||
| 			} catch(err) { | 			} catch(err) { | ||||||
| 				res.send(`whoooops<br>${err}`); | 				res.send(`whoooops<br>${err}`); | ||||||
| 			} | 			} | ||||||
| 		} else { | 		} else { | ||||||
| 			res.send('https://discord.com/api/oauth2/authorize?client_id=750952563079250012&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fdiscordauth&response_type=code&scope=identify'); | 			res.send(`<a href="https://discord.com/api/oauth2/authorize?client_id=${process.env.DISCORD_OAUTH_CLIENTID}&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fdiscordauth&response_type=code&scope=identify">Click here!!</a>`); | ||||||
| 		} | 		} | ||||||
| 	}); | 	}); | ||||||
| } | } | ||||||
|  | @ -1,23 +0,0 @@ | ||||||
| <html> |  | ||||||
| 	<head> |  | ||||||
| 		<title>file upload</title> |  | ||||||
| 		<script> |  | ||||||
| 			async function upload() { |  | ||||||
| 				let file = document.getElementById('file'); |  | ||||||
| 
 |  | ||||||
| 				console.log(file.files[0]); |  | ||||||
| 
 |  | ||||||
| 				await fetch('/upload', { |  | ||||||
| 					method: 'POST', |  | ||||||
| 					body: file.files[0] |  | ||||||
| 				}); |  | ||||||
| 			} |  | ||||||
| 		</script> |  | ||||||
| 	</head> |  | ||||||
| 	<body> |  | ||||||
| 		<form method="post" encType="multipart/form-data"> |  | ||||||
| 			<input type="file" name="file" id="file"><br> |  | ||||||
| 			<input type="submit" value="upload" onclick="upload()"> |  | ||||||
| 		</form> |  | ||||||
| 	</body> |  | ||||||
| </html> |  | ||||||
							
								
								
									
										18
									
								
								src/index.ts
									
										
									
									
									
								
							
							
						
						
									
										18
									
								
								src/index.ts
									
										
									
									
									
								
							|  | @ -53,6 +53,8 @@ db.then(() => { | ||||||
| 	// @ts-ignore
 | 	// @ts-ignore
 | ||||||
| 	app.use(express.urlencoded({extended: true})); | 	app.use(express.urlencoded({extended: true})); | ||||||
| 	app.use(fileUpload({limits: { fileSize: 50 * 1024 * 1024 }})); | 	app.use(fileUpload({limits: { fileSize: 50 * 1024 * 1024 }})); | ||||||
|  | 	app.use(express.static('public', {extensions:  ['html', 'htm']})); | ||||||
|  | 	app.use('/assets', express.static('assets')); | ||||||
| 
 | 
 | ||||||
| 	app.set('db', db); | 	app.set('db', db); | ||||||
| 	app.set('config', config); | 	app.set('config', config); | ||||||
|  | @ -61,22 +63,12 @@ db.then(() => { | ||||||
| 	upload.run(app); | 	upload.run(app); | ||||||
| 	auth.run(app); | 	auth.run(app); | ||||||
| 
 | 
 | ||||||
| 	app.get('/list', async (req, res) => { // only for testing
 | 	app.get('/api/list', async (req, res) => { // only for testing
 | ||||||
| 		const docs = await File.find({}); | 		const docs = await File.find({}); | ||||||
| 		 | 		// TODO: filter out _id and __v? possibly more
 | ||||||
| 		res.send(docs.map((doc: any) =>  | 		res.send(docs); | ||||||
| 			`${doc.artist} - ${doc.title} by ${doc.credit}<br>` + |  | ||||||
| 			doc.charts.map(ch => |  | ||||||
| 				`- ${ch.difficulty} ${ch.rating}: ${ch.name}` |  | ||||||
| 			).join('<br>') |  | ||||||
| 		).join('<br><br>')); |  | ||||||
| 	}); | 	}); | ||||||
| 
 | 
 | ||||||
| 	app.get('/', (req, res) => { |  | ||||||
| 		res.send('wip'); |  | ||||||
| 	}); |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 	app.get('*', (req, res) => { | 	app.get('*', (req, res) => { | ||||||
| 		res.status(404).send('404'); | 		res.status(404).send('404'); | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
|  | @ -9,11 +9,11 @@ import { File } from './schema'; | ||||||
| export function run(app) { | export function run(app) { | ||||||
| 	const logger = app.get('logger'); | 	const logger = app.get('logger'); | ||||||
| 	 | 	 | ||||||
| 	app.get('/upload', returnStatic('upload.html')); | 	app.post('/api/upload', async (req, res) => { // only for testing, very abusable
 | ||||||
| 	 | 		if (!req.files) return res.status(400).send('No files were given'); | ||||||
| 	app.post('/upload', async (req, res) => { // only for testing, very abusable
 |  | ||||||
| 		const file = req.files.file; | 		const file = req.files.file; | ||||||
| 		if (file.mimetype !== 'application/zip') return res.status(400).send('Invalid filetype'); | 	 | ||||||
|  | 		if (file.mimetype !== 'application/zip' && file.mimetype !== 'application/x-zip-compressed') return res.status(400).send('Invalid filetype'); | ||||||
| 
 | 
 | ||||||
| 		const dir = tmpdir() + '/' + file.md5; | 		const dir = tmpdir() + '/' + file.md5; | ||||||
| 		fs.writeFile(dir, file.data, (err) => { | 		fs.writeFile(dir, file.data, (err) => { | ||||||
|  | @ -40,7 +40,8 @@ export function run(app) { | ||||||
| 					const file = new File(chart); | 					const file = new File(chart); | ||||||
| 					file.save(); | 					file.save(); | ||||||
| 
 | 
 | ||||||
| 					res.send(`your file "${chart.artist} - ${chart.title}" has been uploaded! check <a href="http://0.0.0.0:8080/list">the listing</a>`); // todo: change to actual url
 | 					// TODO: filter out _id and __v? possibly more
 | ||||||
|  | 					res.send(chart); | ||||||
| 				} | 				} | ||||||
| 
 | 
 | ||||||
| 				zip.close(); | 				zip.close(); | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue