|
|
|
|
@ -15,32 +15,68 @@ import "./AddAlarm.css";
|
|
|
|
|
import { OverlayEventDetail } from "@ionic/core/components";
|
|
|
|
|
import { useRef, useState } from "react";
|
|
|
|
|
|
|
|
|
|
import moment from "moment";
|
|
|
|
|
|
|
|
|
|
import { FormattedMessage, useIntl } from "react-intl";
|
|
|
|
|
|
|
|
|
|
const AddAlarm: React.FC = () => {
|
|
|
|
|
import { v4 } from "uuid";
|
|
|
|
|
|
|
|
|
|
import type { Storage } from "@ionic/storage";
|
|
|
|
|
import { DaysMap } from "../utils/mapDays";
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
store: Storage;
|
|
|
|
|
setShouldRefresh: Function;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const AddAlarm: React.FC<Props> = ({ store, setShouldRefresh }) => {
|
|
|
|
|
const modal = useRef<HTMLIonModalElement>(null);
|
|
|
|
|
const input = useRef<HTMLIonInputElement>(null);
|
|
|
|
|
const noteRef = useRef<HTMLIonInputElement>(null);
|
|
|
|
|
const timeRef = useRef<HTMLIonDatetimeElement>(null);
|
|
|
|
|
|
|
|
|
|
const [message, setMessage] = useState(
|
|
|
|
|
"This modal example uses triggers to automatically open a modal when the button is clicked."
|
|
|
|
|
);
|
|
|
|
|
const [buttonsState, setButtonsState] = useState({
|
|
|
|
|
1: false,
|
|
|
|
|
2: false,
|
|
|
|
|
3: false,
|
|
|
|
|
4: false,
|
|
|
|
|
5: false,
|
|
|
|
|
6: false,
|
|
|
|
|
7: false,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function confirm() {
|
|
|
|
|
modal.current?.dismiss(input.current?.value, "confirm");
|
|
|
|
|
async function confirm() {
|
|
|
|
|
modal.current?.dismiss(noteRef.current?.value, "confirm");
|
|
|
|
|
await store.set("alarms", [
|
|
|
|
|
...(await store.get("alarms")),
|
|
|
|
|
{
|
|
|
|
|
uuid: v4(),
|
|
|
|
|
time: moment(timeRef.current?.value).format("HH:mm") || moment().format("HH:mm"),
|
|
|
|
|
days: Object.keys(buttonsState)
|
|
|
|
|
.filter((day) => buttonsState[Number(day) as keyof DaysMap] === true)
|
|
|
|
|
.map((day) => parseInt(day)),
|
|
|
|
|
note: noteRef.current?.value,
|
|
|
|
|
enabled: true,
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onWillDismiss(ev: CustomEvent<OverlayEventDetail>) {
|
|
|
|
|
if (ev.detail.role === "confirm") {
|
|
|
|
|
setMessage(`Hello, ${ev.detail.data}!`);
|
|
|
|
|
setShouldRefresh(true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buttonToggle(dayKey: keyof DaysMap, event: any) {
|
|
|
|
|
// console.log(event);
|
|
|
|
|
setButtonsState({ ...buttonsState, [dayKey]: !buttonsState[dayKey] });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const buttonStateToColor = (state: boolean) => {
|
|
|
|
|
return state ? "success" : "danger";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<IonModal
|
|
|
|
|
ref={modal}
|
|
|
|
|
onWillDismiss={(ev) => onWillDismiss(ev)}
|
|
|
|
|
trigger="add-alarm"
|
|
|
|
|
>
|
|
|
|
|
<IonModal ref={modal} onWillDismiss={(ev) => onWillDismiss(ev)} trigger="add-alarm">
|
|
|
|
|
<IonHeader>
|
|
|
|
|
<IonToolbar>
|
|
|
|
|
<IonButtons slot="start">
|
|
|
|
|
@ -66,32 +102,32 @@ const AddAlarm: React.FC = () => {
|
|
|
|
|
</IonText>
|
|
|
|
|
<IonDatetimeButton datetime="datetime"></IonDatetimeButton>
|
|
|
|
|
<IonModal keepContentsMounted={true}>
|
|
|
|
|
<IonDatetime id="datetime" presentation="time"></IonDatetime>
|
|
|
|
|
<IonDatetime id="datetime" presentation="time" ref={timeRef}></IonDatetime>
|
|
|
|
|
</IonModal>
|
|
|
|
|
<IonText>
|
|
|
|
|
<h2>
|
|
|
|
|
<FormattedMessage id="days" />
|
|
|
|
|
</h2>
|
|
|
|
|
</IonText>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(1, ev)} color={buttonStateToColor(buttonsState[1])}>
|
|
|
|
|
<FormattedMessage id="mon" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(2, ev)} color={buttonStateToColor(buttonsState[2])}>
|
|
|
|
|
<FormattedMessage id="tue" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(3, ev)} color={buttonStateToColor(buttonsState[3])}>
|
|
|
|
|
<FormattedMessage id="wed" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(4, ev)} color={buttonStateToColor(buttonsState[4])}>
|
|
|
|
|
<FormattedMessage id="thu" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(5, ev)} color={buttonStateToColor(buttonsState[5])}>
|
|
|
|
|
<FormattedMessage id="fri" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(6, ev)} color={buttonStateToColor(buttonsState[6])}>
|
|
|
|
|
<FormattedMessage id="sat" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonButton>
|
|
|
|
|
<IonButton onClick={(ev) => buttonToggle(7, ev)} color={buttonStateToColor(buttonsState[7])}>
|
|
|
|
|
<FormattedMessage id="sun" />
|
|
|
|
|
</IonButton>
|
|
|
|
|
<IonText>
|
|
|
|
|
@ -99,11 +135,7 @@ const AddAlarm: React.FC = () => {
|
|
|
|
|
<FormattedMessage id="note" />
|
|
|
|
|
</h2>
|
|
|
|
|
</IonText>
|
|
|
|
|
<IonInput
|
|
|
|
|
ref={input}
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder={useIntl().formatMessage({ id: "alarmNote" })}
|
|
|
|
|
></IonInput>
|
|
|
|
|
<IonInput ref={noteRef} type="text" placeholder={useIntl().formatMessage({ id: "alarmNote" })}></IonInput>
|
|
|
|
|
</IonContent>
|
|
|
|
|
</IonModal>
|
|
|
|
|
);
|
|
|
|
|
|
Kay
3 weeks ago