Replaced moment with luxon

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",

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 = '';
 

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"
 

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';