Custom hour split

.env.example

@@ -13,3 +13,8 @@ DEFAULT_VIEW='calendar'
 DISPLAY_FOOTER_AND_HEADER=true
 DEFAULT_CALENDAR_MODE='default'
 MOCK=
+# To show only events between 05:00 and 00:00 you can chose DAY_SPLIT_START=5 and DAY_SPLIT_END=24
+# Chose a value between 0 and 24 (integer). 0 Means 00:00 at the beginning of day, 24 means 00:00 at the end of the day
+# default let it empty. It's shows by default between 0 and 24
+DAY_SPLIT_START=
+DAY_SPLIT_END=

components/atoms/Modal.vue

@@ -22,13 +22,21 @@
     </header>
 
     <ul>
-      <li v-if="content.start" class="flex flex-col md:flex-row py-2">
+      <li v-if="content.startDisplay" class="flex flex-col md:flex-row py-2">
         <span class="w-80 font-bold pr-2">{{ $t('start') }}:</span>
-        {{ $dateFns.format(content.start, 'dd.MM.yyyy') }}
+        {{ $dateFns.format(content.startDisplay, 'dd.MM.yyyy HH:mm') }}
       </li>
-      <li v-if="content.end" class="flex flex-col md:flex-row py-2">
+      <li v-else-if="content.start" class="flex flex-col md:flex-row py-2">
+        <span class="w-80 font-bold pr-2">{{ $t('start') }}:</span>
+        {{ $dateFns.format(content.start, 'dd.MM.yyyy HH:mm') }}
+      </li>
+      <li v-if="content.endDisplay" class="flex flex-col md:flex-row py-2">
+        <span class="w-80 font-bold pr-2">{{ $t('end') }}:</span>
+        {{ $dateFns.format(content.endDisplay, 'dd.MM.yyyy HH:mm') }}
+      </li>
+      <li v-else-if="content.end" class="flex flex-col md:flex-row py-2">
         <span class="w-80 font-bold pr-2">{{ $t('end') }}:</span>
-        {{ $dateFns.format(content.end, 'dd.MM.yyyy') }}
+        {{ $dateFns.format(content.end, 'dd.MM.yyyy HH:mm') }}
       </li>
       <li v-if="content.comment" class="flex flex-col md:flex-row py-2">
         <span class="w-80 font-bold pr-2">{{ $t('details') }}:</span>

components/calendar/Calendar.vue

