🎨 Fix UI (#4)

* fix cta button

* edit detail text

* set fullcalendar

* fix reservation bug

TODO.md

@@ -37,3 +37,4 @@
 - [ ] Blog
 - [x] Call update_calendar from BookingManager. SOlve circular dependencies
 - [ ] Trigger booking price Update when booking modified (calendar.py l:100)
+- [ ] mixpanel cdn error

rental/services/calendar.py

@@ -1,7 +1,8 @@
 import datetime
 import os
-
+import logging
 import pickle
+
 from google.auth.transport.requests import Request
 from google_auth_oauthlib.flow import InstalledAppFlow, Flow
 from googleapiclient.discovery import build
@@ -58,9 +59,9 @@ def get_bookings(place):
         orderBy='startTime'
     ).execute()
     events = events_result.get('items', [])
-
     if not events:
-        print('No upcoming events found.')
+        logging.info('No upcoming events found.')
+        reservation = None
     else:
         for event in events:
             reservation = {
@@ -79,6 +80,8 @@ def synchronize(place):
         Delete from db reservation deleted from cal """
 
     reservation = get_bookings(place)
+    if not reservation:
+        return
     place = get_object_or_404(m_place.Place, name=place.name)
 
     start = reservation['start']

rental/static/rental/css/style.css

@@ -1656,11 +1656,11 @@ footer .credits {
 .btn.btn-b-n {
   background-color: #5bc0de;
   color: #ffffff;
-  border-radius: 0;
+  border-radius: 8;
 }
 
 .btn.btn-b-n:hover {
-  background-color: #26a356;
+  background-color: #5bc0de;
   color: #ffffff;
 }
 

rental/static/rental/lib/calendar/locales/de.js

@@ -0,0 +1,30 @@
+FullCalendar.globalLocales.push(function () {
+  'use strict';
+
+  var de = {
+    code: "de",
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4  // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: "Zurück",
+      next: "Vor",
+      today: "Heute",
+      year: "Jahr",
+      month: "Monat",
+      week: "Woche",
+      day: "Tag",
+      list: "Terminübersicht"
+    },
+    weekText: "KW",
+    allDayText: "Ganztägig",
+    moreLinkText: function(n) {
+      return "+ weitere " + n;
+    },
+    noEventsText: "Keine Ereignisse anzuzeigen"
+  };
+
+  return de;
+
+}());

rental/static/rental/lib/calendar/locales/en-gb.js

@@ -0,0 +1,14 @@
+FullCalendar.globalLocales.push(function () {
+  'use strict';
+
+  var enGb = {
+    code: "en-gb",
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4  // The week that contains Jan 4th is the first week of the year.
+    }
+  };
+
+  return enGb;
+
+}());

rental/static/rental/lib/calendar/locales/es.js

@@ -0,0 +1,27 @@
+FullCalendar.globalLocales.push(function () {
+  'use strict';
+
+  var es = {
+    code: "es",
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4  // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: "Ant",
+      next: "Sig",
+      today: "Hoy",
+      month: "Mes",
+      week: "Semana",
+      day: "Día",
+      list: "Agenda"
+    },
+    weekText: "Sm",
+    allDayText: "Todo el día",
+    moreLinkText: "más",
+    noEventsText: "No hay eventos para mostrar"
+  };
+
+  return es;
+
+}());

rental/static/rental/lib/calendar/locales/fr.js

@@ -0,0 +1,28 @@
+FullCalendar.globalLocales.push(function () {
+  'use strict';
+
+  var fr = {
+    code: "fr",
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4  // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: "Précédent",
+      next: "Suivant",
+      today: "Aujourd'hui",
+      year: "Année",
+      month: "Mois",
+      week: "Semaine",
+      day: "Jour",
+      list: "Planning"
+    },
+    weekText: "Sem.",
+    allDayText: "Toute la journée",
+    moreLinkText: "en plus",
+    noEventsText: "Aucun événement à afficher"
+  };
+
+  return fr;
+
+}());

rental/static/rental/lib/calendar/main.js

@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const calendarEl = document.getElementById("calendar");
+    const calendar = new FullCalendar.Calendar(calendarEl, {
+      headerToolbar: {
+        left: "prev,next",
+        right: "title",
+      },
+      locale: "fr",
+      firstDay: 1, // week start on Monday
+      displayEventTime: false, // don't show the time column in list view
+      googleCalendarApiKey: "AIzaSyC2Wcg2Q2sq071w_L6k5JfHnPptlseU16g",
+      events: {
+        googleCalendarId:
+          "burik7aclvhc7vsboh06c179uo@group.calendar.google.com",
+      },
+      // eventColor: "#378006",
+      contentHeight: "auto",
+      // don't navigate in main tab
+      eventClick: (arg) => {
+        arg.jsEvent.preventDefault();
+      },
+      themeSystem: "bootstrap",
+
+      loading: (bool) => {
+        document.getElementById("loading").style.display = bool
+          ? "block"
+          : "none";
+      },
+    });
+
+    calendar.render();
+  });

rental/static/rental/lib/calendar/style.css

@@ -0,0 +1,18 @@
+body {
+  margin: 40px 10px;
+  padding: 0;
+  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+  font-size: 14px;
+}
+
+#loading {
+  display: none;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+#calendar {
+  max-width: 1100px;
+  margin: 0 auto;
+}

rental/templates/rental/base.html

@@ -77,20 +77,28 @@
           />
           Villa<span class="color-b">Fleurie</span>
         </a>
+        <a
+          type="button"
+          class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
+          href="{% url 'rental:reservation' %}"
+          aria-expanded="false"
+        >
+          <span class="fa fa-cart-plus" aria-hidden="true"></span>
+        </a>
         <div
           class="navbar-collapse collapse justify-content-center"
           id="navbarDefault"
         >
           <ul class="navbar-nav">
             <li class="nav-item">
-              <a class="nav-link" href="{% url 'rental:list_place' %}"
-                >Hébergements</a
-              >
+              <a class="nav-link" href="{% url 'rental:list_place' %}">
+                Hébergements
+              </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="{% url 'rental:services' %}"
-                >Services</a
-              >
+              <a class="nav-link" href="{% url 'rental:services' %}">
+                Services
+              </a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="{% url 'rental:about' %}">À propos</a>
@@ -100,7 +108,12 @@
             </li>
           </ul>
         </div>
-        <a class="btn btn-b" href="{% url 'rental:reservation' %}">
+        <a
+          type="button"
+          class="btn btn-b-n navbar-toggle-box-collapse d-none d-md-block"
+          aria-expanded="false"
+          href="{% url 'rental:reservation' %}"
+        >
           Réserver
         </a>
       </div>

rental/templates/rental/contact_merci.html

@@ -49,16 +49,7 @@
       </div>
       <div class="col-sm-12 section-t8">
         <div class="row">
-          <div class="col-md-7">
-            <form class="form-a" action="" method="post" role="form">
-              <!-- <div class="row">
-                <div class="col-md-12">
-                  {% csrf_token %} {{ form.as_p }}
-                  <button type="submit" class="btn btn-a">Envoyer</button>
-                </div>
-              </div> -->
-            </form>
-          </div>
+
           <div class="col-md-5 section-md-t3">
             <div class="icon-box section-b2">
               <div class="icon-box-icon">

rental/templates/rental/detail_place.html

@@ -1,5 +1,45 @@
 {% extends 'rental/base.html'%} {% load static %} {% block content %}
 
+<link rel="stylesheet" href="{% static 'rental/lib/calendar/main.min.css' %}" />
+<link rel="stylesheet" href="{% static 'rental/lib/calendar/style.css' %}" />
+<script src="{% static 'rental/lib/calendar/main.min.js' %}"></script>
+<script src="{% static 'rental/lib/calendar/main.js' %}"></script>
+<script src="{% static 'rental/lib/calendar/locales/fr.js' %}"></script>
+
+<script>
+  mixpanel.track("View Home Page", { place: "{{place.name}}" });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const calendarEl = document.getElementById("calendar");
+    const calendar = new FullCalendar.Calendar(calendarEl, {
+      headerToolbar: {
+        left: "prev,next",
+        right: "title",
+      },
+      locale: "fr",
+      firstDay: 1, // week start on Monday
+      displayEventTime: false, // don't show the time column in list view
+      googleCalendarApiKey: "AIzaSyC2Wcg2Q2sq071w_L6k5JfHnPptlseU16g",
+      events: { googleCalendarId: "{{place.calendar}}" },
+      // eventColor: "#378006",
+      contentHeight: "auto",
+      // don't navigate in main tab
+      eventClick: (arg) => {
+        arg.jsEvent.preventDefault();
+      },
+      themeSystem: "bootstrap",
+
+      loading: (bool) => {
+        document.getElementById("loading").style.display = bool
+          ? "block"
+          : "none";
+      },
+    });
+
+    calendar.render();
+  });
+</script>
+
 <section class="intro-single">
   <div class="container">
     <div class="row">
@@ -45,6 +85,7 @@
           </div>
           {% endfor %}
         </div>
+
         <div class="row justify-content-between">
           <div class="col-md-5 col-lg-4">
             <div class="property-price d-flex justify-content-center foo">
@@ -62,6 +103,8 @@
                 <a href="#reservation" class="btn btn-a">Réserver</a>
               </div>
             </div>
+            <div id="loading">loading...</div>
+            <div id="calendar"></div>
             <div class="property-summary">
               <div class="row">
                 <div class="col-sm-12">
@@ -98,14 +141,6 @@
                 </ul>
               </div>
             </div>
-            <iframe
-              src="{{place.calendar | safe}}"
-              style="border-width:0"
-              width="400"
-              height="400"
-              frameborder="0"
-              scrolling="no"
-            ></iframe>
           </div>
           <div class="col-md-7 col-lg-7 section-md-t3">
             <div class="row">
@@ -165,7 +200,7 @@
               width="100%"
               height="460"
               frameborder="0"
-              style="border:0;"
+              style="border: 0;"
               allowfullscreen=""
             ></iframe>
           </div>
@@ -176,8 +211,5 @@
     </div>
   </div>
 </section>
-<script>
-  mixpanel.track("View Home Page", { place: "{{place.name}}" });
-</script>
 
 {% endblock %}

rental/templates/rental/list_place.html

@@ -54,12 +54,13 @@
               </div>
               <div class="card-body-a">
                 <div class="price-box d-flex">
-                  <span class="price-a">Dès {{ place.price }} </span>
+                  <span class="price-a">Dès {{ place.price }} €</span>
                 </div>
                 <a
                   href="{% url 'rental:detail_place' place_name=place.name %}"
                   class="link-a"
-                  >Plus de détails
+                >
+                  En savoir plus
                   <span class="ion-ios-arrow-forward"></span>
                 </a>
               </div>
@@ -80,10 +81,6 @@
                     <h4 class="card-info-title">Max voyageurs</h4>
                     <span>{{place.max_occupation}}</span>
                   </li>
-                  <!-- <li>
-                      <h4 class="card-info-title">Garages</h4>
-                      <span>1</span>
-                    </li> -->
                 </ul>
               </div>
             </div>