From 9c49553f036bfbfe22b13d47d3be8773e079dd02 Mon Sep 17 00:00:00 2001
From: Julian B <jeriox@users.noreply.github.com>
Date: Mon, 9 Sep 2024 20:19:25 +0200
Subject: [PATCH] add hour picking

---
 ephios/core/templates/core/event_copy.html | 22 ++++--
 ephios/static/ephios/js/event_copy.js      | 92 ++++++++++++++--------
 2 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/ephios/core/templates/core/event_copy.html b/ephios/core/templates/core/event_copy.html
index eedbe0fdd..502edc9b3 100644
--- a/ephios/core/templates/core/event_copy.html
+++ b/ephios/core/templates/core/event_copy.html
@@ -23,11 +23,15 @@ <h1>
                 <div class="input-group pb-4">
                     <div class="input-group-text">{% translate "starting at" %}</div>
                     <input type="date" class="form-control" v-model="DTSTART">
+                    <input type="time" class="form-control" v-if="pickHour" v-model="DTSTART_TIME">
                 </div>
                 <ul class="list-group mb-2">
                     <li class="list-group-item p-3" v-for="(rule, index) in rules">
                         <div class="btn-toolbar justify-content-between">
                             <div class="btn-group pb-4">
+                                <button type="button" class="btn btn-outline-secondary"
+                                        :class="{'active' : rule.freq==='HOURLY'}" v-if="pickHour"
+                                        @click="rule.freq='HOURLY'">{% translate "Hourly" %}</button>
                                 <button type="button" class="btn btn-outline-secondary"
                                         :class="{'active' : rule.freq==='DAILY'}"
                                         @click="rule.freq='DAILY'">{% translate "Daily" %}</button>
@@ -195,11 +199,15 @@ <h1>
                                 <span class="col-2">
                                     {% translate "until" %}
                                 </span>
-                                <div class="col-9">
-                                    <input type="date" class="form-control form-control-sm flex-fill"
+                                <div :class="pickHour ? 'col-5' : 'col-9'">
+                                    <input type="date" class="form-control form-control-sm"
                                            v-model="rule.UNTIL" @focus="rule.end_mode='UNTIL'"
                                            :required="rule.end_mode=='UNTIL'">
                                 </div>
+                                <div v-if="pickHour" class="col-4">
+                                    <input type="time" class="form-control form-control-sm"
+                                           v-model="rule.UNTIL_TIME" @focus="rule.end_mode='UNTIL'">
+                                </div>
 
                             </div>
 
@@ -223,11 +231,14 @@ <h1>
                         </div>
                     </li>
                     <li class="list-group-item p-3" v-for="date in dates">
-                        <div class="d-flex">
-                            <div class="">
+                        <div class="row align-items-center">
+                            <div class="col-5">
                                 <input type="date" v-model="date.date" class="form-control" required>
                             </div>
-                            <div class="ms-auto">
+                            <div class="col-5">
+                                <input type="time" v-if="pickHour" v-model="date.time" class="form-control" required>
+                            </div>
+                            <div class="col-1 ms-auto mr-1">
                                 <button type="button" class="btn btn-danger" @click="removeDate(date)">
                                     <i class="fas fa-trash"></i><span
                                         class="visually-hidden">{% translate "Remove" %}</span>
@@ -253,6 +264,7 @@ <h1>
             </div>
         </form>
     </div>
+    <input type="hidden" autocomplete="off" id="pickHour" value="true">
     <script nonce="{{ request.csp_nonce }}" type="text/javascript"
             src="{% static "ephios/js/event_copy.js" %}"></script>
 {% endblock %}
diff --git a/ephios/static/ephios/js/event_copy.js b/ephios/static/ephios/js/event_copy.js
index 1788966c6..a5b1bca3e 100644
--- a/ephios/static/ephios/js/event_copy.js
+++ b/ephios/static/ephios/js/event_copy.js
@@ -1,15 +1,24 @@
 const {createApp, ref, computed} = Vue
 
