Merge pull request #503 from henb/main

Feat: improve date handling and add navigation controls
This commit is contained in:
Raj Nandan Sharma
2025-10-17 20:31:06 +05:30
committed by GitHub
6 changed files with 87 additions and 43 deletions

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "kener",
"version": "3.2.15",
"version": "3.2.19",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "kener",
"version": "3.2.15",
"version": "3.2.19",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.10",

View File

@@ -279,7 +279,7 @@ export const SystemDataMessage = async () => {
upsPercentage,
degradedPercentage,
downsPercentage,
maintenancePercentage
maintenancePercentage,
};
};
@@ -1530,10 +1530,10 @@ export const GetSiteMap = async (cookies) => {
}
//get today's date in January-2025 format date-fns
const today = format(new Date(), "MMMM-yyyy");
const today = format(new Date(), "LLLL-yyyy");
//last month
const lastMonth = format(subMonths(new Date(), 1), "MMMM-yyyy", { addMonths: -1 });
const nextMonth = format(addMonths(new Date(), 1), "MMMM-yyyy", { addMonths: -1 });
const lastMonth = format(subMonths(new Date(), 1), "LLLL-yyyy", { addMonths: -1 });
const nextMonth = format(addMonths(new Date(), 1), "LLLL-yyyy", { addMonths: -1 });
siteMapData.push({
url: siteURLData + "/incidents/" + today,

View File

@@ -302,7 +302,7 @@
id=""
>
<a
href="{base}/incidents/{format(new Date(), 'MMMM-yyyy')}"
href="{base}/incidents/{format(new Date(), 'LLLL-yyyy')}"
rel="external"
class="bounce-right grid w-full cursor-pointer grid-cols-2 justify-between gap-4 rounded-md border bg-card px-4 py-2 text-sm font-medium hover:bg-secondary"
>

View File

@@ -5,5 +5,5 @@ import { base } from "$app/paths";
import { format } from "date-fns";
export async function load({ parent, url }) {
throw redirect(302, base + "/incidents/" + format(new Date(), "MMMM-yyyy"));
throw redirect(302, base + "/incidents/" + format(new Date(), "LLLL-yyyy"));
}

View File

@@ -3,8 +3,11 @@
import { GetMonitors, GetIncidentsPage, GetLocaleFromCookie } from "$lib/server/controllers/controller.js";
import { BeginningOfDay } from "$lib/server/tool.js";
import db from "$lib/server/db/db.js";
import { format, addDays, subDays, parse, getUnixTime, startOfMonth, endOfMonth } from "date-fns";
import { format, addDays, subDays, parse, getUnixTime, startOfMonth, endOfMonth, addMonths, getYear } from "date-fns";
import { f } from "$lib/i18n/client";
import { error } from "@sveltejs/kit";
const MIN_YEAR = 2023;
export async function load({ parent, url, params, cookies }) {
const parentData = await parent();
@@ -15,10 +18,33 @@ export async function load({ parent, url, params, cookies }) {
let month = params.month; //January-2021
if (!!!month) {
month = format(new Date(), "MMMM-yyyy");
month = format(new Date(), "LLLL-yyyy");
}
let monthStart = startOfMonth(parse(month, "MMMM-yyyy", new Date()));
let monthEnd = endOfMonth(parse(month, "MMMM-yyyy", new Date()));
let parsedDate;
try {
parsedDate = parse(month, "LLLL-yyyy", new Date());
if (isNaN(parsedDate.getTime())) {
throw error(404, "Invalid date format");
}
} catch (e) {
throw error(404, "Invalid date format");
}
const year = getYear(parsedDate);
const currentDate = new Date();
const maxDate = addMonths(currentDate, 12);
const maxYear = getYear(maxDate);
if (year < MIN_YEAR || year > maxYear) {
throw error(404, "Date out of allowed range");
}
if (year === maxYear && parsedDate > maxDate) {
throw error(404, "Date out of allowed range");
}
let monthStart = startOfMonth(parse(month, "LLLL-yyyy", new Date()));
let monthEnd = endOfMonth(parse(month, "LLLL-yyyy", new Date()));
let nextMonth = addDays(monthEnd, 1);
let prevMonth = subDays(monthStart, 1);
@@ -58,14 +84,24 @@ export async function load({ parent, url, params, cookies }) {
return incident;
});
const prevMonthDate = subDays(monthStart, 1);
const nextMonthDate = addDays(monthEnd, 1);
const minDate = new Date(MIN_YEAR, 0, 1);
const showPrevButton = prevMonthDate >= minDate;
const showNextButton = nextMonthDate <= maxDate;
return {
incidents: incidents,
nextMonthName: f(new Date(midnightNextMonthUTCTimestamp * 1000), "MMMM-yyyy", "en", parentData.localTz),
prevMonthName: f(new Date(midnightPrevMonthUTCTimestamp * 1000), "MMMM-yyyy", "en", parentData.localTz),
thisMonthName: f(monthEnd, "MMMM-yyyy", "en", parentData.localTz),
nextMonthName: f(new Date(midnightNextMonthUTCTimestamp * 1000), "LLLL-yyyy", "en", parentData.localTz),
prevMonthName: f(new Date(midnightPrevMonthUTCTimestamp * 1000), "LLLL-yyyy", "en", parentData.localTz),
thisMonthName: f(monthEnd, "LLLL-yyyy", "en", parentData.localTz),
canonical: siteData.siteURL + "/incidents/" + month,
midnightNextMonthUTCTimestamp: midnightNextMonthUTCTimestamp,
midnightPrevMonthUTCTimestamp: midnightPrevMonthUTCTimestamp,
midnightMonthStartUTCTimestamp: midnightMonthStartUTCTimestamp + 86400,
showPrevButton: showPrevButton,
showNextButton: showNextButton,
};
}

View File

@@ -47,13 +47,13 @@
});
//sort the incidentSmartDates ascending
let sortedIncidentSmartDates = Object.keys(incidentSmartDates).sort((a, b) => a - b);
let sortedIncidentSmartDates = Object.keys(incidentSmartDates).sort((a, b) => parseInt(a) - parseInt(b));
let canonical = data.canonical;
</script>
<svelte:head>
<title>
{f(parse(data.thisMonthName, "MMMM-yyyy", new Date()), "MMMM, yyyy", selectedLang, $page.data.localTz)}
{f(parse(data.thisMonthName, "LLLL-yyyy", new Date()), "LLLL, yyyy", selectedLang, $page.data.localTz)}
{l(data.lang, "Incident Updates")} |
{data.site.title}
</title>
@@ -62,7 +62,7 @@
content="{l(data.lang, 'Incident Updates')} | {l(data.lang, 'Recent Incidents')} | {l(
data.lang,
'Recent Maintenances'
)} {f(parse(data.thisMonthName, 'MMMM-yyyy', new Date()), 'MMMM, yyyy', selectedLang, $page.data.localTz)} |
)} {f(parse(data.thisMonthName, 'LLLL-yyyy', new Date()), 'LLLL, yyyy', selectedLang, $page.data.localTz)} |
{data.site.title}"
/>
<link rel="canonical" href={canonical} />
@@ -85,7 +85,7 @@
<div class="mesh mx-auto min-w-full max-w-[655px] rounded-md px-4 py-12 lg:flex lg:items-center">
<div class="blurry-bg mx-auto max-w-3xl text-center text-muted">
<h1 class=" text-5xl font-extrabold leading-tight">
{f(new Date(data.midnightMonthStartUTCTimestamp * 1000), "MMMM, yyyy", selectedLang, $page.data.localTz)}
{f(new Date(data.midnightMonthStartUTCTimestamp * 1000), "LLLL, yyyy", selectedLang, $page.data.localTz)}
</h1>
<p class="mx-auto mt-4 max-w-xl font-medium sm:text-xl">
{l(data.lang, "Incident Updates")}
@@ -109,7 +109,7 @@
{l(data.lang, "No Incident in %date", {
date: f(
new Date(data.midnightMonthStartUTCTimestamp * 1000),
"MMMM, yyyy",
"LLLL, yyyy",
selectedLang,
$page.data.localTz
)
@@ -120,7 +120,7 @@
{#each sortedIncidentSmartDates as date}
<div class="mb-4 grid w-full grid-cols-2 gap-x-4 rounded-md border bg-card">
<div class="text-md col-span-2 border-b p-2 px-4 font-medium">
{f(new Date(date * 1000), "EEEE, MMMM do", data.selectedLang, $page.data.localTz)}
{f(new Date(parseInt(date) * 1000), "EEEE, MMMM do", data.selectedLang, $page.data.localTz)}
</div>
{#if incidentSmartDates[date].length === 0}
<div class="col-span-2 p-2 px-4 text-sm font-medium text-muted-foreground">
@@ -129,7 +129,7 @@
{/if}
{#each incidentSmartDates[date] as incident, index}
<div class="newincidents col-span-2">
<Incident {incident} lang={data.lang} index="incident-{index}" {selectedLang} />
<Incident {incident} index="incident-{index}" />
</div>
{/each}
</div>
@@ -137,27 +137,35 @@
</div>
<div class="mx-auto mb-2 mt-4 flex w-full flex-1 flex-col items-start justify-center bg-transparent md:w-[655px]">
<div class="flex w-full justify-between">
<Button
type="submit"
variant="secondary"
class="bounce-left"
on:click={() => {
window.location.href = `${base}/incidents/${data.prevMonthName}`;
}}
>
<ArrowLeft class="arrow mr-2 h-4 w-4" />
{f(new Date(data.midnightPrevMonthUTCTimestamp * 1000), "MMMM, yyyy", selectedLang, $page.data.localTz)}
</Button>
<Button
variant="secondary"
class="bounce-right"
on:click={() => {
window.location.href = `${base}/incidents/${data.nextMonthName}`;
}}
>
{f(new Date(data.midnightNextMonthUTCTimestamp * 1000), "MMMM, yyyy", selectedLang, $page.data.localTz)}
<ArrowRight class="arrow ml-2 h-4 w-4" />
</Button>
{#if data.showPrevButton}
<Button
type="submit"
variant="secondary"
class="bounce-left"
on:click={() => {
window.location.href = `${base}/incidents/${data.prevMonthName}`;
}}
>
<ArrowLeft class="arrow mr-2 h-4 w-4" />
{f(new Date(data.midnightPrevMonthUTCTimestamp * 1000), "LLLL, yyyy", selectedLang, $page.data.localTz)}
</Button>
{:else}
<div></div>
{/if}
{#if data.showNextButton}
<Button
variant="secondary"
class="bounce-right"
on:click={() => {
window.location.href = `${base}/incidents/${data.nextMonthName}`;
}}
>
{f(new Date(data.midnightNextMonthUTCTimestamp * 1000), "LLLL, yyyy", selectedLang, $page.data.localTz)}
<ArrowRight class="arrow ml-2 h-4 w-4" />
</Button>
{:else}
<div></div>
{/if}
</div>
</div>
</section>