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}` | ||||
| 					} | ||||
| 				}); | ||||
| 
 | ||||
| 				res.send(`hi ${userInfo.data.username}#${userInfo.data.discriminator}`); | ||||
| 				res.send(`hi ${userInfo.data.username}#${userInfo.data.discriminator}<br><img src="https://media.discordapp.net/avatars/${userInfo.data.id}/${userInfo.data.avatar}.png">`); | ||||
| 			} catch(err) { | ||||
| 				res.send(`whoooops<br>${err}`); | ||||
| 			} | ||||
| 		} 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
 | ||||
| 	app.use(express.urlencoded({extended: true})); | ||||
| 	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('config', config); | ||||
|  | @ -61,22 +63,12 @@ db.then(() => { | |||
| 	upload.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({}); | ||||
| 		 | ||||
| 		res.send(docs.map((doc: any) =>  | ||||
| 			`${doc.artist} - ${doc.title} by ${doc.credit}<br>` + | ||||
| 			doc.charts.map(ch => | ||||
| 				`- ${ch.difficulty} ${ch.rating}: ${ch.name}` | ||||
| 			).join('<br>') | ||||
| 		).join('<br><br>')); | ||||
| 		// TODO: filter out _id and __v? possibly more
 | ||||
| 		res.send(docs); | ||||
| 	}); | ||||
| 
 | ||||
| 	app.get('/', (req, res) => { | ||||
| 		res.send('wip'); | ||||
| 	}); | ||||
| 
 | ||||
| 
 | ||||
| 	app.get('*', (req, res) => { | ||||
| 		res.status(404).send('404'); | ||||
| 	}); | ||||
|  |  | |||
|  | @ -8,12 +8,12 @@ import { File } from './schema'; | |||
| 
 | ||||
| export function run(app) { | ||||
| 	const logger = app.get('logger'); | ||||
| 
 | ||||
| 	app.get('/upload', returnStatic('upload.html')); | ||||
| 	 | ||||
| 	app.post('/upload', async (req, res) => { // only for testing, very abusable
 | ||||
| 	app.post('/api/upload', async (req, res) => { // only for testing, very abusable
 | ||||
| 		if (!req.files) return res.status(400).send('No files were given'); | ||||
| 		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; | ||||
| 		fs.writeFile(dir, file.data, (err) => { | ||||
|  | @ -40,7 +40,8 @@ export function run(app) { | |||
| 					const file = new File(chart); | ||||
| 					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(); | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue