24 hour time setting across extension

rohanb10 · May 30, 2021 · 7895b39 · 7895b39
1 parent 96ee1df
commit 7895b39
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 26 deletions.
diff --git a/html/popup.html b/html/popup.html
@@ -6,7 +6,7 @@
 	<title>snoozz</title>
 	<link rel="stylesheet" href="../styles/common.css" />
 	<link rel="stylesheet" href="../styles/popup.css" />
-	<link rel="stylesheet" href="../styles/flatpickr.css" />
+	<link rel="stylesheet" href="../styles/flatpickr.min.css" />
 </head>
 <body>
 	<h3 class="center">What?</h3>
@@ -58,7 +58,7 @@ <h3 class="center">Quick Actions</h3>
 		</div>
 	</div>
 	<script type="text/javascript" src="../scripts/dayjs.min.js"></script>
-	<script type="text/javascript" src="../scripts/flatpickr.js"></script>
+	<script type="text/javascript" src="../scripts/flatpickr.min.js"></script>
 	<script type="text/javascript" src="../scripts/gradientStep.js"></script>
 	<script type="text/javascript" src="../scripts/common.js"></script>
 	<script type="text/javascript" src="../scripts/popup.js"></script>

diff --git a/html/settings.html b/html/settings.html
@@ -57,6 +57,15 @@ <h4>Evening time</h4>
 				<option value="23">11 PM</option>
 			</select></div>
 		</div>
+		<div class="input-container flex">
+			<div>
+				<h4>Time Format</h4>
+			</div>
+			<div class="select-wrapper"><select id="hourFormat">
+				<option value="12">12 Hour</option>
+				<option value="24">24 Hour</option>
+			</select></div>
+		</div>
 		<div class="input-container flex">
 			<div>
 				<h4>Default time of day</h4>

