Dodano tooltip dla sygnału statusu danych

src/App.scss

@@ -18,6 +18,19 @@
   }
 }
 
+// INDICATOR TOOLTIP ANIMATION
+.tooltip-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+}
+
 .route {
   margin: 0 0.2em;
 
@@ -84,25 +97,94 @@
 
   border-radius: 0 0 1em 1em;
 
-  .signal-status-indicator {
+}
+
+.indicator {
+  &-wrapper {
     position: absolute;
     left: 50%;
     bottom: 0;
-    
     transform: translateX(11.6em);
+    z-index: 100;
 
+  }
+
+  &-content {
+    display: flex;
+    position: relative;
+
+  }
+
+  &-svg {
     width: 1.2em;
   }
+
+  &-tooltip {
+    position: absolute;
+    top: 50%;
+    left: 100%;
+
+
+    transform: translateY(-50%);
+    padding: 0.5em;
+    margin-left: 1em;
+
+    background-color: #171717;
+    border-radius: 0.75em;
+
+    min-width: 13em;
+    text-align: center;
+    overflow: none;
+
+    font-size: 0.95em;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 1px;
+
+      transform: translate(-100%, -50%);
+
+      width: 0; 
+      height: 0; 
+      
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent; 
+      border-right: 12px solid #171717;
+
+      content: '';
+    }
+
+    @include midScreen() {
+      left: 50%;
+      top: 100%;
+
+      transform: translate(-50%, 0);
+      margin-left: 0;
+      margin-top: 0.75em;
+
+      &::before {
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid #171717;
+
+        top: 0;
+        left: 50%;
+
+        transform: translate(-50%, -100%);
+      }
+    }
+
+    @include smallScreen() {
+      min-width: 8em;  
+    }
+
+
+  }
 }
 
-.train-logo {
-  position:  relative;
-}
-
-
 
 .header {
-  
   &_brand {
     position: relative;
     width: 100%;

src/App.vue

@@ -8,12 +8,26 @@
       </div> -->
       <header class="app_header">
         <div class="header_body">
-          <object
-            class="signal-status-indicator"
-            type="image/svg+xml"
-            :data="icons.statusIndicator"
-            ref="status-indicator"
-          ></object>
+          <div class="indicator-wrapper">
+            <div class="indicator-content">
+              <object
+                class="indicator-svg"
+                type="image/svg+xml"
+                :data="icons.statusIndicator"
+                ref="status-indicator"
+                @mouseenter="() => tooltipActive = true"
+                @mouseleave="() => tooltipActive = false"
+              ></object>
+
+              <transition name="tooltip-anim">
+                <div class="indicator-tooltip" v-if="tooltipActive">
+                  <b>{{ indicator.status <= 0 ? 'S3' : indicator.status == 1 ? 'S1a' : indicator.status == 2 ? 'S2' : 'S5' }}</b>
+                  <br>
+                  {{ indicator.message }}
+                </div>
+              </transition>
+            </div>
+          </div>
 
           <!-- <object class="signal-status-indicator" :src="icons.statusIndicator" alt="status-icon" ref="status-indicator"></object> -->
           <span class="header_brand">
@@ -155,10 +169,12 @@ export default defineComponent({
       error: require('@/assets/icon-error.svg'),
     },
 
-    indicator: {} as {
-      status: DataStatus;
-      message: string;
+    indicator: {
+      status: DataStatus.Loading,
+      message: "Ładowanie danych..."
     },
+
+    tooltipActive: false
   }),
 
   created() {
@@ -190,6 +206,13 @@ export default defineComponent({
         return;
       } 
 
+      if (timetableDataStatus == DataStatus.Warning) {
+        this.indicator.status = DataStatus.Warning;
+        this.indicator.message = "Rozkłady jazdy mogą być niekompletne!";
+        this.setSignalStatus(DataStatus.Warning);
+        return;
+      } 
+
       if (trainsDataStatus == DataStatus.Warning) {
         this.indicator.status = DataStatus.Warning;
         this.indicator.message = "Nie można pobrać danych o pociągach!";
@@ -204,15 +227,8 @@ export default defineComponent({
         return;
       } 
 
-      if (timetableDataStatus == DataStatus.Warning) {
-        this.indicator.status = DataStatus.Warning;
-        this.indicator.message = "Rozkłady jazdy mogą być niekompletne!";
-        this.setSignalStatus(DataStatus.Warning);
-        return;
-      } 
-
       this.indicator.status = DataStatus.Loaded;
-      this.indicator.message = "";
+      this.indicator.message = "Dane załadowane poprawnie!";
 
       this.setSignalStatus(DataStatus.Loaded);
     },
@@ -240,9 +256,9 @@ export default defineComponent({
 
     const obj = this.$refs['status-indicator'] as HTMLObjectElement;
 
-    obj.addEventListener('load', () => {
-      this.setSignalStatus(DataStatus.Loading);
-    });
+    // obj.addEventListener('load', () => {
+    //   this.setSignalStatus(DataStatus.Loading);
+    // });
   },
 
   methods: {
@@ -260,6 +276,8 @@ export default defineComponent({
       const orange = obj.contentDocument?.querySelector('#orange') as SVGElement;
       const redBottom = obj.contentDocument?.querySelector('#red-bottom') as SVGElement;
 
+      if(!green || !greenBlink || !redTop || !orange || !redBottom) return;
+
       if (status == DataStatus.Loaded) {
         green.style.visibility = 'visible';
         greenBlink.style.visibility = 'hidden';
@@ -291,10 +309,6 @@ export default defineComponent({
         orange.style.visibility = 'hidden';
         redBottom.style.visibility = 'hidden';
       }
-
-      // (this.$refs['redTop'] as SVGElement).style.display = "none";
-      // (this.$refs['orangeBottom'] as SVGElement).style.display = "block";
-      // (this.$refs['redBottom'] as SVGElement).style.display = "none";
     },
 
     changeLang(lang: string) {

src/store/index.ts

@@ -119,7 +119,7 @@ export const store = createStore<State>({
           const onlineDispatchersData: { success: boolean, message: string[][] } = await response[2].data;
 
           if (!onlineStationsData.success) {
-            commit(MUTATIONS.SET_DATA_CONNECTION_STATUS, DataStatus.Error);
+            // commit(MUTATIONS.SET_DATA_CONNECTION_STATUS, DataStatus.Error);
             commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Error);
             return;
           }            
@@ -207,7 +207,7 @@ export const store = createStore<State>({
         const data: { success: boolean; message: TimetableAPIData } = await (await axios.get(URLs.getTimetableURL(train.trainNo, this.state.region.id))).data;
 
         if (!data.success) {
-          warnings++;
+          warnings++;          
           return acc;
         }