95 opening status error fix (kulturfinder#99)

Dataport · Jan 30, 2024 · 5323d3c · 5323d3c
1 parent e96a840
commit 5323d3c
Showing 1 changed file with 48 additions and 18 deletions.
diff --git a/src/views/details/Details.vue b/src/views/details/Details.vue
@@ -278,28 +278,31 @@
               <div v-else id="opening-hours-container">
                 <!-- Opening Status -->
                 <div v-if="institution.openingTimes.week" id="opening-status">
-                  <b-row v-if="getCurrentOpeningState()">
-                    <b-col cols="3">
-                      <div id="opened" class="py-2 mt-4 mb-2">
+                  <b-row>
+                    <b-col cols="12" md="4">
+                      <!-- Institution currently opened -->
+                      <div v-if="getCurrentOpeningState()" id="opened" class="py-2 mt-4 mb-2">
                         {{ $t('details.currentlyOpened') }}
                       </div>
-                    </b-col>
-                    <b-col cols="4" id="nextOpened" class="pt-2 mt-4 mb-2">
-                      <p>{{ $t('details.closes') }} {{ $t('details.at') }} {{ getNextClosingTime() | time($i18n.locale) }}</p>
-                    </b-col>
-                  </b-row>
-                  <b-row v-else>
-                    <b-col cols="3">
-                      <div id="closed" class="py-2 mt-4 mb-2">
+                      <!-- Institution currently closed -->
+                      <div v-if="!getCurrentOpeningState() && getNextOpeningDay() !== false" id="closed" class="py-2 mt-4 mb-2">
                         {{ $t('details.currentlyClosed') }}
                       </div>
+                      <!-- Institution always closed -->
+                      <div v-if="getNextOpeningDay() === false && !getCurrentOpeningState()" id="closed" class="py-2 mt-4 mb-2">
+                        {{ $t('details.closed') }}
+                      </div>
                     </b-col>
-                    <b-col cols="4" id="nextOpened" class="pt-2 mt-4 mb-2">
-                      <p>
-                        {{ $t('details.opens') }}
-                        <span v-if="getNextOpeningDay() !== getDayName(new Date().getDay())">
-                          {{ $t(`details.${getNextOpeningDay()}`) }}
-                        </span>
+                    <b-col cols="12" md="4" id="nextOpened"
+                           class="pt-2 mb-2 desktop-mt mobile-mt"
+                    >
+                      <!-- Institution currently opened -->
+                      <p v-if="getCurrentOpeningState()">
+                        {{ $t('details.closes') }} {{ $t('details.at') }} {{ getNextClosingTime() | time($i18n.locale) }}
+                      </p>
+                      <!-- Institution currently closed -->
+                      <p v-if="!getCurrentOpeningState() && getNextOpeningDay() !== false">
+                        {{ $t('details.opens') }} {{ $t(`details.${getNextOpeningDay()}`) }}
                         {{ $t('details.at') }} {{ getNextOpeningTime() | time($i18n.locale) }}
                       </p>
                     </b-col>
@@ -695,6 +698,19 @@ export default {
     // returns true if day has openingTimes
     getOpenDayState(day) {
       const openingTimes = this.getDayTimes(day)
+
+      if (
+        openingTimes &&
+        openingTimes.first &&
+        openingTimes.first.timeStart === '' &&
+        openingTimes.first.timeEnd === '' &&
+        openingTimes.second &&
+        openingTimes.second.timeStart === '' &&
+        openingTimes.second.timeEnd === ''
+      ) {
+        return false
+      }
+
       return !(openingTimes === undefined || openingTimes === null)
     },
 
@@ -754,7 +770,7 @@ export default {
         if (this.getOpenDayState(i) === true && this.getCurrentOpeningState() === false) {
           return this.getDayName(i)
         }
-      } return this.getDayName(openingDayNum)
+      } return false
     },
 
     getDayName(dayIndex) {
@@ -974,4 +990,18 @@ input[type=submit] {
     width: 100%;
   }
 }
+
+@media (min-width: 500px) { /* Für Desktop */
+  .desktop-mt {
+    margin-top: 25px;
+  }
+}
+
+@media (max-width: 767px) { /* Für Mobilgeräte */
+  .mobile-mt {
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+}
+
 </style>