slightly better (but still temporary) frontend and /api #4
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…
Reference in a new issue