Skip to content

GitLab

Commit 67a149a3 authored by Magnus Holm Brunbjerg's avatar Magnus Holm Brunbjerg
Browse files

Frontpage

parent bb204f88
Hide whitespace changes
Inline Side-by-side
src/app/index.js
View file @ 67a149a3
......@@ -6,14 +6,13 @@ const bodyParser = require('body-parser')
const fetch = require('node-fetch')
const app = express()
const port = process.env.PORT
const api = `http://${process.env.API_IP}:${process.env.API_PORT}/api`
const standardGet = { method: 'GET', mode: 'cors', headers: { 'Accept': 'application/json' } }
app.listen(port, (err) => {
app.listen(process.env.PORT, (err) => {
if (err) return console.error(err)
console.log(`Web server startet på http://${require('ip').address()}:${port}`)
console.log(`Web server startet på http://${require('ip').address()}:${process.env.PORT}`)
})
/*
......@@ -84,6 +83,28 @@ app.route('/')
})
})
app.route('/login')
/**
* Login page
*/
.get((req, res, next) => {
res.render('login', {
meta: {
title: 'Login',
noNav: true,
style: ['login']
}
})
})
.post((req, res, next) => {
res.redirect('/')
})
app.route('/logout')
.get((req, res, next) => {
res.redirect('/login')
})
app.route('/experiments')
/**
* List all experiments
......@@ -101,7 +122,8 @@ app.route('/experiments')
}
res.render('experiments', {
meta: {
title: 'Eksperimenter'
title: 'Eksperimenter',
style: ['experiments']
},
experiments: experiments
})
......@@ -112,7 +134,7 @@ app.route('/experiments')
*/
.post((req, res, next) => {
const experimentContent = {
user_id: req.body.userId,
user_id: req.body.user,
name: req.body.name,
time: new Date()
}
......@@ -176,6 +198,28 @@ app.route('/experiments/:id')
})
})
app.route('/compare')
.get((req, res, next) => {
// Load experiments list
fetch(`${api}/experiments`, standardGet)
.then((response) => {
if (response.status === 200) { return response.json() }
})
.then((experiments) => {
for (let i = 0; i < experiments.length; i++) {
experiments[i].start_time = new Date(experiments[i].start_time).toLocaleString('en-GB', { hour12: false })
experiments[i].end_time = new Date(experiments[i].end_time).toLocaleString('en-GB', { hour12: false })
}
res.render('compare', {
meta: {
title: 'Eksperimenter',
style: ['experiments']
},
experiments: experiments
})
})
})
// 404 handling, keep at bottom
app.use((req, res, next) => {
res.status(404).send('404 side ikke fundet')
......
src/public/style/main.css
View file @ 67a149a3
:root {
--main-color: #2bb673;
--secondary-color: #3a3a3c;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
......@@ -10,42 +16,62 @@ body {
height: 100vh;
}
.nav {
.content {
padding: 40px;
padding-top: 25vh;
height: 100vh;
width: 200px;
position: fixed;
border-right: 1px solid #000000;
background-color: #ffffff;
z-index: 1;
text-align: center;
}
.information {
margin-bottom: 50px;
}
.information h1 {
font-size: 50px;
margin-bottom: 10px;
}
.information p {
margin: 5px;
}
.nav-content {
margin: 50px 0px 0px 0px;
.experiment-control {
display: flex;
flex-direction: column;
justify-content: center;
}
.nav-item {
margin: 10px 0px;
padding: 0px 0px 0px 20px;
text-decoration: none;
.form-input {
height: 50px;
width: 500px;
margin: 5px;
padding: 5px;
font-size: 20px;
color: #000000;
text-align: center;
border-radius: 10px;
border: 5px solid var(--main-color);
background-color: #ffffff;
align-self: center;
}
.content {
margin: 0px 0px 0px 200px;
padding: 25px 25px 25px 25px;
.form-input-closed {
width: 243px;
color: grey;
border-color: grey;
}
table, th, td {
border: 1px solid #000000;
border-collapse: collapse;
padding: 2px;
.form-submit {
height: 150px;
width: 500px;
margin-top: 50px;
font-weight: bold;
}
th {
background-color: #000000;
.form-submit:hover {
color: #ffffff;
background-color: var(--main-color);
}
.form-submit-running {
border-color: #e61a1a;
}
.form-submit-running:hover {
background-color: #e61a1a;
}
\ No newline at end of file
src/public/style/nav.css 0 → 100644
View file @ 67a149a3
.content {
margin-left: 250px;
}
.nav {
position: fixed;
z-index: 1;
height: 100vh;
width: 250px;
background-color: var(--main-color);
}
.nav-content {
display: flex;
flex-direction: column;
margin: 20px 0px;
padding: 0px 20px;
}
.nav-item {
margin: 5px 0px;
padding: 5px 5px;
font-size: 25px;
color: #000000;
text-decoration: none;
text-align: center;
}
.nav-item:not(:first-of-type) {
background-color: #ffffff;
border-radius: 5px;
}
.nav-item:first-of-type {
margin-bottom: 40px;
}
.nav-item:last-of-type {
width: 195px;
position: absolute;
bottom: 20px;
}
.nav-item:not(:first-of-type):hover {
color: #ffffff;
background-color: var(--secondary-color);
border-radius: 5px;
}
\ No newline at end of file
src/views/index.hbs
View file @ 67a149a3
<h1>Forside</h1>
{{#if running}}
<p>Navngiv og afslut det nuværende eksperiment:</p>
{{else}}
<p>Start et nyt eksperiment</p>
{{/if}}
<form method="POST" action="/experiments">
<div>
<label for="userId">Lærer:</label>
{{#if running}}
<input type="text" name="userId" id="userId" disabled="true" value="{{running.user_name}}">
{{else}}
<input type="text" name="userId" id="userId" list="users" placeholder="Vælg en lærer fra listen">
<datalist id="users">
{{#each users}}
<option value="{{this.id}}">{{this.name}}</option>
{{/each}}
</datalist>
{{/if}}
</div>
<div class="information">
<h1>Velkommen tilbage!</h1>
{{#if running}}
<p>Der er allerede et igangværende eksperiment.</p>
<p>Navngiv eksperimentet for at afslutte det.</p>
{{else}}
<p>Der er i øjeblikket ikke noget igangværende eksperiment.</p>
<p>Tryk for at starte et nyt eksperiment.</p>
{{/if}}
</div>
<form method="POST" action="/experiments" class="experiment-control">
{{#if running}}
<div>
<label for="name">Eksperiment navn:</label>
<input type="text" name="name" id="name" placeholder="{{running.name}}">
</div>
<div>
<label for="time">Start tidspunkt:</label>
<input type="text" name="time" id="time" disabled="true" value="{{running.start_time}}">
<input type="text" name="user" id="users" disabled="true" value="{{running.user_name}}" class="form-input form-input-closed">
<input type="text" name="time" id="time" disabled="true" value="{{running.start_time}}" class="form-input form-input-closed">
</div>
<input type="text" name="name" id="name" placeholder="Eksperiment navn" class="form-input">
<button type="submit" class="form-input form-submit form-submit-running">Afslut eksperiment</button>
{{else}}
<input type="text" name="user" id="user" list="users" placeholder="Lærer" class="form-input">
<datalist id="users">{{#each users}}<option value="{{this.id}}">{{this.name}}</option>{{/each}}</datalist>
<button type="submit" class="form-input form-submit">Start eksperiment</button>
{{/if}}
<div>
<button type="submit">{{#if running}}Afslut eksperiment{{else}}Start eksperiment{{/if}}</button>
</div>
</form>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment