2 - Desafio

Author: douglaszaltron

package.json

@@ -14,6 +14,7 @@
     "moment": "^2.22.2",
     "multer": "^1.4.1",
     "nunjucks": "^3.1.4",
+    "nunjucks-date-filter": "^0.1.1",
     "pg": "^7.6.1",
     "sequelize": "^4.41.2",
     "session-file-store": "^1.2.0"

src/app/controllers/AvailableController.js

@@ -19,8 +19,8 @@ class AvailableController {
     })
 
     const schedule = [
-      '8:00',
-      '9:00',
+      '08:00',
+      '09:00',
       '10:00',
       '11:00',
       '12:00',

src/app/controllers/ScheduleController.js

@@ -0,0 +1,29 @@
+const { Appointment, User } = require('../models')
+const { Op } = require('sequelize')
+const moment = require('moment')
+
+class ScheduleController {
+  async index (req, res) {
+    const { date } = req.query
+
+    const defaultDate = moment(parseInt(date || new Date().getTime()))
+
+    const appointments = await Appointment.findAll({
+      include: [{ model: User, as: 'user' }],
+      where: {
+        provider_id: req.session.user.id,
+        date: {
+          [Op.between]: [
+            defaultDate.startOf('day').format(),
+            defaultDate.endOf('day').format()
+          ]
+        }
+      },
+      order: [['date', 'ASC']]
+    })
+
+    return res.render('schedule/index', { appointments, defaultDate })
+  }
+}
+
+module.exports = new ScheduleController()

src/app/models/Appointment.js

@@ -4,8 +4,11 @@ module.exports = (sequelize, DataTypes) => {
   })
 
   Appointment.associate = models => {
-    Appointment.belongsTo(models.User, { foreignKey: 'user_id' })
-    Appointment.belongsTo(models.User, { foreignKey: 'provider_id' })
+    Appointment.belongsTo(models.User, { as: 'user', foreignKey: 'user_id' })
+    Appointment.belongsTo(models.User, {
+      as: 'provider',
+      foreignKey: 'provider_id'
+    })
   }
 
   return Appointment

src/app/views/appointments/create.njk

@@ -12,30 +12,37 @@
     </div>
     <form action="/app/appointments/new/{{ provider.id}}" method="POST">
       <input type="text" class="flatpickr" placeholder="Escolha uma data">
-
       <div id="hours"></div>
-
       <button type="submit">Agendar</button>
-
+      <a href="/app/dashboard" class="btn btn-secondary">Voltar ao início</a>
     </form>
   </div>
 
   <script type="text/javascript">
+    const defaultDate = new Date()
+
     flatpickr('.flatpickr', {
-      minDate: new Date(),
+      minDate: defaultDate,
+      defaultDate: defaultDate,
       dateFormat: 'd/m/Y',
       locale: 'pt',
       onChange: function (date) {
-        fetch(`/app/available/{{ provider.id }}?date=${date[0].getTime()}`).then(function (response) {
-          response
-            .text()
-            .then(function (html) {
-              document
-                .getElementById('hours')
-                .innerHTML = html
-            })
-        })
+        getHours(date[0])
       }
     })
+
+    getHours(defaultDate)
+
+    function getHours(date) {
+      fetch(`/app/available/{{ provider.id }}?date=${date.getTime()}`).then(function (response) {
+        response
+          .text()
+          .then(function (html) {
+            document
+              .getElementById('hours')
+              .innerHTML = html
+          })
+      })
+    }
   </script>
 {% endblock %}

src/app/views/dashboard.njk

@@ -15,6 +15,10 @@
         </li>
       {% endfor %}
     </ul>
+    {% if (user.provider === true) %}
+      <a href="/app/schedule" class="btn btn-primary">Meus agendamentos</a>
+    {% endif %}
+
     <a href="/app/logout" class="logout">Sair</a>
   </div>
 {% endblock %}

src/app/views/schedule/index.njk

