add setting for first day of week

dist/index.js

@@ -453,6 +453,7 @@
     close: "Close",
     discard: "Discard",
     rename: "Rename",
+    firstDayOfWeek: "First day of week",
     weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     previousMonth: "previous month",
     nextMonth: "next month",
@@ -563,6 +564,7 @@
       close: "Cerrar",
       discard: "Descartar",
       rename: "Renombrar",
+      firstDayOfWeek: "Primer d\xEDa de la semana",
       weekdays: ["Dom", "Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b"],
       previousMonth: "\xDAltimo mes",
       nextMonth: "Pr\xF3ximo mes",
@@ -671,6 +673,7 @@
       close: "Schlie\xDFen",
       discard: "Verwerfen",
       rename: "Umbenennen",
+      firstDayOfWeek: "Erster Wochentag",
       weekdays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
       previousMonth: "Vorheriger Monat",
       nextMonth: "N\xE4chster Monat",
@@ -1332,6 +1335,7 @@
   var senderName = restoreState("sender-name", "");
   var pageZoom = restoreState("page-zoom", 100);
   var objectFilterInput = restoreState("object-filter", "");
+  var firstDayOfWeek = restoreState("first-day-of-week", 0);
   var dayInCalendar = restoreState("calendar-day", (/* @__PURE__ */ new Date()).toISOString().split("T")[0]);
   pageZoom.subscribe(() => {
     document.body.style.zoom = `${pageZoom.value}%`;
@@ -1793,18 +1797,23 @@
       selectedMonth.value += 1;
     }
     let monthGridCells = new State([]);
-    dayInCalendar.subscribe((newValue) => {
+    bulkSubscribe([dayInCalendar, firstDayOfWeek], updateMonthGrid);
-      const newSelectedDate = new Date(newValue);
+    updateMonthGrid();
+    function updateMonthGrid() {
+      const newSelectedDate = new Date(dayInCalendar.value);
       const currentDate = /* @__PURE__ */ new Date();
       monthGridCells.value = [];
       currentDate.setUTCDate(1);
       currentDate.setUTCMonth(newSelectedDate.getMonth());
+      let currentLabelIndex = firstDayOfWeek.value;
       for (let i = 0; i < 7; i++) {
         monthGridCells.value.push(
-          /* @__PURE__ */ createElement("b", { class: "secondary ellipsis width-100" }, translation.weekdays[i])
+          /* @__PURE__ */ createElement("b", { class: "secondary ellipsis width-100" }, translation.weekdays[currentLabelIndex])
         );
+        currentLabelIndex++;
+        if (currentLabelIndex >= 7) currentLabelIndex = 0;
       }
-      const monthOffset = currentDate.getDay();
+      const monthOffset = currentDate.getDay() - firstDayOfWeek.value;
       for (let i = 0; i < monthOffset; i++) {
         monthGridCells.value.push(/* @__PURE__ */ createElement("div", null));
       }
@@ -1815,7 +1824,7 @@
         currentDate.setDate(currentDate.getDate() + 1);
       }
       monthGridCells.callSubscriptions();
-    });
+    }
     return /* @__PURE__ */ createElement("div", { class: "calendar-wrapper" }, /* @__PURE__ */ createElement("div", { class: "month-grid padding scroll-v" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-center gap" }, /* @__PURE__ */ createElement(
       "button",
       {
@@ -2758,7 +2767,13 @@
 
   // src/Views/settingsModal.tsx
   function SettingsModal() {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translation.settings), /* @__PURE__ */ createElement("div", { class: "flex-row width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out"), translation.zoomOut), /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in"), translation.zoomIn)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": repairApp }, /* @__PURE__ */ createElement("span", { class: "icon" }, "handyman"), translation.repairApp)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input gap" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearAddresses }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), translation.clearAddresses), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearCategories }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName), translation.clearCategories), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearStatuses }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.status), translation.clearStatuses), /* @__PURE__ */ createElement(
+    const stringToWeekdayOption = (value) => {
+      const isSelected = value == firstDayOfWeek.value;
+      return /* @__PURE__ */ createElement("option", { "toggle:selected": isSelected, value }, translation.weekdays[value]);
+    };
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translation.settings), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.firstDayOfWeek), /* @__PURE__ */ createElement("select", { "bind:value": firstDayOfWeek }, ...translation.weekdays.map(
+      (weekday, i) => stringToWeekdayOption(i)
+    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out"), translation.zoomOut), /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in"), translation.zoomIn)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": repairApp }, /* @__PURE__ */ createElement("span", { class: "icon" }, "handyman"), translation.repairApp)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input gap" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearAddresses }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), translation.clearAddresses), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearCategories }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName), translation.clearCategories), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearStatuses }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.status), translation.clearStatuses), /* @__PURE__ */ createElement(
       "button",
       {
         class: "tile width-100 flex-1",

src/Model/model.ts

@@ -152,6 +152,7 @@ export const isEncryptionAvailable = window.crypto.subtle != undefined;
 export const senderName = React.restoreState("sender-name", "");
 export const pageZoom = React.restoreState("page-zoom", 100);
 export const objectFilterInput = React.restoreState("object-filter", "");
+export const firstDayOfWeek = React.restoreState("first-day-of-week", 0);
 export const dayInCalendar = React.restoreState("calendar-day", new Date().toISOString().split("T")[0])
 
 pageZoom.subscribe(() => {

src/Views/Objects/calendarView.tsx

@@ -1,10 +1,14 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
+import {
+  Chat,
+  MessageObject,
+  MessageObjectWithIndex,
+} from "../../Model/chatModel";
+import { dayInCalendar, firstDayOfWeek } from "../../Model/model";
 
 import { DayView } from "./dayView";
 import { MonthGridCell } from "./monthGridCell";
-import { dayInCalendar } from "../../Model/model";
 import { translation } from "../../translations";
 
 export function CalendarView(
@@ -22,7 +26,7 @@ export function CalendarView(
   );
   dayInCalendar.subscribeSilent(() => {
     selectedDate = new Date(dayInCalendar.value);
-  })
+  });
   updateSelectedDate();
 
   function updateSelectedDate() {
@@ -50,8 +54,11 @@ export function CalendarView(
   }
 
   let monthGridCells = new React.State<HTMLElement[]>([]);
-  dayInCalendar.subscribe((newValue) => {
+  React.bulkSubscribe([dayInCalendar, firstDayOfWeek], updateMonthGrid);
-    const newSelectedDate = new Date(newValue);
+  updateMonthGrid();
+
+  function updateMonthGrid() {
+    const newSelectedDate = new Date(dayInCalendar.value);
 
     const currentDate = new Date();
     monthGridCells.value = [];
@@ -61,14 +68,19 @@ export function CalendarView(
     currentDate.setUTCMonth(newSelectedDate.getMonth());
 
     // labels
+    let currentLabelIndex = firstDayOfWeek.value;
     for (let i = 0; i < 7; i++) {
       monthGridCells.value.push(
-        <b class="secondary ellipsis width-100">{translation.weekdays[i]}</b>
+        <b class="secondary ellipsis width-100">
+          {translation.weekdays[currentLabelIndex]}
+        </b>
       );
+      currentLabelIndex++;
+      if (currentLabelIndex >= 7) currentLabelIndex = 0;
     }
 
     // create blank dates starting sunday
-    const monthOffset = currentDate.getDay();
+    const monthOffset = currentDate.getDay() - firstDayOfWeek.value;
     for (let i = 0; i < monthOffset; i++) {
       monthGridCells.value.push(<div></div>);
     }
@@ -82,7 +94,7 @@ export function CalendarView(
     }
 
     monthGridCells.callSubscriptions();
-  });
+  }
 
   return (
     <div class="calendar-wrapper">

src/Views/settingsModal.tsx

@@ -5,6 +5,7 @@ import {
   clearCategories,
   clearObjectSearches,
   clearStatuses,
+  firstDayOfWeek,
   isPresentingSettingsModal,
   repairApp,
   toggleSettings,
@@ -16,12 +17,32 @@ import { icons } from "../icons";
 import { translation } from "../translations";
 
 export function SettingsModal() {
+  const stringToWeekdayOption: React.StateItemConverter<number> = (value) => {
+    const isSelected = value == firstDayOfWeek.value;
+    return <option toggle:selected={isSelected} value={value}>{translation.weekdays[value]}</option>;
+  };
+
   return (
     <div class="modal" toggle:open={isPresentingSettingsModal}>
       <div>
         <main>
           <h2>{translation.settings}</h2>
 
+          <label class="tile">
+            <span class="icon">calendar_month</span>
+            <div>
+              <span>{translation.firstDayOfWeek}</span>
+              <select bind:value={firstDayOfWeek}>
+                {...translation.weekdays.map((weekday, i) =>
+                  stringToWeekdayOption(i)
+                )}
+              </select>
+              <span class="icon">arrow_drop_down</span>
+            </div>
+          </label>
+
+          <hr></hr>
+
           <div class="flex-row width-input gap">
             <button class="width-100 flex justify-start" on:click={zoomOut}>
               <span class="icon">zoom_out</span>

src/translations.ts

@@ -10,6 +10,7 @@ const englishTranslations = {
   discard: "Discard",
   rename: "Rename",
 
+  firstDayOfWeek: "First day of week",
   weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
   previousMonth: "previous month",
   nextMonth: "next month",
@@ -155,6 +156,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Descartar",
     rename: "Renombrar",
 
+    firstDayOfWeek: "Primer día de la semana",
     weekdays: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
     previousMonth: "Último mes",
     nextMonth: "Próximo mes",
@@ -297,6 +299,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Verwerfen",
     rename: "Umbenennen",
 
+    firstDayOfWeek: "Erster Wochentag",
     weekdays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
     previousMonth: "Vorheriger Monat",
     nextMonth: "Nächster Monat",