From cd35564e0b53fc379c8193c014d995885c23eaa5 Mon Sep 17 00:00:00 2001
From: Kamieljv <kamiel.verhelst@proton.me>
Date: Sun, 1 Dec 2024 21:46:27 +0100
Subject: [PATCH] Replaced moment with luxon

---
 package-lock.json                              | 18 +++++++++---------
 package.json                                   |  2 +-
 resources/js/components/StatsDashboard.vue     | 10 ++++------
 resources/views/assets/js/app.js               |  4 ++++
 .../js/components/apps/Notifications.vue       |  4 ++--
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 18183707..8846dd27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
                 "leaflet": "^1.9.4",
                 "loader-utils": "^3.3.1",
                 "lodash": "^4.17.21",
-                "moment": "^2.30.1",
+                "luxon": "^3.5.0",
                 "postcss-scss": "^4.0.9",
                 "primevue": "^4.0.7",
                 "sass": "^1.79.3",
@@ -4472,6 +4472,14 @@
                 "yallist": "^3.0.2"
             }
         },
+        "node_modules/luxon": {
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+            "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.11",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -4624,14 +4632,6 @@
                 "ufo": "^1.5.3"
             }
         },
-        "node_modules/moment": {
-            "version": "2.30.1",
-            "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-            "engines": {
-                "node": "*"
-            }
-        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index d10dfbc7..9bf4f444 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
         "leaflet": "^1.9.4",
         "loader-utils": "^3.3.1",
         "lodash": "^4.17.21",
-        "moment": "^2.30.1",
+        "luxon": "^3.5.0",
         "postcss-scss": "^4.0.9",
         "primevue": "^4.0.7",
         "sass": "^1.79.3",
diff --git a/resources/js/components/StatsDashboard.vue b/resources/js/components/StatsDashboard.vue
index 9738862a..90a48996 100644
--- a/resources/js/components/StatsDashboard.vue
+++ b/resources/js/components/StatsDashboard.vue
@@ -69,7 +69,7 @@
 
 import { onMounted, ref } from "vue"
 import axios from 'axios'
-import moment from 'moment'
+import { DateTime, Duration } from "luxon";
 
 const props = defineProps({
 	platformStatsRoute: {
@@ -125,8 +125,8 @@ const getVisitStats = (startDaysAgo, endDaysAgo) => {
 				"Authorization": `Bearer ${response.data.token}`
 			},
 			params: {
-				startAt: moment().subtract(startDaysAgo, "days").unix()*1000,
-				endAt: moment().subtract(endDaysAgo, "days").unix()*1000
+				startAt: DateTime.now().minus({days: startDaysAgo}).toMillis(),
+				endAt: DateTime.now().minus({days: endDaysAgo}).toMillis()
 			}
 		}).then((response) => {
 			processData(response.data);
@@ -189,9 +189,7 @@ const processData = (data) => {
 
 const formatShortTime = (secs, space = ' ') => {
 	const prefix = secs < 0 ? '-' : '';
-	const time = moment.utc(secs * 1000)
-	const minutes = time.minutes()
-	const seconds = time.seconds()
+	const {minutes, seconds} = Duration.fromObject({ seconds: Math.round(secs) });
 
 	let t = '';
 
diff --git a/resources/views/assets/js/app.js b/resources/views/assets/js/app.js
index 79eae70c..00fe296e 100644
--- a/resources/views/assets/js/app.js
+++ b/resources/views/assets/js/app.js
@@ -30,6 +30,10 @@ import { setLocale } from "@vee-validate/i18n"
 setLocale('nl')
 import './validations'
 
+// Luxon locale
+import { Settings } from "luxon"
+Settings.defaultLocale = "nl";
+
 // Image upload/edit
 import "exif-js"
 
diff --git a/resources/views/assets/js/components/apps/Notifications.vue b/resources/views/assets/js/components/apps/Notifications.vue
index 53453093..67f8b9dd 100644
--- a/resources/views/assets/js/components/apps/Notifications.vue
+++ b/resources/views/assets/js/components/apps/Notifications.vue
@@ -41,7 +41,7 @@
 							</div>
 						</a>
 						<div class="flex space-x-3 w-full items-center justify-left mt-2 text-xs font-medium leading-5 text-gray-500">
-							<span class="notification-datetime text-xs">{{ moment(n.created_at).fromNow() }}</span>
+							<span class="notification-datetime text-xs">{{ DateTime.fromISO(n.created_at).toRelative() }}</span>
 							<span v-if="n.unread">•</span>
 							<span v-if="n.unread" @click="markAsRead" :data-id="n.id" :data-listid="i" class="flex justify-start text-xs text-gray-500 cursor-pointer hover:text-gray-700 mark-as-read hover:underline">
 								<svg class="absolute w-4 h-4 mt-1 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
@@ -58,7 +58,7 @@
 
 <script setup lang="ts">
 import axios from 'axios';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 import { computed, ref } from 'vue';
 import InboxIcon from '&/antdesign-inbox-o.svg';
 import BellIcon from '&/bell.svg';