JS-6133: First day of the week setting

dist/embed/iframe.html

@@ -257,7 +257,7 @@
 					$.ajax({
 						url: html,
 						dataType: 'text',
-						timeout: 1000,
+						timeout: 3000,
 						success: (data) => {
 							root.html(data);
 

src/json/text.json

@@ -772,6 +772,7 @@
 	"popupSettingsPersonalSidebar": "Automatically show and hide sidebar",
 	"popupSettingsPersonalSidebarMode": "Sidebar mode",
 	"popupSettingsPersonalRelativeDates": "Use relative dates",
+	"popupSettingsPersonalFirstDay": "Week starts on",
 	"popupSettingsPersonalDateFormat": "Date format",
 	"popupSettingsPersonalSectionLanguage": "Language & Spelling",
 	"popupSettingsPersonalSectionEditor": "Editor Personalisation",

src/ts/component/page/main/settings/language.tsx

@@ -5,10 +5,14 @@ import { observer } from 'mobx-react';
 
 const PageMainSettingsLanguage = observer(forwardRef<{}, I.PageSettingsComponent>((props, ref) => {
 
-	const { config, interfaceLang, showRelativeDates, dateFormat, timeFormat, } = S.Common;
+	const { config, interfaceLang, showRelativeDates, dateFormat, timeFormat, firstDay } = S.Common;
 	const { languages } = config;
 	const interfaceLanguages = U.Menu.getInterfaceLanguages();
 	const spellingRef = useRef(null);
+	const firstDayOptions = [
+		{ id: 1, name: translate('day1') },
+		{ id: 7, name: translate('day7') },
+	];
 
 	const getSpellingLanguages = () => {
 		const { languages } = config;
@@ -116,6 +120,21 @@ const PageMainSettingsLanguage = observer(forwardRef<{}, I.PageSettingsComponent
 					/>
 				</div>
 
+				<div className="item">
+					<Label text={translate('popupSettingsPersonalFirstDay')} />
+					<Select
+						id="firstDay"
+						value={String(firstDay)}
+						options={firstDayOptions}
+						onChange={v => {
+							console.log(v);
+							S.Common.firstDaySet(v);
+						}}
+						arrowClassName="black"
+						menuParam={{ horizontal: I.MenuDirection.Right }}
+					/>
+				</div>
+
 			</div>
 		</>
 	);

src/ts/lib/util/date.ts

@@ -1,4 +1,4 @@
-import { I, U, J, translate } from 'Lib';
+import { I, U, J, S, translate } from 'Lib';
 
 class UtilDate {
 
@@ -329,6 +329,7 @@ class UtilDate {
 	};
 
 	getCalendarMonth (value: number) {
+		const { firstDay } = S.Common;
 		const { m, y } = this.getCalendarDateParam(value);
 		const md = {...J.Constant.monthDays};
 		
@@ -337,8 +338,8 @@ class UtilDate {
 			md[2] = 29;
 		};
 		
-		const wdf = Number(this.date('N', this.timestamp(y, m, 1)));
-		const wdl = Number(this.date('N', this.timestamp(y, m, md[m])));
+		let wdf = Number(this.date('N', this.timestamp(y, m, 1)));
+		let wdl = Number(this.date('N', this.timestamp(y, m, md[m])));
 		let pm = m - 1;
 		let nm = m + 1;
 		let py = y;
@@ -354,6 +355,13 @@ class UtilDate {
 			ny = y + 1;
 		};
 
+		console.log('1. first', wdf, 'last', wdl);
+
+		wdf = (wdf - firstDay + 7) % 7; 
+		wdl = (wdl - firstDay + 7) % 7;
+
+		console.log('2. first', wdf, 'last', wdl);
+
 		const days = [];
 		for (let i = 1; i <= wdf; ++i) {
 			days.push({ d: md[pm] - (wdf - i), m: pm, y: py });
@@ -361,8 +369,7 @@ class UtilDate {
 		for (let i = 1; i <= md[m]; ++i) {
 			days.push({ y: y, m: m, d: i });
 		};
-
-		for (let i = 1; i < 7 - wdl; ++i) {
+		for (let i = 1; i <= (6 - wdl); ++i) {
 			days.push({ d: i, m: nm, y: ny });
 		};
 
@@ -390,10 +397,17 @@ class UtilDate {
 	};
 
 	getWeekDays (): { id: number, name: string }[] {
+		const { firstDay } = S.Common;
 		const ret = [];
-		for (let i = 1; i <= 7; ++i) {
+
+		for (let i = firstDay; i <= 7; ++i) {
 			ret.push({ id: i, name: translate(`day${i}`) });
 		};
+
+		for (let i = 1; i < firstDay; ++i) {
+			ret.push({ id: i, name: translate(`day${i}`) });
+		};
+
 		return ret;
 	};
 

src/ts/store/common.ts

@@ -45,6 +45,7 @@ class CommonStore {
 	public hideSidebarValue = null;
 	public showObjectValue = null;
 	public pinValue = null;
+	public firstDayValue = null;
 	public gallery = {
 		categories: [],
 		list: [],
@@ -108,6 +109,7 @@ class CommonStore {
 			dateFormatValue: observable,
 			timeFormatValue: observable,
 			pinValue: observable,
+			firstDayValue: observable,
 			config: computed,
 			preview: computed,
 			toast: computed,
@@ -123,6 +125,7 @@ class CommonStore {
 			dateFormat: computed,
 			timeFormat: computed,
 			pin: computed,
+			firstDay: computed,
 			gatewaySet: action,
 			filterSetFrom: action,
 			filterSetText: action,
@@ -143,6 +146,7 @@ class CommonStore {
 			showObjectSet: action,
 			showRelativeDatesSet: action,
 			pinSet: action,
+			firstDaySet: action,
 		});
 
 		intercept(this.configObj as any, change => U.Common.intercept(this.configObj, change));
@@ -319,6 +323,14 @@ class CommonStore {
 		return ret;
 	};
 
+	get firstDay (): number {
+		if (this.firstDayValue === null) {
+			this.firstDayValue = Storage.get('firstDay');
+		};
+
+		return Number(this.firstDayValue) || 1;
+	};
+
 	gatewaySet (v: string) {
 		this.gatewayUrl = v;
 	};
@@ -541,6 +553,11 @@ class CommonStore {
 		console.log('[Online status]:', v);
 	};
 
+	firstDaySet (v: number) {
+		this.firstDayValue = Number(v) || 1;
+		Storage.set('firstDay', this.firstDayValue);
+	};
+
 	configSet (config: any, force: boolean) {
 		const html = $('html');