mirror of
https://github.com/rajnandan1/kener.git
synced 2025-12-30 14:09:50 -06:00
Merge pull request #503 from henb/main
Feat: improve date handling and add navigation controls
This commit is contained in:
4
package-lock.json
generated
4
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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"));
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user