display time left to node expiry on active nodes

src/components/GatheringNode.vue

@@ -2,12 +2,28 @@
   <article
     class="node"
     :class="{active: gatheringNode.isActive(eorzeaTime)}"
+  >
+    <div
+      v-if="!gatheringNode.isActive(eorzeaTime)"
     >
       <div class="timer">
         {{
-        gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime))
+          prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime))
         }}
       </div>
+    </div>
+    <div
+      v-else
+    >
+      <div class="timer">
+        Active
+        <div class="countdown">
+          {{
+            prettyTimer(gatheringNode.getSecondsToNextInactiveTime(eorzeaTime))
+          }}
+        </div>
+      </div>
+    </div>
     <div class="job">
       <div class="icon">
         <img
@@ -29,7 +45,9 @@
       <div class="info">
         <span>{{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }}</span>
         <span>{{ gatheringNode.nearestAetheryte.name.en }}</span>
-        <span>{{ gatheringNode.nearestAetheryte.position.x.toFixed(1) }}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }}</span>
+        <span>{{
+          gatheringNode.nearestAetheryte.position.x.toFixed(1)
+        }}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }}</span>
       </div>
     </div>
     <div class="items">
@@ -78,9 +96,15 @@ export default defineComponent({
 <style scoped lang="scss">
 
 @keyframes pulsing {
-  0% {background-color: rgba(255,255,255, 0.05);}
-  50% {background-color: rgba(255,255,255, 0.075);}
-  100% {background-color: rgba(255,255,255, 0.05);}
+  0% {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  50% {
+    background-color: rgba(255, 255, 255, 0.075);
+  }
+  100% {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
 }
 
 .node {
@@ -102,6 +126,8 @@ export default defineComponent({
     min-width: 7rem;
     font-size: 2rem;
     display: flex;
+    height: 100%;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
   }

src/entities/Node.ts

@@ -47,6 +47,15 @@ export default class Node {
     return countdown;
   }
 
+  getCountdownToInactive(eorzeaTime: EorzeaTime): number {
+    let countdown: number = Infinity;
+    for (const timeRange of this.times) {
+      const endTimeFrame: number = timeRange.getEndTimeFrame(eorzeaTime);
+      if (endTimeFrame < countdown) countdown = endTimeFrame;
+    }
+    return countdown;
+  }
+
   getNextActiveTime(eorzeaTime: EorzeaTime): EorzeaTime {
     let countdownTimeStamp: number = Infinity;
     for (const timeRange of this.times) {
@@ -56,8 +65,21 @@ export default class Node {
     return EorzeaTime.fromEorzeaTime(new Date(this.getCountdownToActive(eorzeaTime)));
   }
 
+  getNextInactiveTime(eorzeaTime: EorzeaTime): EorzeaTime {
+    let countdownTimeStamp: number = Infinity;
+    for (const timeRange of this.times) {
+        const endTimeFrame: number = timeRange.getEndTimeFrame(eorzeaTime);
+        if (endTimeFrame < countdownTimeStamp) countdownTimeStamp = endTimeFrame;
+    }
+    return EorzeaTime.fromEorzeaTime(new Date(this.getCountdownToInactive(eorzeaTime)));
+  }
+
   getSecondsToNextActiveTime(eorzeaTime: EorzeaTime): number {
     return Math.floor((this.getNextActiveTime(eorzeaTime).realDate.getTime() - eorzeaTime.realDate.getTime()) / 1000);
   }
 
+  getSecondsToNextInactiveTime(eorzeaTime: EorzeaTime): number {
+    return Math.floor((this.getNextInactiveTime(eorzeaTime).realDate.getTime() - eorzeaTime.realDate.getTime()) / 1000);
+  }
+
 }

src/entities/TimeRange.ts

@@ -29,4 +29,17 @@ export default class TimeRange {
     return targetDate.getTime();
   }
 
+    /**
+     * Returns the timestamp when the current time range will end
+     * @param eorzeaTimeFrom
+     */
+  public getEndTimeFrame(eorzeaTimeFrom: EorzeaTime): number {
+    const targetDate = new Date(eorzeaTimeFrom.eorzeaDate.getTime());
+    targetDate.setUTCHours(this.to[0], 0, 0, 0);
+    if (eorzeaTimeFrom.getHours() >= this.to[0]) {
+      targetDate.setUTCHours(this.to[0] + 24);
+    }
+    return targetDate.getTime();
+  }
+
 }