Change Our Availabilities System to Use FullCalendar and Work on Dates instead of Days of The Week

schedule_lessons/accounts/migrations/0027_auto_20190913_2008.py

@@ -0,0 +1,22 @@
+# Generated by Django 2.0.6 on 2019-09-13 20:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('accounts', '0026_auto_20190827_1359'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='availability',
+            name='day',
+        ),
+        migrations.AddField(
+            model_name='availability',
+            name='repeat_weekly',
+            field=models.BooleanField(default=False),
+        ),
+    ]

schedule_lessons/accounts/models.py

@@ -54,15 +54,14 @@ class Availability(models.Model):
     '''
     id = models.AutoField(primary_key=True)
     profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
-    day = models.CharField(max_length=15)
     start_time = models.DateTimeField()
     end_time = models.DateTimeField()
+    repeat_weekly = models.BooleanField(default=False)
 
     def __str__(self):
         '''Used for string outputs for an Availability'''
-        return '{} from {} to {} on {}'.format(
-            self.profile.user.get_full_name(), self.start_time, self.end_time,
-            self.day)
+        return '{} from {} to {}'.format(
+            self.profile.user.get_full_name(), self.start_time, self.end_time)
 
 class Skill(models.Model):
     '''This class models a skill with 2 fields.

schedule_lessons/dashboard/static/dashboard/css/edit_availability.css

@@ -300,135 +300,16 @@ html body {
 #editAvailabilityTitle {
   font-family: bebas-neue;
   color: black;
-  margin: 40px 0;
+  margin: 40px 0 20px;
   font-size: 350%;
   text-align: center;
 }
 
-.row {
-  width: 100%;
-}
-
-.col-md {
-  text-align: center;
-  padding-bottom: 100px;
-}
-
-.edit-availability-subtitle {
-  font-family: bariol;
-  font-size: 180%;
-  color: black;
-  font-weight: bold;
-}
-
-#availabilityTable {
-  display: inline-block;
-  text-align: center;
-}
-
-#availabilityTable td, #availabilityTable th {
-  border: 1px solid #ddd;
-  padding: 8px;
-}
-
-#availabilityTable tr:nth-child(even){background-color: #f2f2f2;}
-
-#availabilityTable th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: left;
-  background-color: #D14F52;
-  color: white;
-  text-align: center;
-  font-family: adam-cg-pro;
-}
-
-#availabilityTable td {
+#calendar {
+  margin: 10px 20px 60px;
+  padding: 30px 30px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 122px -90px rgba(0,0,0,0.75);
+  border: 3px solid #D14F52;
   font-family: avenir-next-regular;
 }
-
-.unavailable {
-  color: #D14F52;
-}
-
-.day {
-  text-transform: uppercase;
-}
-
-tr #deleteAvailability {
-  border: 0;
-  background-color: #ededed;
-}
-
-#deleteAvailability a {
-  color: #E54F52;
-}
-
-#deleteAvailability a:hover {
-  color: #D14F52;
-}
-
-#warningText {
-  font-size: 120%;
-  color: #D14F52;
-  font-family: BrandonGrotesque-Regular;
-}
-
-.input-label {
-  display: block;
-  font-family: BrandonGrotesque-Regular;
-  color: #6b6b6b;
-  font-weight: bold;
-  font-size: 120%;
-  margin: 10px 0;
-}
-
-.label-error {
-  color: #D14F52;
-}
-
-.selectpicker {
-  background: #F4F4F4;
-  font-family: avenir-next-regular;
-  border: 1px solid #828282;
-}
-
-.form-control {
-  font-family: avenir-next-regular;
-}
-
-.input-error {
-  border: 1px solid #D14F52;
-}
-
-.time {
-  margin: 0 auto;
-  width: 50%;
-}
-
-.error-list {
-  font-family: avenir-next-regular;
-  color: #D14F52;
-  margin: 10px 0;
-}
-
-#addBtn {
-  font-family: anson;
-  padding: 2px 35px;
-  display: inline-block;
-  background-color: #E54F52;
-  font-size: 120%;
-  color: #F4F4F4;
-  border-radius: 50px;
-}
-
-#addBtn:hover {
-  background-color: #D14F52;
-  border-color: #D14F52;
-  color: #E6E6E6;
-  text-decoration: none;
-}
-
-.center {
-  text-align: center;
-}

schedule_lessons/dashboard/static/dashboard/js/edit_availability.js

@@ -55,10 +55,6 @@ $(document).ready(function () {
     $.ajax({
       url: '/dashboard/clear_notifications/',
       type: 'post',
-      error: function (xhr, status) {
-      },
-      success: function (data) {
-      }
     });
   });
 });

schedule_lessons/dashboard/views.py

@@ -825,11 +825,10 @@ def edit_availability(request):
         new_availability.profile = request.user.profile
         new_availability.start_time = start_time.astimezone(UTC_ZONE)
         new_availability.end_time = end_time.astimezone(UTC_ZONE)
-        new_availability.day = new_availability.start_time.strftime("%A")
         new_availability.save()
         context["status"] = 200
         return JsonResponse(context)
