@raketa-cloud/admin 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "main": "src/index.js",
   "scripts": {
     "dev": "npx tailwindcss -i ./src/styles/application.css -o ../../apps/admin/static/application.css --watch",

package/src/HonoAdapter.js

@@ -102,6 +102,7 @@ export default class HonoAdapter extends Adapter {
         ctx.remoteConfig = { ...this.globalConfig.remoteConfig };
 
         const _context = {
+          timezones: this.globalConfig.i18n.timezones,
           locales: ctx.locales,
           locale: ctx.locale,
           defaultLocale: ctx.defaultLocale,

package/src/cloud/Events.js

@@ -15,9 +15,9 @@ export default class Events extends RaketaClient {
     return {
       visibility: "private",
       layout: "default",
-      publish_at: toDateTimeInput(new Date()),
-      starts_at: toDateTimeInput(new Date()),
-      ends_at: toDateTimeInput(new Date()),
+      publish_at: toDateTimeInput(),
+      starts_at: toDateTimeInput(),
+      ends_at: toDateTimeInput(),
       tags: [],
       categories: [],
     };

package/src/styles/application.css

@@ -166,6 +166,10 @@ body {
     .checkbox-wrapper input[type="checkbox"] {
       @apply size-4 px-0;
     }
+
+    .hint {
+      @apply text-sm opacity-50;
+    }
   }
 
   .inline-form {

package/src/tests/handlers/article_revisions/GeneralHandler.test/edit_form.test.js

@@ -38,7 +38,7 @@ describe("Article revision genereal settings", () => {
           title: revision.title,
           slug: revision.slug,
           visibility: revision.visibility,
-          publish_at: "2024-08-30T19:05",
+          publish_at: "2024-08-30T16:05:00",
           username: revision.settings?.credentials?.user || "",
           password: revision.settings?.credentials?.password || "",
         },

package/src/tests/handlers/article_revisions/GeneralHandler.test/update.test.js

@@ -54,7 +54,7 @@ describe("Article revision general settings", () => {
       slug: updateSettings.slug,
       title: updateSettings.title,
       visibility: updateSettings.visibility,
-      publishAt: "2024-08-30T16:05:00Z",
+      publishAt: "2024-08-30T19:05:00Z",
       widgets: JSON.stringify(revision.widgets),
       tags: revision.tags.map((t) => t.id),
       categories: revision.categories.map((c) => c.id),
@@ -107,7 +107,7 @@ describe("Article revision general settings", () => {
       slug: updateSettings.slug,
       title: updateSettings.title,
       visibility: updateSettings.visibility,
-      publishAt: "2024-08-30T16:05:00Z",
+      publishAt: "2024-08-30T19:05:00Z",
       widgets: JSON.stringify(revision.widgets),
       tags: revision.tags.map((t) => t.id),
       categories: revision.categories.map((c) => c.id),

package/src/tests/handlers/articles/ArticlesHandler.test/create.test.js

@@ -50,7 +50,7 @@ describe("Articles Handler", () => {
         title: params.title,
         slug: params.slug,
         visibility: params.visibility,
-        publishAt: "2024-10-10T03:58:00Z",
+        publishAt: "2024-10-10T06:58:00Z",
         settings: {
           layout: params.layout,
           meta: {
@@ -116,7 +116,7 @@ describe("Articles Handler", () => {
         title: params.title,
         slug: "",
         visibility: params.visibility,
-        publishAt: "2024-10-10T03:58:00Z",
+        publishAt: "2024-10-10T06:58:00Z",
         settings: {
           layout: params.layout,
           meta: {

package/src/tests/handlers/event_revisions/GeneralHandler.test/edit_form.test.js

@@ -40,9 +40,9 @@ describe("Event revision genereal settings", () => {
           title: revision.title,
           slug: revision.slug,
           visibility: revision.visibility,
-          publish_at: "2024-08-30T22:05",
-          starts_at: "2024-08-30T22:10",
-          ends_at: "2024-08-30T22:15",
+          publish_at: "2024-08-30T19:05:00",
+          starts_at: "2024-08-30T19:10:00",
+          ends_at: "2024-08-30T19:15:00",
           username: revision.settings?.credentials?.user || "",
           password: revision.settings?.credentials?.password || "",
         },

package/src/tests/handlers/event_revisions/GeneralHandler.test/update.test.js

@@ -56,9 +56,9 @@ describe("Event revision general settings", () => {
       slug: updateSettings.slug,
       title: updateSettings.title,
       visibility: updateSettings.visibility,
-      publishAt: "2024-08-30T16:05:00Z",
-      startsAt: "2024-08-30T16:10:00Z",
-      endsAt: "2024-08-30T16:15:00Z",
+      publishAt: "2024-08-30T19:05:00Z",
+      startsAt: "2024-08-30T19:10:00Z",
+      endsAt: "2024-08-30T19:15:00Z",
       widgets: JSON.stringify(revision.widgets),
       tags: revision.tags.map((t) => t.id),
       categories: revision.categories.map((c) => c.id),
@@ -113,9 +113,9 @@ describe("Event revision general settings", () => {
       slug: updateSettings.slug,
       title: updateSettings.title,
       visibility: updateSettings.visibility,
-      publishAt: "2024-08-30T16:05:00Z",
-      startsAt: "2024-08-30T16:10:00Z",
-      endsAt: "2024-08-30T16:15:00Z",
+      publishAt: "2024-08-30T19:05:00Z",
+      startsAt: "2024-08-30T19:10:00Z",
+      endsAt: "2024-08-30T19:15:00Z",
       widgets: JSON.stringify(revision.widgets),
       tags: revision.tags.map((t) => t.id),
       categories: revision.categories.map((c) => c.id),

package/src/tests/handlers/events/EventsHandler.test/create.test.js

@@ -52,9 +52,9 @@ describe("Events Handler", () => {
         title: params.title,
         slug: params.slug,
         visibility: params.visibility,
-        publishAt: "2024-10-10T03:40:00Z",
-        startsAt: "2024-10-10T03:50:00Z",
-        endsAt: "2024-10-10T03:59:00Z",
+        publishAt: "2024-10-10T06:40:00Z",
+        startsAt: "2024-10-10T06:50:00Z",
+        endsAt: "2024-10-10T06:59:00Z",
         settings: {
           layout: params.layout,
           meta: {
@@ -122,9 +122,9 @@ describe("Events Handler", () => {
         title: params.title,
         slug: "",
         visibility: params.visibility,
-        publishAt: "2024-10-10T03:40:00Z",
-        startsAt: "2024-10-10T03:50:00Z",
-        endsAt: "2024-10-10T03:59:00Z",
+        publishAt: "2024-10-10T06:40:00Z",
+        startsAt: "2024-10-10T06:50:00Z",
+        endsAt: "2024-10-10T06:59:00Z",
         settings: {
           layout: params.layout,
           meta: {

package/src/utils.js

@@ -1,46 +1,30 @@
-export function toUTCISO8601String(initialDate) {
-  let date = null;
-
-  if (typeof initialDate === "string") {
-    date = new Date(initialDate);
-  } else {
-    date = initialDate;
-  }
-
-  return [
-    date.getUTCFullYear(),
-    "-",
-    (date.getUTCMonth() + 1).toString().padStart(2, "0"),
-    "-",
-    date.getUTCDate().toString().padStart(2, "0"),
-    "T",
-    date.getUTCHours().toString().padStart(2, "0"),
-    ":",
-    date.getUTCMinutes().toString().padStart(2, "0"),
-    ":",
-    date.getUTCSeconds().toString().padStart(2, "0"),
-    "Z",
-  ].join("");
+export function toUTCISO8601String(inputDate) {
+  // The format coming from the datetie-local input is YYYY-mm-ddTHH:MM
+  // e.g. 2024-10-10T14:25
+  // Currently we will just use that as a UTC value and show some explanation in the UI!
+  return `${inputDate}:00Z`;
 }
 
-export function toDateTimeInput(initialDate) {
-  let date = null;
-
+export function toDateTimeInput(initialDate = null) {
   if (typeof initialDate === "string") {
-    date = new Date(initialDate);
-  } else {
-    date = initialDate;
+    // The case where it comes from the DB it is in UTC. We are going to directly feed it to the
+    // datetime-local input and add explanations in the UI!
+    return initialDate.replace("Z", "");
   }
 
+  // Directly use the current time for to feed the datetime-local input.
+  // show UI hints that this is going to be used as UTC time.
+  const now = new Date();
+
   return [
-    date.getFullYear(),
+    now.getFullYear(),
     "-",
-    (date.getMonth() + 1).toString().padStart(2, "0"),
+    (now.getMonth() + 1).toString().padStart(2, "0"),
     "-",
-    date.getDate().toString().padStart(2, "0"),
+    now.getDate().toString().padStart(2, "0"),
     "T",
-    date.getHours().toString().padStart(2, "0"),
+    now.getHours().toString().padStart(2, "0"),
     ":",
-    date.getMinutes().toString().padStart(2, "0"),
+    now.getMinutes().toString().padStart(2, "0"),
   ].join("");
 }

package/src/views/article_revisions/general/edit_form.ejs

@@ -11,7 +11,7 @@
       <form action="<%= `/${_context.locale}/article_revisions/${general_settings.id}/general` %>" method="POST" class="form">
         <%- f.field('general_settings.title', { required: true }) %>
         <%- f.field('general_settings.slug', { label: "URL", required: true }) %>
-        <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local' }) %>
+        <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
         <%- f.field('general_settings.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
 
         <%- f.field('general_settings.username', { required: true }) %>

package/src/views/event_revisions/general/edit_form.ejs

@@ -11,9 +11,9 @@
       <form action="<%= `/${_context.locale}/event_revisions/${general_settings.id}/general` %>" method="POST" class="form">
         <%- f.field('general_settings.title', { required: true }) %>
         <%- f.field('general_settings.slug', { label: "URL", required: true }) %>
-        <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local' }) %>
-        <%- f.field('general_settings.starts_at', { required: true, type: 'datetime-local' }) %>
-        <%- f.field('general_settings.ends_at', { required: true, type: 'datetime-local' }) %>
+        <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
+        <%- f.field('general_settings.starts_at', { required: true, type: 'datetime-local', label: 'Starts at (UTC)' }) %>
+        <%- f.field('general_settings.ends_at', { required: true, type: 'datetime-local', label: 'Ends at (UTC)' }) %>
         <%- f.field('general_settings.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
 
         <%- f.field('general_settings.username', { required: true }) %>

package/src/views/layouts/application.ejs

@@ -104,6 +104,38 @@
     initToggle();
     toggleEl.addEventListener('click', handleToggle);
   </script>
+
+  <script>
+    // Don't ask
+    const TIMEZONES = JSON.parse("<%= JSON.stringify(_context.timezones) %>".replaceAll("&#34;", '"'))
+
+    function enhanceDateTimeInputs(input) {
+      // skew the date so it is like in UTC for the user...
+      // The datetime-local input gives the result witout a timezone so we can just attach the UTC one...
+      const fakeUTCDate = new Date(`${input.value}:00Z`)
+
+      const parent = input.parentNode;
+
+      parent.querySelectorAll('[data-auto="1"]').forEach(node => node.remove())
+
+      TIMEZONES.forEach(timeZone => {
+        const strTime = fakeUTCDate.toLocaleString("en-EU",{timeZone: `${timeZone.value}`});
+        const hint = document.createElement("div");
+
+        hint.classList.add('hint')
+        hint.innerText = `${timeZone.label}: ${strTime}`;
+        hint.dataset.auto = "1";
+
+        parent.appendChild(hint)
+      })
+    }
+
+    document.querySelectorAll('input[type="datetime-local"]').forEach(input => {
+      enhanceDateTimeInputs(input);
+
+      input.addEventListener("change", (event) => enhanceDateTimeInputs(event.target))
+    } )
+  </script>
 </body>
 
 </html>