Add "Alarm" Widget?

[mStirner]

Basically a UI for the crontab triggers in scenes.
Can be used for "Light alarams" (Licht Wecker)

[mStirner]

function convertToCronString() {

    const hourInput = document.getElementById('hour').value; 
    const minuteInput = document.getElementById('minute').value;

    if (!/^([01]?[0-9]|2[0-3])$/.test(hourInput)) {
        alert('Bitte geben Sie eine gültige Stunde im Format HH (00-23) ein.');
        return;
    }
    
    if (!/^([0-5]?[0-9])$/.test(minuteInput)) {
        alert('Bitte geben Sie eine gültige Minute im Format mm (00-59) ein.');
        return;
    }

    const weekdays = [];
    document.querySelectorAll('.weekday-checkbox').forEach((checkbox, index) => {
        if (checkbox.checked) {
            weekdays.push(index);
        }
    });

    const weekdayString = weekdays.length > 0 ? weekdays.join(',') : '*';
    const cronString = `${minuteInput} ${hourInput} * * ${weekdayString}`;
    document.getElementById('cronOutput').textContent = `Cronjob-String: ${cronString}`;
    
}

    <label for="hour">Stunde (HH):</label>
    <input type="text" id="hour" placeholder="HH" maxlength="2"><br>
    <label for="minute">Minute (mm):</label>
    <input type="text" id="minute" placeholder="mm" maxlength="2"><br>
    <fieldset>
        <legend>Wochentage auswählen:</legend>
        <label><input type="checkbox" class="weekday-checkbox"> Sonntag</label><br>
        <label><input type="checkbox" class="weekday-checkbox"> Montag</label><br>
        <label><input type="checkbox" class="weekday-checkbox"> Dienstag</label><br>
        <label><input type="checkbox" class="weekday-checkbox"> Mittwoch</label><br>
        <label><input type="checkbox" class="weekday-checkbox"> Donnerstag</label><br>
        <label><input type="checkbox" class="weekday-checkbox"> Freitag</label><br>
        <label><input type="checkbox" class="weekday-checkbox"> Samstag</label><br>
    </fieldset>
    <button onclick="convertToCronString()">Cronjob-String erstellen</button>
    <p id="cronOutput"></p>

[mStirner]

<template>
    <div>

        <div class="time-selector">
            <label for="hours">Hour:</label>
            <select id="hours" v-model="hour" size="3">
                <option v-for="h in 24" :key="h" :value="h - 1">{{ h - 1 }}</option>
            </select>

            <label for="minutes">Minute:</label>
            <select id="minutes" v-model="minute" size="3">
                <option v-for="m in 60" :key="m" :value="m - 1">{{ m - 1 }}</option>
            </select>
        </div>

        <div class="day-selector">
            <div v-for="(day, index) in days" :key="index" class="day-circle"
                :class="{ selected: selectedDays.includes(index + 1) }" @click="toggleDay(index + 1)">
                {{ day }}
            </div>
        </div>

        <div class="text-center">

            {{ hour }} - {{ minute }}
            <br />
            {{ selectedDays }}

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            days: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
            selectedDays: [], 
            hour: 0, 
            minute: 0 
        };
    },
    methods: {
        toggleDay(day) {
            if (this.selectedDays.includes(day)) {
                this.selectedDays = this.selectedDays.filter(selectedDay => selectedDay !== day);
            } else {
                this.selectedDays.push(day);
            }
        }
    }
};
</script>

<style scoped>
.time-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    align-items: center;
}

.time-selector label {
    margin-right: 5px;
    font-weight: bold;
}

.time-selector select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.day-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.day-circle {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.day-circle.selected {
    background-color: #007bff;
    color: white;
}

.day-circle:hover {
    background-color: #d6e0f5;
}
</style>