-
-
-
{{ timezone }}
-
{{ getClockDateLabel(time, timezone) }}
+
+
+
+
+
{{ timezone }}
+
{{ getClockDateLabel(time, timezone) }}
+
+
Remove
+
+
+
+
+
Add a clock
+
+ Select a timezone
+ {{ timezone }}
+
-
-
- Add Clock
@@ -44,8 +52,6 @@ import DigitalClock from './components/clock/digital-clock.vue';
import {
computed,
- ref,
- watchEffect,
} from 'vue';
import {
@@ -55,18 +61,27 @@ import {
import {
state,
clocks,
- setClockType
+ timezones,
+ setClockType,
+ addClock,
+ removeClock,
+ undo,
+ redo,
+ loadTimezones
} from './stores/time';
-const thing = ref('');
-
-watchEffect(() => console.log(state.clockType));
+loadTimezones();
const clockType = computed({
get: () => state.clockType,
set: type => setClockType(type)
});
+const addClockModel = computed({
+ get: () => '',
+ set: value => value && addClock(value)
+});
+
const clockComponent = computed(() => state.clockType === 'analogue'
? AnalogueClock
: DigitalClock
@@ -85,6 +100,10 @@ function getClockDateLabel(time: Date, timezone: string) {
padding: 2rem;
}
+ .app__options {
+ margin: 2rem 0;
+ }
+
.clocks {
display: grid;
gap: 2rem;
@@ -114,4 +133,20 @@ function getClockDateLabel(time: Date, timezone: string) {
font-size: 0.875rem;
}
+ .clocks-enter-from,
+ .clocks-leave-to {
+ opacity: 0;
+ transform: scale(0);
+ }
+
+ .clocks-enter-active,
+ .clocks-leave-active {
+ transition: opacity var(--animation__timing) var(--animation__easing),
+ transform var(--animation__timing) var(--animation__easing);
+ }
+
+ .clocks-move {
+ transition: transform var(--animation__timing) var(--animation__easing);
+ }
+
\ No newline at end of file
diff --git a/app/src/components/clock/analogue-clock.vue b/app/src/components/clock/analogue-clock.vue
index 7dbfae8e..e1acfada 100644
--- a/app/src/components/clock/analogue-clock.vue
+++ b/app/src/components/clock/analogue-clock.vue
@@ -10,12 +10,16 @@