@@ -80,15 +80,41 @@ export default {
     formatFeatures(features) {
       this.calendarOptions.events = []
       features.forEach((feature) => {
+        const startsDisplay = new Date(feature.properties.starts_at)
+        const startsAt = new Date(startsDisplay)
+        const endsDisplay = new Date(feature.properties.ends_at)
+        const endsAt = new Date(endsDisplay)
+
+        const daySplitStart = process.env.DAY_SPLIT_START
+        const daySplitEnd = process.env.DAY_SPLIT_END
+
+        if (daySplitStart && daySplitEnd) {
+          const isSameDay = startsAt.getDate() === endsDisplay.getDate()
+
+          // If the day of start and end is not the same and event finish before daySplitStart, make the event finish 1 day earlier at daySplitEnd
+          if (!isSameDay && endsDisplay.getHours() < daySplitStart) {
+            endsAt.setDate(endsDisplay.getDate() - 1) // Remove 1 day
+            endsAt.setHours(daySplitEnd, 0, 0, 0)
+          }
+
+          // If the day of start and end is not the same and event starts before daySplitEnd, make the event start 1 day later at daySplitStart
+          if (!isSameDay && startsDisplay.getHours() > daySplitEnd) {
+            startsAt.setDate(startsDisplay.getDate() + 1) // add 1 day
+            startsAt.setHours(daySplitStart, 0, 0, 0)
+          }
+        }
+
         this.calendarOptions.events.push({
           title:
             feature.properties.submission.shortname === ''
               ? feature.properties.submission.administrative_entity.name
               : feature.properties.submission.shortname,
           comment: feature.properties.comment,
           externalLink: feature.properties.external_link,
-          start: feature.properties.starts_at,
-          end: feature.properties.ends_at,
+          start: startsAt,
+          end: endsAt,
+          startDisplay: startsDisplay,
+          endDisplay: endsDisplay,
           feature,
         })
       })
@@ -98,7 +124,7 @@ export default {
      * Filter Features
      * @param {Object} query
      * Get the query search selected thought the `Strainer` component and
-     * filter the data `features` Object to pass down the filtred `features`
+     * filter the data `features` Object to pass down the filtered `features`
      * to the `FullCalendar` component.
      */
     filterFeatures(query) {
@@ -123,14 +149,15 @@ export default {
         'getSubmissionsDetails',
         info.event.extendedProps.feature.properties.submission.id
       )
-
       this.modalContent = {
         id: info.event.extendedProps.feature.properties.submission.id,
         title: info.event.title,
         comment: info.event.extendedProps.comment,
         link: info.event.extendedProps.externalLink,
         start: info.event.start,
         end: info.event.end,
+        startDisplay: info.event.extendedProps.startDisplay,
+        endDisplay: info.event.extendedProps.endDisplay,
         submissionsDetails: submissionsDetails
           ? submissionsDetails.fields_values
           : {},

components/map/Map.vue

@@ -166,7 +166,7 @@ export default {
      * Filter Features
      * @param {Object} query
      * Get the query search selected thought the `Strainer` component and
-     * filter the data `features` Object to pass down the filtred `features`
+     * filter the data `features` Object to pass down the filtered `features`
      * to the `LayerVector` component.
      */
     filterFeatures(query) {

deploy_configurations/env.app

@@ -12,3 +12,8 @@ DEFAULT_VIEW='calendar'
 DISPLAY_FOOTER_AND_HEADER=true
 DEFAULT_CALENDAR_MODE='default'
 MOCK=
+# To show only events between 05:00 and 00:00 you can chose DAY_SPLIT_START=5 and DAY_SPLIT_END=24
+# Chose a value between 0 and 24 (integer). 0 Means 00:00 at the beginning of day, 24 means 00:00 at the end of the day
+# default let it empty. It's shows by default between 0 and 24
+DAY_SPLIT_START=
+DAY_SPLIT_END=

deploy_configurations/env.fribourg

@@ -11,4 +11,9 @@ CTA_LINK=https://fribourg.geocity.ch/?form=agy-manifestations
 DEFAULT_VIEW='calendar'
 DISPLAY_FOOTER_AND_HEADER=true
 DEFAULT_CALENDAR_MODE='month'
-MOCK=
+MOCK=
+# To show only events between 05:00 and 00:00 you can chose DAY_SPLIT_START=5 and DAY_SPLIT_END=24
+# Chose a value between 0 and 24 (integer). 0 Means 00:00 at the beginning of day, 24 means 00:00 at the end of the day
+# default let it empty. It's shows by default between 0 and 24
+DAY_SPLIT_START=
+DAY_SPLIT_END=

deploy_configurations/env.polcom

@@ -0,0 +1,19 @@
+# Specific for https://geocity.ch/app
+PRODUCTION_PATH=/app
+#Must not be empty
+LOCATION_API=
+GEOCITY_API=https://geocity.ch/rest/
+GEOCITY_API_EVENTS_START=2022-09-01
+GEOCITY_API_EVENTS_END=2030-12-01
+GEOCITY_API_ADMINISTRATIVE_ENTITES=
+GEOCITY_API_SHOW_ONLY_FUTURE=false
+CTA_LINK=https://geocity.ch
+DEFAULT_VIEW='calendar'
+DISPLAY_FOOTER_AND_HEADER=true
+DEFAULT_CALENDAR_MODE='default'
+MOCK=
+# To show only events between 05:00 and 00:00 you can chose DAY_SPLIT_START=5 and DAY_SPLIT_END=24
+# Chose a value between 0 and 24 (integer). 0 Means 00:00 at the beginning of day, 24 means 00:00 at the end of the day
+# default let it empty. It's shows by default between 0 and 24
+DAY_SPLIT_START=5
+DAY_SPLIT_END=0

deploy_configurations/env.roadworks

@@ -12,3 +12,8 @@ DEFAULT_VIEW='map'
 DISPLAY_FOOTER_AND_HEADER=false
 DEFAULT_CALENDAR_MODE='default'
 MOCK=
+# To show only events between 05:00 and 00:00 you can chose DAY_SPLIT_START=5 and DAY_SPLIT_END=24
+# Chose a value between 0 and 24 (integer). 0 Means 00:00 at the beginning of day, 24 means 00:00 at the end of the day
+# default let it empty. It's shows by default between 0 and 24
+DAY_SPLIT_START=
+DAY_SPLIT_END=

deploy_configurations/env.ycal

@@ -11,4 +11,9 @@ CTA_LINK=https://geocity.ch
 DEFAULT_VIEW='calendar'
 DISPLAY_FOOTER_AND_HEADER=false
 DEFAULT_CALENDAR_MODE='listMonth'
-MOCK=
+MOCK=
+# To show only events between 05:00 and 00:00 you can chose DAY_SPLIT_START=5 and DAY_SPLIT_END=24
+# Chose a value between 0 and 24 (integer). 0 Means 00:00 at the beginning of day, 24 means 00:00 at the end of the day
+# default let it empty. It's shows by default between 0 and 24
+DAY_SPLIT_START=
+DAY_SPLIT_END=

locales/fr.json

@@ -1,5 +1,5 @@
 {
-  "copyright": "© Ville d'Yverdon-les-Bains 2022",
+  "copyright": "© Ville d'Yverdon-les-Bains 2024",
   "connexion": "Connexion",
   "introduction": "Espace public est le point d'accès à l'information sur les activités planifiées sur le territoire de votre commune.",
   "ask": "Vous souhaitez demander une autorisation relative à un chantier ou une manifestation ?",
@@ -12,13 +12,13 @@
   "see-on-calendar": "Voir sur le calendrier",
   "event-type": "Type d'événement",
   "where": "Où?",
-  "select-no-option": "Pas de résultas",
+  "select-no-option": "Pas de résultats",
   "date-range": "Période",
   "map": "Plan",
   "calendar": "Calendrier",
-  "tracking-toggle": "Active geolocation",
+  "tracking-toggle": "Active géolocalisation",
   "clear-date-selection": "Supprimer dates sélection",
   "see-on-map": "Voir sur la carte",
   "logout": "Déconnexion",
-  "error": "Une erreur, c'est produite veuillez reesayer plus tard"
+  "error": "Une erreur, c'est produite veuillez ressayer plus tard"
 }