@@ -0,0 +1,48 @@
+{% extends "_layouts/default.njk" %}
+
+{% block body %}
+  <div class="content">
+    <strong>Meus agendamentos</strong>
+
+    <div>
+      <a href="/app/schedule" class="btn btn-primary">Hoje</a>
+      <form action="/app/appointments/new/{{ provider.id}}" method="POST">
+        <input type="text" class="flatpickr" placeholder="Escolha uma data">
+      </form>
+    </div>
+
+    {% if appointments.length %}
+      <ul class="schedules">
+        {% for appointment in appointments %}
+          <li class="schedule {% if appointment.date | isAfter === false %}disabled{% endif %}">
+            <strong>{{ appointment.date | date("HH:mm") }}</strong>
+            <div>
+              <img src="/files/{{appointment.user.avatar}}" alt="Avatar">
+              <strong>{{ appointment.user.name  }}</strong>
+            </div>
+          </li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      <span align="center">Nenhum agendamento marcado!</span>
+    {% endif %}
+
+    <a href="/app/dashboard" class="btn btn-secondary">Voltar ao início</a>
+
+  </div>
+
+  <script type="text/javascript">
+    flatpickr('.flatpickr', {
+      minDate: new Date(),
+      defaultDate: new Date('{{defaultDate}}'),
+      dateFormat: 'd/m/Y',
+      locale: 'pt',
+      onChange: function (date) {
+        window
+          .location
+          .assign(`/app/schedule?date=${date[0].getTime()}`);
+      }
+    })
+  </script>
+
+{% endblock %}

src/public/styles.css

@@ -295,3 +295,88 @@ ul.providers {
   background-color: #7159c1 !important;
   border-color: #634dac !important;
 }
+
+.btn-add-plus {
+  width: 28px;
+  height: 28px;
+  padding: 6px 10px;
+}
+
+.btn {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 14px;
+  border: 0;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  color: #fff;
+  background: #7159c1;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background: #634dac;
+}
+
+.btn-secondary {
+  color: #fff;
+  background: #de6d6d;
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus {
+  background: #c15858;
+}
+
+.schedules {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.schedule {
+  padding: 10px 20px;
+  border-width: 0;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.schedule div {
+  display: flex;
+  align-items: center;
+}
+
+.schedule img {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+
+.schedule strong {
+  margin-left: 15px;
+  color: #444;
+}
+
+.schedule.disabled {
+  opacity: 0.3;
+}
+
+.schedule:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+.schedule:last-child {
+  margin-bottom: 20px;
+}

src/routes.js

@@ -13,6 +13,7 @@ const DashboardController = require('./app/controllers/DashboardController')
 const FileController = require('./app/controllers/FileController')
 const AppointmentController = require('./app/controllers/AppointmentController')
 const AvailableController = require('./app/controllers/AvailableController')
+const ScheduleController = require('./app/controllers/ScheduleController')
 
 routes.use((req, res, next) => {
   res.locals.flashSuccess = req.flash('success')
@@ -36,5 +37,6 @@ routes.get('/app/appointments/new/:provider', AppointmentController.create)
 routes.post('/app/appointments/new/:provider', AppointmentController.store)
 
 routes.get('/app/available/:provider', AvailableController.index)
+routes.get('/app/schedule', ScheduleController.index)
 
 module.exports = routes

src/server.js

@@ -5,6 +5,8 @@ const FileStore = require('session-file-store')(session)
 const nunjucks = require('nunjucks')
 const path = require('path')
 const flash = require('connect-flash')
+const dateFilter = require('nunjucks-date-filter')
+const moment = require('moment')
 
 class App {
   constructor () {
@@ -33,12 +35,16 @@ class App {
   }
 
   views () {
-    nunjucks.configure(path.resolve(__dirname, 'app', 'views'), {
+    const config = nunjucks.configure(path.resolve(__dirname, 'app', 'views'), {
       watch: this.isDev,
       express: this.express,
       autoescape: true
     })
 
+    config.addFilter('date', dateFilter)
+
+    config.addFilter('isAfter', date => moment(date).isAfter(moment()))
+
     this.express.use(express.static(path.resolve(__dirname, 'public')))
     this.express.set('view engine', 'njk')
   }