Reorganize views

app.js

@@ -6,12 +6,12 @@ const logger = require('morgan')
 
 const voteRouter = require('./routes/vote')
 const indexRouter = require('./routes/index')
-const endRouter = require('./routes/end')
+const doneRouter = require('./routes/done')
 
 const app = express()
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'))
+app.set('views', path.join(__dirname, 'views/pages'))
 app.set('view engine', 'ejs')
 
 app.use(logger('dev'))
@@ -22,7 +22,7 @@ app.use(express.static(path.join(__dirname, 'public')))
 
 app.use('/', indexRouter)
 app.use('/vote', voteRouter)
-app.use('/end', endRouter)
+app.use('/done', doneRouter)
 
 // catch 404 and forward to error handler
 app.use(function (req, res, next) {

load.js

@@ -21,7 +21,7 @@ if (DATA_FILE) {
       })
 
       rl.question(
-        `The Census table will be dropped and created again with the new data (${censusArray.length} entries). Proceed? (y/N) `,
+        `The tables will be dropped and created again with the new data (${censusArray.length} entries for the census). Proceed? (y/N) `,
         async function (answer) {
           if (answer === 'y') {
             try {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vote",
-  "version": "0.5.0",
+  "version": "0.10.0",
   "private": true,
   "scripts": {
     "start:dev": "NODE_ENV=development node ./bin/www",

routes/end.js → routes/done.js

@@ -26,8 +26,7 @@ router.post('/', async function (req, res, next) {
     error = e
   }
 
-  res.render('end', {
-    title: 'FrontFest Vote',
+  res.render('done', {
     selectedOption,
     error
   })

routes/index.js

@@ -4,9 +4,7 @@ const router = express.Router()
 
 /* GET home page. */
 router.get('/', function (req, res, next) {
-  res.render('index', {
-    title: 'FrontFest Vote'
-  })
+  res.render('index')
 })
 
 module.exports = router

routes/vote.js

@@ -34,7 +34,6 @@ router.post('/', async function (req, res, next) {
   }
 
   res.render('vote', {
-    title: 'FrontFest Vote',
     options,
     ticketId,
     error

test/end.test.js → test/done.test.js

@@ -3,26 +3,26 @@ const request = require('supertest')
 const app = require('../app')
 const db = require('../db')
 
-describe('end route', () => {
+describe('done route', () => {
   let response
   beforeEach(async () => {
     await db.sequelize.sync({ force: true })
   })
-  it('end: code does not exist', async () => {
+  it('done: code does not exist', async () => {
     await db.census.create({ code: 'abcde' })
-    response = await request(app).post('/end').send({ ticketId: 'random_code', selectedOption: 'OPT1' })
+    response = await request(app).post('/done').send({ ticketId: 'random_code', selectedOption: 'OPT1' })
     expect(response.statusCode).toBe(200)
     expect(response.text).toContain('No existe el localizador.')
   })
-  it('end: already voted', async () => {
+  it('done: already voted', async () => {
     await db.census.create({ code: 'abcde', voted: true })
-    response = await request(app).post('/end').send({ ticketId: 'abcde', selectedOption: 'OPT1' })
+    response = await request(app).post('/done').send({ ticketId: 'abcde', selectedOption: 'OPT1' })
     expect(response.statusCode).toBe(200)
     expect(response.text).toContain('Lo siento, ya has votado.')
   })
-  it('end: voted ok', async () => {
+  it('done: voted ok', async () => {
     await db.census.create({ code: 'abcde' })
-    response = await request(app).post('/end').send({ ticketId: 'abcde', selectedOption: 'OPT1' })
+    response = await request(app).post('/done').send({ ticketId: 'abcde', selectedOption: 'OPT1' })
     expect(response.statusCode).toBe(200)
     expect(response.text).toContain('¡Gracias! Has votado por OPT1.')
     const vote = await db.votes.findOne({ where: { result: 'OPT1' } })

views/pages/done.ejs

@@ -0,0 +1,10 @@
+<% include ../partials/head %>
+
+<% if (!error) { %>
+  <h1>¡Gracias! Has votado por <%= selectedOption %>.</h1>
+<% } else { %>
+  <h1><%= error %></h1>
+<% } %>
+
+<% include ../partials/foot %>
+

views/error.ejs → views/pages/error.ejs

@@ -1,3 +1,7 @@
+<% include ../partials/head %>
+
 <h1><%= message %></h1>
 <h2><%= error.status %></h2>
 <pre><%= error.stack %></pre>
+
+<% include ../partials/foot %>

views/pages/index.ejs

@@ -0,0 +1,27 @@
+<% include ../partials/head %>
+
+<div>
+  <img class="logo" src="/images/frontfest.svg">
+</div>
+<form action="/vote" method="post">
+  <div class="group">
+    <label class="label">Introduce tu localizador</label>
+    <input type="text" class="input" name="ticketId" placeholder="xxxx-x-xxxx"/>
+    <button type="submit" class="button">
+      <img src="/images/ok.svg">
+    </button>
+    <p>
+      <strong>Puedes encontrar el localizador bajo el código QR en el PDF de Koliseo.</strong>
+    </p>
+    <p>
+      El localizador se utilizará únicamente para comprobar que se posee una entrada válida y evitar la duplicidad del voto.
+      No se relacionará en ningún caso con la opción elegida, manteniendo anónimo el sentido del voto.
+    </p>
+    <p> 
+      Más información sobre esta app y código fuente <a target="_blank" href="https://github.com/frontfest/vote">aquí</a>.
+    </p>
+  </div>
+</form>
+
+<% include ../partials/foot %>
+

views/pages/vote.ejs

@@ -0,0 +1,29 @@
+<% include ../partials/head %>
+
+<% if (!error) { %>
+  <div class="ticket">
+    <div><img src="/images/ticket.svg"></div>
+    <h1><%= ticketId %></h1>   
+  </div>
+  <form action="/done" method="post">
+
+    <div class="group">
+      <input class="hidden" name="ticketId" value="<%= ticketId %>" />
+      <label class="label">Elige tu opción</label>
+      <select name="selectedOption">
+        <% options.forEach(option => { %>
+          <option value="<%= option.value %>"><%= option.name %></option>
+        <% }) %>
+      </select>
+      <button class="button is-primary" type="submit">
+        <img src="/images/ok.svg">
+      </button>
+    </div>
+
+  </form>
+<% } else { %>
+  <h1><%= error %></h1>
+<% } %>
+
+<% include ../partials/foot %>
+

views/partials/foot.ejs

@@ -0,0 +1,3 @@
+    </div>
+  </body>
+</html>

views/end.ejs → views/partials/head.ejs

@@ -1,19 +1,11 @@
 <!doctype html>
 <html lang="es">
   <head>
-    <title><%= title %></title>
+    <title>FrontFest Vote</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">  
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/stylesheets/style.css" />
   </head>
   <body>
     <div class="wrapper">
-      <% if (!error) { %>
-        <h1>¡Gracias! Has votado por <%= selectedOption %>.</h1>
-      <% } else { %>
-        <h1><%= error %></h1>
-      <% } %>
-    </div>
-  </body>
-</html>