-function formatDate(date_obj, sep="-") {
+function formatDate(date_obj, sep = "-") {
     let month = date_obj.getMonth() + 1;
     let day = date_obj.getDate() + 1;
     return date_obj.getFullYear() + sep + (month < 10 ? "0" : "") + month + sep + (day < 10 ? "0" : "") + day
 }
 
+function formatHourOrZero(time_string) {
+    if (time_string) {
+        return pickHour ? time_string.slice(0,2) + time_string.slice(3,5) + "00" : "000000"
+    }
+    return "000000"
+}
+
 document.addEventListener('DOMContentLoaded', (event) => {
     createApp({
         setup() {
+            const pickHour = JSON.parse(document.getElementById("pickHour").value);
             const DTSTART = ref(formatDate(new Date()))
+            const DTSTART_TIME = ref("00:00")
             const rules = ref([])
             const dates = ref([])
             const weekdays = [{id: "MO", short: "Mon", long: "Monday"}, {
@@ -37,8 +46,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
                 rules.value.splice(rules.value.indexOf(rule), 1)
             }
 
-             async function addDate() {
-                dates.value.push({date: ""});
+            async function addDate() {
+                dates.value.push({date: "", time: ""});
             }
 
             async function removeDate(date) {
@@ -58,39 +67,58 @@ document.addEventListener('DOMContentLoaded', (event) => {
             })
 
             const rrule_string = computed(() => {
-                return "DTSTART;TZID=" + Intl.DateTimeFormat().resolvedOptions().timeZone + ":" + formatDate(new Date(DTSTART.value), "") + "T000000\n" + rules.value.map(rule => {
-                    let rule_str = "FREQ=" + rule.freq + ";INTERVAL=" + rule.interval;
-                    switch (rule.freq) {
-                        case "WEEKLY":
-                            rule_str += ";BYWEEKDAY=" + (Array.isArray(rule.BYWEEKDAY) ? rule.BYWEEKDAY.join(",") : rule.BYWEEKDAY);
-                            break;
-                        case "MONTHLY":
-                            if (rule.month_mode === "BYMONTHDAY") {
-                                rule_str += ";BYMONTHDAY=" + rule.BYMONTHDAY
-                            } else {
-                                rule_str += ";BYWEEKDAY=" + rule.BYWEEKDAY + ";BYSETPOS=" + rule.BYSETPOS
-                            }
-                            break;
-                        case "YEARLY":
-                            if (rule.year_mode === "BYMONTHDAY") {
-                                rule_str += ";BYMONTHDAY=" + rule.BYMONTHDAY + ";BYMONTH=" + rule.BYMONTH
-                            } else {
-                                rule_str += ";BYWEEKDAY=" + rule.BYWEEKDAY + ";BYSETPOS=" + rule.BYSETPOS + ";BYMONTH=" + rule.BYMONTH
+                return "DTSTART;TZID=" + Intl.DateTimeFormat().resolvedOptions().timeZone + ":" +
+                formatDate(new Date(DTSTART.value), "") + "T" + formatHourOrZero(DTSTART_TIME.value) + "\n" +
+                    rules.value.map(rule => {
+                        let rule_str = "FREQ=" + rule.freq + ";INTERVAL=" + rule.interval;
+                        switch (rule.freq) {
+                            case "WEEKLY":
+                                rule_str += ";BYWEEKDAY=" + (Array.isArray(rule.BYWEEKDAY) ? rule.BYWEEKDAY.join(",") : rule.BYWEEKDAY);
+                                break;
+                            case "MONTHLY":
+                                if (rule.month_mode === "BYMONTHDAY") {
+                                    rule_str += ";BYMONTHDAY=" + rule.BYMONTHDAY
+                                } else {
+                                    rule_str += ";BYWEEKDAY=" + rule.BYWEEKDAY + ";BYSETPOS=" + rule.BYSETPOS
+                                }
+                                break;
+                            case "YEARLY":
+                                if (rule.year_mode === "BYMONTHDAY") {
+                                    rule_str += ";BYMONTHDAY=" + rule.BYMONTHDAY + ";BYMONTH=" + rule.BYMONTH
+                                } else {
+                                    rule_str += ";BYWEEKDAY=" + rule.BYWEEKDAY + ";BYSETPOS=" + rule.BYSETPOS + ";BYMONTH=" + rule.BYMONTH
+                                }
+                        }
+                        if (rule.end_mode === "COUNT") {
+                            rule_str += ";COUNT=" + rule.COUNT
+                        } else if (rule.end_mode === "UNTIL") {
+                            rule_str += ";UNTIL=" + formatDate(new Date(rule.UNTIL), "")
+                            if (pickHour) {
+                                rule_str += "T" + formatHourOrZero(rule.UNTIL_TIME)
                             }
-                    }
-                    if (rule.end_mode === "COUNT") {
-                        rule_str += ";COUNT=" + rule.COUNT
-                    } else if (rule.end_mode === "UNTIL") {
-                        rule_str += ";UNTIL=" + rule.UNTIL
-                    }
-                    return rule_str;
-                }).join("\n") + dates.value.map(date => {
-                    return "RDATE;TZID=" + Intl.DateTimeFormat().resolvedOptions().timeZone + ":" + formatDate(new Date(date.date), "") + "T000000"
-                }).join("\n")
+                        }
+                        return rule_str;
+                    }).join("\n") + dates.value.map(date => {
+                        return "RDATE;TZID=" + Intl.DateTimeFormat().resolvedOptions().timeZone +
+                            ":" + formatDate(new Date(date.date), "") + "T" + formatHourOrZero(date.time)
+                    }).join("\n")
             })
 
             return {
-                rules, DTSTART, addRule, removeRule, addDate, removeDate, submitForm, rrule_string, weekdays, months, dates, computed_dates,
+                rules,
+                DTSTART,
+                DTSTART_TIME,
+                addRule,
+                removeRule,
+                addDate,
+                removeDate,
+                submitForm,
+                rrule_string,
+                weekdays,
+                months,
+                dates,
+                computed_dates,
+                pickHour,
             }
         }, delimiters: ['[[', ']]']
     }).mount('#recurrence');