feat: util functions, format date and time

frontend/src/util.js

@@ -0,0 +1,22 @@
+export function slugify(name) {
+  return name
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/&/g, "-and-") // Replace & with 'and'
+    .replace(/[\s\W-]+/g, "-")
+    .replace(/-$/, ""); // Remove last floating dash if exists
+}
+
+export function formatDate(date) {
+  return new Date(Date.parse(date)).toLocaleDateString();
+}
+
+export function formatTime(time) {
+  return new Date(Date.parse(time)).toLocaleTimeString();
+}
+
+export function formatDatetime(datetime) {
+  const date = new Date(Date.parse(datetime));
+  return date.toLocaleDateString() + " " + date.toLocaleTimeString();
+}

frontend/src/views/Room.vue

@@ -24,7 +24,7 @@
             <div>{{ message.AuthorID }}</div>
           </div>
           <div class="post-container">
-            <div class="time">{{ message.CreatedAt }}</div>
+            <div class="time">{{ formatDatetime(message.CreatedAt) }}</div>
             {{ message.Message }}
           </div>
         </div>
@@ -35,6 +35,7 @@
 
 <script>
 import { mapGetters } from "@/store";
+import { formatDatetime } from "@/util";
 export default {
   data() {
     return {
@@ -43,6 +44,7 @@ export default {
     };
   },
   methods: {
+    formatDatetime,
     getData(routeName) {
       const getters = mapGetters(["room", "roomMessages"]);
       const id = routeName.split("-", 2)[0];

frontend/src/views/Tracks.vue

@@ -43,6 +43,7 @@
 <script>
 import TrackCard from "@/components/TrackCard";
 import { mapGetters } from "@/store";
+import { slugify } from "@/util";
 
 export default {
   components: {
@@ -53,13 +54,7 @@ export default {
   },
   methods: {
     getRouterString(item) {
-      return item
-        .toString()
-        .toLowerCase()
-        .trim()
-        .replace(/&/g, "-and-") // Replace & with 'and'
-        .replace(/[\s\W-]+/g, "-")
-        .replace(/-$/, ""); // Remove last floating dash if exists
+      return slugify(item);
     }
   }
 };