Show creation date in plan page

Author: pgiraud

app/static/dist/.vite/manifest.json

@@ -38,7 +38,7 @@
     ]
   },
   "app/static/js/plan.js": {
-    "file": "assets/plan-Bwjl4Amt.js",
+    "file": "assets/plan-Cu_Fu6tG.js",
     "name": "plan",
     "src": "app/static/js/plan.js",
     "isEntry": true,

app/static/dist/assets/plan-Bwjl4Amt.js

@@ -0,0 +1,38 @@
+<template>
+  <small class="lh-1"
+    ><small
+      >created <span :title="longDate">on {{ shortDate }}</span></small
+    ></small
+  >
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps(["date"]);
+const dateObj = new Date(props.date);
+
+const language = ref(navigator.language);
+
+const shortDate = computed(() => {
+  // Format according to the user's locale
+  return dateObj.toLocaleString(navigator.language, {
+    year: "numeric", // Example: "2023"
+    month: "short", // Example: "Nov"
+    day: "numeric", // Example: "9"
+  });
+});
+
+const longDate = computed(() => {
+  // Format according to the user's locale
+  return dateObj.toLocaleString(navigator.language, {
+    weekday: "short", // Example: "Thu"
+    year: "numeric", // Example: "2023"
+    month: "short", // Example: "Nov"
+    day: "numeric", // Example: "9"
+    hour: "numeric", // Example: "11"
+    minute: "numeric", // Example: "15"
+    second: "numeric", // Optional: show seconds
+    timeZoneName: "short", // Show time zone like "GMT+1"
+  });
+});
+</script>

app/static/dist/assets/plan-Cu_Fu6tG.js

@@ -2,6 +2,7 @@ import "./common.js";
 import { createApp } from "vue";
 import { Plan } from "pev2";
 import { ref } from "vue";
+import Created from "./created.vue";
 
 import "pev2/dist/style.css";
 
@@ -18,6 +19,7 @@ const app = createApp({
   },
   components: {
     pev2: Plan,
+    created: Created,
   },
 });
 app.component("font-awesome-icon", FontAwesomeIcon);

app/static/js/created.vue

@@ -32,11 +32,12 @@
       {% raw %}{{ plan.title || '' }}{% endraw %}
     </span>
     {% if plan %}
-    <span class="navbar-text">
+    <span class="navbar-text p-0 text-end d-flex flex-column">
       <a href="{{ url_for('plan_from_db', id=plan.id) }}">
         <font-awesome-icon icon="link"></font-awesome-icon>
         plan/{{ plan.id }}
       </a>
+      <created date="{{ plan.created }}"></created>
     </span>
     {% endif %}
   </nav>