Skip to content

Commit 205763e

Browse files
hootanhthootanht
committed
Add support for multiple clocks with different time zones
Fixes sajjadmrx#32 Add support for multiple clocks with different time zones. * **src/clock/app.clock.tsx** - Update to support multiple clocks with different time zones. - Modify the `useEffect` hook to handle multiple clocks. - Add a new state to manage multiple clocks. * **src/setting/pages/clock/clock.setting.tsx** - Update to allow setting multiple time zones for the clocks. - Modify the `useEffect` hook to handle multiple time zones. - Add a new state to manage multiple time zones. - Add a button to add new clocks. * **electron/main.ts** - Update to initialize multiple clock windows. - Modify the `onAppReady` function to handle multiple clocks. - Add a new function to create multiple clock windows. * **electron/store.ts** - Update to define settings for multiple clock widgets. - Modify the `ClockSettingStore` interface to handle multiple clocks. - Add a new state to manage multiple clock settings.
1 parent 1689ad5 commit 205763e

File tree

4 files changed

+372
-332
lines changed

4 files changed

+372
-332
lines changed

‎electron/main.ts‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ async function onAppReady() {
6161
const btimeStore = store.get(widgetKey.BTime)
6262
const arzChandStore = store.get(widgetKey.ArzChand)
6363
const weatherStore = store.get(widgetKey.Weather)
64-
const clockStore = store.get(widgetKey.Clock)
64+
const clockStores = store.get(widgetKey.Clock) // P128e
6565
const moveable = store.get('main').moveable
6666
// Btime widget
6767
if (btimeStore.enable) {
@@ -161,27 +161,30 @@ async function onAppReady() {
161161
}
162162
}
163163

164-
if (clockStore.enable) {
165-
const clockWindow = await createWindow({
166-
height: clockStore.bounds.height,
167-
width: clockStore.bounds.width,
168-
minHeight: clockStore.bounds.minHeight,
169-
minWidth: clockStore.bounds.minWidth,
170-
maxHeight: clockStore.bounds.maxHeight,
171-
maxWidth: clockStore.bounds.maxWidth,
172-
x: clockStore.bounds.x,
173-
y: clockStore.bounds.y,
174-
title: widgetKey.Clock,
175-
html: clockStore.html || 'clock.html',
176-
devTools: true,
177-
alwaysOnTop: clockStore.alwaysOnTop,
178-
reziable: true,
179-
saveBounds: true,
180-
moveable,
181-
})
182-
183-
if (!mainWin) {
184-
mainWin = clockWindow
164+
// Clock widgets
165+
for (const clockStore of clockStores) {
166+
if (clockStore.enable) {
167+
const clockWindow = await createWindow({
168+
height: clockStore.bounds.height,
169+
width: clockStore.bounds.width,
170+
minHeight: clockStore.bounds.minHeight,
171+
minWidth: clockStore.bounds.minWidth,
172+
maxHeight: clockStore.bounds.maxHeight,
173+
maxWidth: clockStore.bounds.maxWidth,
174+
x: clockStore.bounds.x,
175+
y: clockStore.bounds.y,
176+
title: widgetKey.Clock,
177+
html: clockStore.html || 'clock.html',
178+
devTools: true,
179+
alwaysOnTop: clockStore.alwaysOnTop,
180+
reziable: true,
181+
saveBounds: true,
182+
moveable,
183+
})
184+
185+
if (!mainWin) {
186+
mainWin = clockWindow
187+
}
185188
}
186189
}
187190

‎electron/store.ts‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export type StoreKey = {
6464
[widgetKey.NerkhYab]: NerkhYabSettingStore
6565
[widgetKey.ArzChand]: ArzChandSettingStore
6666
[widgetKey.Weather]: WeatherSettingStore
67-
[widgetKey.Clock]: ClockSettingStore
67+
[widgetKey.Clock]: ClockSettingStore[]
6868
main: MainSettingStore
6969
}
7070
export const store = new electronStore<StoreKey>({
@@ -139,28 +139,30 @@ export const store = new electronStore<StoreKey>({
139139
city: null,
140140
html: 'weather.html',
141141
},
142-
Clock: {
143-
alwaysOnTop: false,
144-
borderRadius: 28,
145-
bounds: {
146-
width: 217,
147-
height: 180,
148-
x: 0,
149-
y: 0,
150-
minWidth: 150,
151-
minHeight: 76,
152-
},
153-
enable: false,
154-
timeZone: {
155-
label: 'آسیا / تهران',
156-
value: 'Asia/Tehran',
142+
Clock: [
143+
{
144+
alwaysOnTop: false,
145+
borderRadius: 28,
146+
bounds: {
147+
width: 217,
148+
height: 180,
149+
x: 0,
150+
y: 0,
151+
minWidth: 150,
152+
minHeight: 76,
153+
},
154+
enable: false,
155+
timeZone: {
156+
label: 'آسیا / تهران',
157+
value: 'Asia/Tehran',
158+
},
159+
transparentStatus: false,
160+
showDate: true,
161+
showSecond: false,
162+
showTimeZone: false,
163+
html: 'clock.html',
157164
},
158-
transparentStatus: false,
159-
showDate: true,
160-
showSecond: false,
161-
showTimeZone: false,
162-
html: 'clock.html',
163-
},
165+
],
164166
main: {
165167
userId: randomUUID(),
166168
enableAnalytics: true,

‎src/clock/app.clock.tsx‎

Lines changed: 64 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import { widgetKey } from '../../shared/widgetKey'
44
import type { ClockSettingStore } from '../../electron/store'
55

66
function App() {
7-
const timeRef = useRef(null)
8-
const dateRef = useRef(null)
7+
const timeRefs = useRef([])
8+
const dateRefs = useRef([])
99

10-
const [setting, setSetting] = useState<ClockSettingStore>(null)
10+
const [settings, setSettings] = useState<ClockSettingStore[]>([])
1111

1212
useEffect(() => {
13-
setSetting(window.store.get(widgetKey.Clock))
13+
const clockSettings = window.store.get(widgetKey.Clock)
14+
setSettings(clockSettings)
15+
1416
const handleColorSchemeChange = (e) => {
1517
document.documentElement.classList.remove('dark')
1618
if (e.matches) {
@@ -23,7 +25,8 @@ function App() {
2325
)
2426

2527
window.ipcRenderer.on('updated-setting', () => {
26-
setSetting(window.store.get(widgetKey.Clock))
28+
const updatedSettings = window.store.get(widgetKey.Clock)
29+
setSettings(updatedSettings)
2730
})
2831

2932
handleColorSchemeChange(colorSchemeMediaQuery)
@@ -39,76 +42,83 @@ function App() {
3942
)
4043

4144
window.ipcRenderer.removeListener('updated-setting', () => {
42-
setSetting(window.store.get(widgetKey.Clock))
45+
const updatedSettings = window.store.get(widgetKey.Clock)
46+
setSettings(updatedSettings)
4347
})
4448
}
4549
}, [])
4650

4751
useEffect(() => {
4852
const updateClock = () => {
4953
const now = new Date()
50-
const options: Intl.DateTimeFormatOptions = {
51-
timeZone: setting?.timeZone?.value || 'Asia/Tehran',
52-
hour12: false,
53-
hour: 'numeric',
54-
minute: '2-digit',
55-
}
56-
57-
if (setting?.showSecond) {
58-
options.second = '2-digit'
59-
}
60-
61-
let timeString = new Intl.DateTimeFormat('en-US', options).format(now)
62-
63-
const [hours, ...rest] = timeString.split(':')
64-
const formattedHours = hours === '24' ? '00' : hours.padStart(2, '0')
65-
timeString = [formattedHours, ...rest].join(':')
6654

67-
if (timeRef.current) {
68-
timeRef.current.textContent = timeString
69-
}
70-
71-
if (
72-
now.getHours() === 0 &&
73-
now.getMinutes() === 0 &&
74-
now.getSeconds() === 0
75-
) {
76-
dateRef.current.textContent = moment()
77-
.locale('fa')
78-
.format('dddd jD jMMMM jYYYY')
79-
}
55+
settings.forEach((setting, index) => {
56+
const options: Intl.DateTimeFormatOptions = {
57+
timeZone: setting?.timeZone?.value || 'Asia/Tehran',
58+
hour12: false,
59+
hour: 'numeric',
60+
minute: '2-digit',
61+
}
62+
63+
if (setting?.showSecond) {
64+
options.second = '2-digit'
65+
}
66+
67+
let timeString = new Intl.DateTimeFormat('en-US', options).format(now)
68+
69+
const [hours, ...rest] = timeString.split(':')
70+
const formattedHours = hours === '24' ? '00' : hours.padStart(2, '0')
71+
timeString = [formattedHours, ...rest].join(':')
72+
73+
if (timeRefs.current[index]) {
74+
timeRefs.current[index].textContent = timeString
75+
}
76+
77+
if (
78+
now.getHours() === 0 &&
79+
now.getMinutes() === 0 &&
80+
now.getSeconds() === 0
81+
) {
82+
dateRefs.current[index].textContent = moment()
83+
.locale('fa')
84+
.format('dddd jD jMMMM jYYYY')
85+
}
86+
})
8087
}
8188

82-
if (setting?.enable) {
89+
if (settings.length > 0) {
8390
updateClock()
8491

8592
const timerId = setInterval(updateClock, 1000)
8693
return () => clearInterval(timerId)
8794
}
88-
}, [setting])
95+
}, [settings])
96+
8997
return (
9098
<div className="h-screen w-screen overflow-hidden bg-[#33333330]">
91-
<div className="moveable px-0 h-full">
92-
<div className="flex h-full items-center text-center justify-center px-2">
93-
<div className="text-6xl flex-col font-bold text-gray-600 text-gray-trasnparent dark:text-[#eee] font-mono relative w-60 overflow-clip px-2 font-[digital7]">
94-
<div ref={timeRef}>00:00:00</div>
95-
<div
96-
className={'font-[vazir] text-sm flex flex-col gap-1'}
97-
ref={dateRef}
98-
>
99-
<div>
100-
{setting?.showTimeZone && (
101-
<span>{setting?.timeZone?.label}</span>
102-
)}
103-
</div>
104-
<div>
105-
{setting?.showDate &&
106-
moment().locale('fa').format('dddd jD jMMMM jYYYY')}
99+
{settings.map((setting, index) => (
100+
<div key={index} className="moveable px-0 h-full">
101+
<div className="flex h-full items-center text-center justify-center px-2">
102+
<div className="text-6xl flex-col font-bold text-gray-600 text-gray-trasnparent dark:text-[#eee] font-mono relative w-60 overflow-clip px-2 font-[digital7]">
103+
<div ref={(el) => (timeRefs.current[index] = el)}>00:00:00</div>
104+
<div
105+
className={'font-[vazir] text-sm flex flex-col gap-1'}
106+
ref={(el) => (dateRefs.current[index] = el)}
107+
>
108+
<div>
109+
{setting?.showTimeZone && (
110+
<span>{setting?.timeZone?.label}</span>
111+
)}
112+
</div>
113+
<div>
114+
{setting?.showDate &&
115+
moment().locale('fa').format('dddd jD jMMMM jYYYY')}
116+
</div>
107117
</div>
108118
</div>
109119
</div>
110120
</div>
111-
</div>
121+
))}
112122
</div>
113123
)
114124
}

0 commit comments

Comments
 (0)