diff --git a/scripts/background.js b/scripts/background.js
@@ -161,6 +161,7 @@ async function setUpExtension() {
 	await saveOptions(Object.assign({
 		morning: 9,
 		evening: 18,
+		hourFormat: 12,
 		icons: 'human',
 		timeOfDay: 'morning',
 		history: 14,

diff --git a/scripts/common.js b/scripts/common.js
@@ -58,14 +58,6 @@ async function getStorageSize() {
 	return calcObjectSize(tabs) + calcObjectSize(options);
 }
 
-async function getPrettyTab(tabId) {
-	var tab = await getSnoozedTabs([tabId])
-	Object.keys(tab).forEach(k => {
-		if (typeof tab[k] === 'string' && tab[k].length > 75) tab[k] = tab[k].substring(0,72) + '...';
-		if (!isNaN(tab[k])) tab[k] = dayjs(tab[k]).format('HH:mm:ss DD/MM/YY');
-	})
-	return tab;
-}
 /*	SAVE 	*/
 async function saveOptions(o) {
 	if (!o) return;
@@ -106,6 +98,12 @@ async function setTheme() {
 }
 setTheme();
 
+var HOUR_FORMAT = 12;
+async function fetchHourFormat() {
+	var t = await getOptions('hourFormat');
+	HOUR_FORMAT = t && [24, 12].includes(t) ? t : 12;
+}
+
 async function updateBadge(cachedTabs, cachedBadge) {
 	var num = 0;
 	var badge = cachedBadge || await getOptions('badge');
@@ -401,12 +399,14 @@ var formatSnoozedUntil = t => {
 	if (t.startUp) return `Next ${capitalize(getBrowser())} Launch`;
 	var ts = t.wakeUpTime;
 	var date = dayjs(ts);
-	if (date.dayOfYear() === dayjs().dayOfYear()) return (date.hour() > 17 ? 'Tonight' : 'Today') + date.format(' [@] h:mm a');
-	if (date.dayOfYear() === dayjs().add(1,'d').dayOfYear()) return 'Tomorrow' + date.format(' [@] h:mm a');
-	if (date.week() === dayjs().week()) return date.format('ddd [@] h:mm a');
-	return date.format('ddd, MMM D [@] h:mm a');
+	if (date.dayOfYear() === dayjs().dayOfYear()) return (date.hour() > 17 ? 'Tonight' : 'Today') + date.format(` [@] ${getHourFormat()}`);
+	if (date.dayOfYear() === dayjs().add(1,'d').dayOfYear()) return 'Tomorrow' + date.format(` [@] ${getHourFormat()}`);
+	if (date.week() === dayjs().week()) return date.format(`ddd [@] ${getHourFormat()}`);
+	return date.format(`ddd, MMM D [@] ${getHourFormat()}`);
 }
 
+var getHourFormat = showZeros => (HOUR_FORMAT && HOUR_FORMAT == 24) ? 'HH:mm' : `h${showZeros ? ':mm' : ''} A`;
+
 var getUrlParam = p => {
 	var url = new URLSearchParams(window.location.search);
 	return url.get(p); 

diff --git a/scripts/flatpickr.js → scripts/flatpickr.min.js b/scripts/flatpickr.js → scripts/flatpickr.min.js
diff --git a/scripts/nap_room.js b/scripts/nap_room.js
@@ -22,6 +22,7 @@ async function init() {
 		}
 	});
 	document.addEventListener('visibilitychange', _ => {setupClock();updateTabs()});
+	await fetchHourFormat();
 	var search = document.getElementById('search');
 	search.addEventListener('input', _ => {
 		search.parentElement.classList.toggle('searching', search.value.length > 0);
@@ -239,7 +240,7 @@ function buildTabActions(t, tabDiv) {
 	}
 	tabDiv.querySelector('.wakeup-label').innerText = t.deleted ? 'Deleted on' : (t.opened ? `Woke up ${t.opened < t.wakeUpTime ? 'manually' : 'automatically'} on` : 'Waking up')
 	tabDiv.querySelector('.wakeup-time').innerText = t.opened ? dayjs(t.opened).format('dddd, D MMM') : formatSnoozedUntil(t)
-	tabDiv.querySelector('.wakeup-time').title = dayjs(t.opened ? t.opened : t.wakeUpTime).format('h:mm a [on] ddd, D MMMM YYYY');
+	tabDiv.querySelector('.wakeup-time').title = dayjs(t.opened ? t.opened : t.wakeUpTime).format(`${getHourFormat()} [on] ddd, D MMMM YYYY`);
 	return tabDiv;
 }
 
@@ -256,8 +257,8 @@ function buildTab(t) {
 
 	var title = wrapInDiv({className: 'tab-name', innerText: t.title, title: t.url ?? ''});
 
-	var startedNap = wrapInDiv({className:'nap-time', innerText: `Started napping at ${dayjs(t.timeCreated).format('h:mm a [on] ddd D MMM YYYY')}`})
-	if (t.modifiedTime) startedNap.innerText = `Last modified at ${dayjs(t.timeCreated).format('h:mm a [on] ddd D MMM YYYY')}`;
+	var startedNap = wrapInDiv({className:'nap-time', innerText: `Started napping at ${dayjs(t.timeCreated).format(`${getHourFormat()} [on] ddd D MMM YYYY`)}`})
+	if (t.modifiedTime) startedNap.innerText = `Last modified at ${dayjs(t.timeCreated).format(`${getHourFormat()} [on] ddd D MMM YYYY`)}`;
 	var titleContainer = wrapInDiv('title-container', title, startedNap);
 
 	var wakeUpTimeContainer = wrapInDiv('wakeup-time-container', wrapInDiv('wakeup-label'), wrapInDiv('wakeup-time'));

diff --git a/scripts/popup.js b/scripts/popup.js
@@ -2,6 +2,7 @@ var closeDelay = 1000, colorList = [], isInEditMode = false;
 async function init() {
 	isInEditMode = getUrlParam('edit') && getUrlParam('edit') == 'true';
 
+	await fetchHourFormat();
 	await buildChoices();
 	await buildCustomChoice();
 	if (isInEditMode) {
@@ -147,7 +148,8 @@ async function buildChoices() {
 		var icon = Object.assign(document.createElement('img'), {src: `../icons/${iconTheme}/${name}.png`});
 		var label = wrapInDiv({classList: 'label', innerText: o.label});
 		var date = wrapInDiv({classList: 'date', innerText: o.timeString});
-		var time = wrapInDiv({classList: 'time', innerText: dayjs(o.time).format(`h${dayjs(o.time).minute() !== 0 ? ':mm ':''}A`)});
+		// var time = wrapInDiv({classList: 'time', innerText: dayjs(o.time).format(`h${dayjs(o.time).minute() !== 0 ? ':mm ':''}A`)});
+		var time = wrapInDiv({classList: 'time', innerText: dayjs(o.time).format(`${getHourFormat(dayjs(o.time).minute() !== 0)}`)});
 
 		var c = wrapInDiv({
 			classList: `choice ${o.disabled ? 'disabled always-disabled' : ''}`,
@@ -170,6 +172,7 @@ async function buildCustomChoice() {
 		inline: true,
 		enableTime: true,
 		noCalendar: true,
+		time_24hr: HOUR_FORMAT && HOUR_FORMAT == 24,
 		defaultDate: dayjs().format('HH:mm'),
 		onChange: validate,
 		onValueUpdate: validate
@@ -186,14 +189,13 @@ async function buildCustomChoice() {
 	var validate = async _ => {
 		await new Promise(r => setTimeout(r, 50));
 		var now = dayjs();
-		console.log('validating', now, getDateTime());
 		document.querySelectorAll('.action').forEach(action => {
 			action.classList.toggle('disabled', (getDateTime().add(parseInt(action.getAttribute('data-value')), 'm') < now));
 		});
 		if (getDateTime() < now) reset()
 		time.set('minTime', getDateTime().dayOfYear() == now.dayOfYear() ? now.format('HH:mm') : null);
 		document.querySelector('.date-display').innerText = dayjs(date.selectedDates).format('ddd, D MMM');
-		document.querySelector('.time-display').innerText = dayjs(time.selectedDates).format('h:mm A');
+		document.querySelector('.time-display').innerText = dayjs(time.selectedDates).format(getHourFormat());
 		document.querySelector('.submit-btn').classList.toggle('disabled', getDateTime() <= now);
 		return getDateTime() > now;
 	}
@@ -243,7 +245,7 @@ async function buildCustomChoice() {
 		}
 		validate();
 	}));
-	document.querySelector('.f-am-pm').addEventListener('click', validate);
+	if (document.querySelector('.f-am-pm')) document.querySelector('.f-am-pm').addEventListener('click', validate);
 
 	document.querySelector('.reset-action').addEventListener('click', _ => {reset();validate()});
 	document.querySelector('.form-overlay .f-days').addEventListener('click', e => {if (e.target.classList.contains('f-day')) validate()});
@@ -264,6 +266,7 @@ async function modify(time, choice) {
 	displayPreviewAnimation(choice, 'Going back to sleep');
 	if (parent && parent.closeEditModal) setTimeout(_ => parent.closeEditModal(), closeDelay);
 }
+
 async function snooze(time, choice) {
 	if (isInEditMode) return modify(time, choice);
 	var target = document.querySelector('.target.active');
@@ -283,6 +286,7 @@ async function snooze(time, choice) {
 	await chrome.runtime.sendMessage(Object.assign(response, {close: true, delay: closeDelay}));
 	displayPreviewAnimation(choice, `Snoozing ${target.id}`)
 }
+
 function displayPreviewAnimation(choice, text = 'Snoozing') {
 	document.body.style.pointerEvents = 'none';
 	choice.classList.add('focused');

diff --git a/scripts/rise.js b/scripts/rise.js
@@ -1,4 +1,5 @@
 async function init() {
+	await fetchHourFormat();
 	document.querySelector('.nap-room').onkeyup = e => {if (e.which === 13) openExtensionTab('/html/nap-room.html')}
 	document.querySelector('.nap-room').addEventListener('click', _ => openExtensionTab('/html/nap-room.html'), {once:true});
 	showIconOnScroll();
@@ -26,10 +27,10 @@ async function fetchTabFromStorage() {
 }
 function populate(found) {
 	if (!found && found !== false) return setTimeout(_ => window.close(), 1000);
-	document.querySelector('#when span').innerText = dayjs(found.timeCreated).format('h:mma on dddd, DD MMM YYYY')
+	document.querySelector('#when span').innerText = dayjs(found.timeCreated).format(`${getHourFormat()} on dddd, DD MMM YYYY`)
 	var till = document.querySelector('#till span');
 	till.innerText = found.startUp ? 'the next time you opened ' + capitalize(getBrowser()) : dayjs(found.timeCreated).to(dayjs(found.wakeUpTime),true) + ' later'
-	till.setAttribute('title', dayjs(found.wakeUpTime).format('h:mma on dddd, DD MMM YYYY'))
+	till.setAttribute('title', dayjs(found.wakeUpTime).format(`${getHourFormat()} on dddd, DD MMM YYYY`))
 	var tabList = document.querySelector('.tab-list');
 	found.tabs.forEach((t, i) => {
 		var iconImg = Object.assign(document.createElement('img'), {src: t.favicon && t.favicon !== '' ? t.favicon : getFaviconUrl(t.url)});

diff --git a/scripts/settings.js b/scripts/settings.js
@@ -9,6 +9,7 @@ async function initialize() {
 		window.history.replaceState(null, null, window.location.pathname);
 	}
 	var options = await getOptions();
+	HOUR_FORMAT = options.hourFormat ? options.hourFormat : 12;
 	try {updateFormValues(options)} catch(e) {}
 	if (options.icons) document.querySelector('.nap-room img').src = `../icons/${options.icons}/nap-room.png`;
 	addListeners();
@@ -97,11 +98,11 @@ async function save(e) {
 		var tabs = await getSnoozedTabs();
 		var ot = parseInt(e.target.getAttribute('data-orig-value'));
 		var f = t => !t.opened && dayjs(t.wakeUpTime).hour() === ot && dayjs(t.wakeUpTime).minute() === 0 && dayjs(t.wakeUpTime).second() === 0
-		var tabsToChange = tabs.filter(f)
+		var tabsToChange = tabs.filter(f);
 		if (tabsToChange.length > 0) {
 			var count = `${tabsToChange.length > 1 ? 'are' : 'is'} ${tabsToChange.length} tab${tabsToChange.length > 1 ? 's' : ''}`
-			if (confirm(`There ${count} scheduled to wake up at ${dayjs().hour(ot).format('hA')}.
-Would you like to update ${tabsToChange.length > 1 ? 'them' : 'it'} to snooze till ${dayjs().hour(e.target.value).format('hA')}?`)) {
+			if (confirm(`There ${count} scheduled to wake up at ${dayjs().minute(0).hour(ot).format(getHourFormat())}.
+Would you like to update ${tabsToChange.length > 1 ? 'them' : 'it'} to snooze till ${dayjs().minute(0).hour(e.target.value).format(getHourFormat())}?`)) {
 				tabs.filter(f).forEach(t => {
 					t.modifiedTime = dayjs().valueOf();
 					t.wakeUpTime = dayjs(t.wakeUpTime).hour(e.target.value).valueOf()
@@ -115,6 +116,7 @@ Would you like to update ${tabsToChange.length > 1 ? 'them' : 'it'} to snooze ti
 	options.contextMenu = Array.from(document.querySelectorAll('#contextMenu input:checked')).map(c => c.id);
 	await saveOptions(options);
 	await setTheme();
+	await fetchHourFormat();
 	await changeIcons(options.icons);
 	if (e && e.target.tagName.toLowerCase() === 'select') e.target.setAttribute('data-orig-value', e.target.value);
 }
@@ -178,6 +180,7 @@ async function resetSettings() {
 		morning: 9,
 		evening: 18,
 		timeOfDay: 'morning',
+		hourFormat: 12,
 		icons: 'human',
 		theme: 'light',
 		history: 14,

diff --git a/styles/flatpickr.css → styles/flatpickr.min.css b/styles/flatpickr.css → styles/flatpickr.min.css