Re-introduce /schedule, without mutations for now

components/Schedule.vue

@@ -23,7 +23,7 @@
         )
       template(v-for="day in days")
         v-text(:config="day" :key="day.text")
-        template(v-if="!allEventsAreOnBothWeeks")
+        template(v-if="showWeekTypesHeader")
           v-text(:config="weekTypes(day).even" :key="`${day.text}-even`")
           v-text(:config="weekTypes(day).odd" :key="`${day.text}-odd`")
 </template>
@@ -91,11 +91,22 @@ export default {
         ...defaults,
         uuid: null
       },
-      recomputeCanvasWidth: 1,
-      headerHeight: 50
+      recomputeCanvasWidth: 1
     }
   },
   computed: {
+    headerHeight() {
+      const dayHeaderHeight = 40
+      const weekTypesHeaderHeight = 20
+      let headerHeight = dayHeaderHeight
+      if (this.showWeekTypesHeader) {
+        headerHeight += weekTypesHeaderHeight
+      }
+      return headerHeight
+    },
+    showWeekTypesHeader() {
+      return !this.allEventsAreOnBothWeeks && this.bothWeeks
+    },
     dayNames() {
       const names = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi']
       if (this.colmunsCount >= 6) names.push('Samedi')
@@ -210,7 +221,7 @@ export default {
       // The width is the total width divided by the number of columns there should be
       let width = total / this.colmunsCount
       // Half the width if its not on both week types
-      if (event.week_type !== 'BOTH') {
+      if (event.week_type !== 'BOTH' && this.bothWeeks) {
         width /= 2
       }
       return width
@@ -226,7 +237,7 @@ export default {
       const baseWidth = this.resolveWidth({ week_type: 'BOTH' })
       let x = baseWidth * event.day - baseWidth
       // If the event is in Q2, we need to offset it to the right
-      if (event.week_type === 'Q2') x += baseWidth / 2
+      if (event.week_type === 'Q2' && this.bothWeeks) x += baseWidth / 2
       // Get the difference between the start of the day and the start of this event,
       // Multiply by the height factor
       let y =
@@ -267,6 +278,7 @@ export default {
       }
     },
     handleEventClick(vueComponent) {
+      if (this.readOnly) return
       const eventUUID = vueComponent.target.attrs.id
       if (!eventUUID) return
       console.log(vueComponent)
@@ -279,6 +291,7 @@ export default {
       this.$modal.open('edit-event')
     },
     handleHover(evt) {
+      if (this.readOnly) return
       const canvas = this.$el
       // Check if its an event
       if (!evt.target.attrs.id) return

pages/schedule/index.vue

@@ -1,19 +1,22 @@
 <template lang="pug">
   .container.-sideby-side
-    .mutations-area
-      HeadingSub Cours supprimés / reportés
-      ul.mutations
-        li.new: ButtonNormal Nouveau cours reporté ou supprimé
-        li(v-for="mutation in mutations" :key="mutation.uuid")
-          CardMutation(v-bind="mutation")
+    //- .mutations-area
+    //-   HeadingSub Cours supprimés / reportés
+    //-   ul.mutations
+    //-     li.new: ButtonNormal Nouveau cours reporté ou supprimé
+    //-     li(v-for="mutation in mutations" :key="mutation.uuid")
+    //-       CardMutation(v-bind="mutation")
     .schedule
-      HeadingSub Emploi du temps
-      Schedule(:events="events")
+      .heading
+        HeadingSub Emploi du temps
+        ButtonNormal(small variant="outline" href="/setup/schedule/events") Modifier
+      Schedule(:events="events" read-only)
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { getUnixTime, addDays } from 'date-fns'
+// eslint-disable-next-line no-unused-vars
+import { getUnixTime, addDays, parse, format } from 'date-fns'
 import Schedule from '~/components/Schedule.vue'
 import HeadingSub from '~/components/HeadingSub.vue'
 import ButtonNormal from '~/components/ButtonNormal.vue'
@@ -35,17 +38,20 @@ export default {
         addDays(this.scheduleDate, 7)
       ).map((event) => ({
         ...event,
-        start: getUnixTime(event.start),
-        end: getUnixTime(event.end),
-        week_type: 'BOTH'
+        start: getUnixTime(
+          parse(format(event.start, 'HH:mm:ss'), 'HH:mm:ss', new Date(0))
+        ),
+        end: getUnixTime(
+          parse(format(event.end, 'HH:mm:ss'), 'HH:mm:ss', new Date(0))
+        )
       }))
     }
   },
   async mounted() {
     await this.$store.dispatch('schedule/load')
   },
   methods: {
-    ...mapGetters('schedule', ['coursesIn'])
+    ...mapGetters('schedule', ['coursesIn', 'events'])
   }
 }
 </script>
@@ -56,6 +62,12 @@ export default {
   // Cheap hack, if overflow-x is auto, overflow-y becomes either auto or scroll.
   // See: https://stackoverflow.com/a/39554003
   padding-bottom: 500px
+  display flex
+  flex-direction column
+  align-items center
+
+.schedule .heading
+  margin-bottom 2em
 
 h2
   margin-bottom: 1em