Merge pull request #18 from snowcamp/test-date

add a test file for date change

package.json

@@ -8,6 +8,7 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
+    "http-server": "npm run build && http-server dist",
     "astro": "astro"
   },
   "dependencies": {
@@ -23,6 +24,7 @@
     "jquery": "~3.7.1",
     "jquery-countdown": "~2.2.0",
     "jquery.easing": "~1.4.1",
+    "snowcamp-www": "file:",
     "typescript": "^5.2.2"
   },
   "devDependencies": {

src/components/DateTimeChangingChild.astro

@@ -22,17 +22,18 @@ const afterId = 'after' + id;
 <script>
   // Create your custom class for catching the parameter
   class IntervalReloader extends HTMLElement {
+    intervalId = -1;
     constructor() {
       super();
       const beginDate = this.dataset.begindate ? Number.parseInt(this.dataset.begindate, 10) : undefined;
       const endDate = this.dataset.enddate ? Number.parseInt(this.dataset.enddate, 10) : undefined;
       const refreshInterval = this.dataset.refreshinterval ? Number.parseInt(this.dataset.refreshinterval, 10) : undefined;
       const id = this.dataset.genid ? Number.parseInt(this.dataset.genid, 10) : undefined;
-      // console.log('beginDate', beginDate, 'endDate', endDate, 'refreshInterval', refreshInterval, 'id', id);
+      console.log('beginDate', beginDate, 'endDate', endDate, 'refreshInterval', refreshInterval, 'id', id);
       if (beginDate) {
         this.computeVisibility(''+id, beginDate, endDate);
         if (refreshInterval) {
-            setInterval(() => this.computeVisibility(''+id, beginDate, endDate), refreshInterval);
+            this.intervalId = setInterval(() => this.computeVisibility(''+id, beginDate, endDate), refreshInterval);
         }
       } else {
         console.error('No begin date for the component: ', id);
@@ -41,20 +42,26 @@ const afterId = 'after' + id;
     computeVisibility(id:string, beginDate:number, endDate?:number) {
         var now = new Date().getTime();
         if (now < beginDate) {
-            // console.log('Still before', now, beginDate,  "\n", new Date(now), "\n", new Date(beginDate));
+            console.log('Still before', now, beginDate,  "\n", new Date(now), "\n", new Date(beginDate));
             this.showElement('before'+id);
             this.hideElement('doing'+id);
             this.hideElement('after'+id);
+            this.cancelIntervalIfTooFar(now, beginDate, "Begin date");
         } else if (endDate && endDate < now) {
-            // console.log('Closed')
+            console.log('Closed')
             this.hideElement('before'+id);
             this.hideElement('doing'+id);
             this.showElement('after'+id);
+            if (this.intervalId > 0) this.cancelInterval();
         } else {
-            // console.log('Open')
+            console.log('Open')
             this.hideElement('before'+id);
             this.showElement('doing'+id);
             this.hideElement('after'+id);
+            if (endDate)
+                this.cancelIntervalIfTooFar(now, endDate, "Begin date");
+            else
+                this.cancelInterval();
         }
     }
     showElement(id: string) {
@@ -65,6 +72,16 @@ const afterId = 'after' + id;
         const el = document.getElementById(id);
         if (el) el.hidden = true;
     }
+    cancelIntervalIfTooFar(now:number, limit:number, limitName: string) {
+        if ((limit - now) > (24 * 3600 * 1000)) {
+            console.log(limitName+' is too far. => stop the interval');
+            this.cancelInterval();
+        }
+    }
+    cancelInterval() {
+        clearInterval(this.intervalId);
+        this.intervalId = -1;
+    }
   }
 
   customElements.define('astro-interval-reloader', IntervalReloader);

src/pages/sponsors_guide.astro

@@ -1,9 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import SponsorFormula from '../components/SponsorFormula.astro';
-import sponsors from '../data/sponsors.json';
 import { t } from "../i18n/i18n";
-import type Snowcamp from './snowcamp.astro';
 ---
 <Layout title="Snowcamp">
 <section>

src/pages/test.astro

@@ -0,0 +1,29 @@
+---
+import DateTimeChangingChild from "../components/DateTimeChangingChild.astro"
+import cfp from '../data/cfp.json';
+import { t } from "../i18n/i18n";
+
+---
+<div>Test of DateTimeChangingChild : 
+    <div id="clock">00:00:00</div>
+</div>
+<script>
+    var intervalId;
+    function updateClock() {
+        const now = new Date();
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        const seconds = String(now.getSeconds()).padStart(2, '0');
+        const timeString = `${hours}:${minutes}:${seconds}`;
+        const elm = document.getElementById('clock');
+        if (elm) elm.textContent = timeString;
+    }
+    intervalId = setInterval(updateClock, 1000);
+
+    updateClock(); // Initial call to display the clock immediately
+</script>
+<DateTimeChangingChild beginDate={Date.parse(cfp.dates.test.begin)} endDate={Date.parse(cfp.dates.test.end)} refreshInterval="10000">
+    <span slot="before" set:html={t('cfp_open_soon_desc')}></span>
+    <span slot="doing" set:html={t('cfp_open_desc')}></span>
+    <span slot="after" set:html={t('cfp_closed_desc')}></span>
+</DateTimeChangingChild>