slightly better (but still temporary) frontend and /api #4

Merged
oat merged 1 commit from mat/in-the-database-2:master into master 2020-09-04 04:43:27 +00:00
7 changed files with 100 additions and 44 deletions

14
public/index.html Normal file
View 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
View 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
View 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>

View file

@ -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>`);
}
});
}

View file

@ -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>

View file

@ -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');
});

View file

@ -9,11 +9,11 @@ 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();