-    if request.method == "GET":
+    elif request.method == "GET":
         context["availabilities"] = return_availabilities(
             request.user.profile.id)
         notifications = Notification.objects.filter(
@@ -1123,8 +1122,14 @@ def return_availabilities(user_id):
     """
     availabilities = []
     for day in DAYS_OF_THE_WEEK:
-        availabilities_in_day = list(Availability.objects.filter(
-                                        profile__id=user_id, day=day))
+        availabilities_in_day = [x for x in Availability.objects.filter(
+            profile__id=user_id) if x.start_time.strftime("%A") == day]
+        # for availability in availabilities_in_day:
+        #     availabilities.append({
+        #         "start_time": availability.start_time,
+        #         "duration": (availability.end_time - availability.start_time)
+        #     })
+        #     print(availabilities[-1])
         availabilities.extend(sorted(availabilities_in_day,
                                      key=lambda x: x.start_time))
 

schedule_lessons/static/fullcalendar/bootstrap/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2019 Adam Shaw
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

schedule_lessons/static/fullcalendar/bootstrap/README.md

@@ -0,0 +1,8 @@
+
+# FullCalendar Bootstrap Plugin
+
+Bootstrap 4 theming for your calendar
+
+[View the docs »](https://fullcalendar.io/docs/bootstrap-theme)
+
+This package was created from the [FullCalendar monorepo »](https://github.com/fullcalendar/fullcalendar)

schedule_lessons/static/fullcalendar/bootstrap/main.css

@@ -0,0 +1,36 @@
+.fc.fc-bootstrap a {
+  text-decoration: none;
+}
+
+.fc.fc-bootstrap a[data-goto]:hover {
+  text-decoration: underline;
+}
+
+.fc-bootstrap hr.fc-divider {
+  border-color: inherit;
+}
+
+.fc-bootstrap .fc-today.alert {
+  border-radius: 0;
+}
+
+.fc-bootstrap a.fc-event:not([href]):not([tabindex]) {
+  color: #fff;
+}
+
+.fc-bootstrap .fc-popover.card {
+  position: absolute;
+}
+
+/* Popover
+--------------------------------------------------------------------------------------------------*/
+.fc-bootstrap .fc-popover .card-body {
+  padding: 0;
+}
+
+/* TimeGrid Slats (lines that run horizontally)
+--------------------------------------------------------------------------------------------------*/
+.fc-bootstrap .fc-time-grid .fc-slats table {
+  /* some themes have background color. see through to slats */
+  background: none;
+}

schedule_lessons/static/fullcalendar/bootstrap/main.d.ts

@@ -0,0 +1,12 @@
+// Generated by dts-bundle v0.7.3-fork.1
+// Dependencies for this module:
+//   ../../../../../@fullcalendar/core
+
+declare module '@fullcalendar/bootstrap' {
+    import { Theme } from '@fullcalendar/core';
+    export class BootstrapTheme extends Theme {
+    }
+    const _default: import("@fullcalendar/core").PluginDef;
+    export default _default;
+}
+

schedule_lessons/static/fullcalendar/bootstrap/main.esm.js

@@ -0,0 +1,83 @@
+/*!
+FullCalendar Bootstrap Plugin v4.3.0
+Docs & License: https://fullcalendar.io/
+(c) 2019 Adam Shaw
+*/
+
+import { createPlugin, Theme } from '@fullcalendar/core';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var BootstrapTheme = /** @class */ (function (_super) {
+    __extends(BootstrapTheme, _super);
+    function BootstrapTheme() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return BootstrapTheme;
+}(Theme));
+BootstrapTheme.prototype.classes = {
+    widget: 'fc-bootstrap',
+    tableGrid: 'table-bordered',
+    tableList: 'table',
+    tableListHeading: 'table-active',
+    buttonGroup: 'btn-group',
+    button: 'btn btn-primary',
+    buttonActive: 'active',
+    today: 'alert alert-info',
+    popover: 'card card-primary',
+    popoverHeader: 'card-header',
+    popoverContent: 'card-body',
+    // day grid
+    // for left/right border color when border is inset from edges (all-day in timeGrid view)
+    // avoid `table` class b/c don't want margins/padding/structure. only border color.
+    headerRow: 'table-bordered',
+    dayRow: 'table-bordered',
+    // list view
+    listView: 'card card-primary'
+};
+BootstrapTheme.prototype.baseIconClass = 'fa';
+BootstrapTheme.prototype.iconClasses = {
+    close: 'fa-times',
+    prev: 'fa-chevron-left',
+    next: 'fa-chevron-right',
+    prevYear: 'fa-angle-double-left',
+    nextYear: 'fa-angle-double-right'
+};
+BootstrapTheme.prototype.iconOverrideOption = 'bootstrapFontAwesome';
+BootstrapTheme.prototype.iconOverrideCustomButtonOption = 'bootstrapFontAwesome';
+BootstrapTheme.prototype.iconOverridePrefix = 'fa-';
+var main = createPlugin({
+    themeClasses: {
+        bootstrap: BootstrapTheme
+    }
+});
+
+export default main;
+export { BootstrapTheme };