Skip to content

Commit

Permalink
add hour picking
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeriox
jeriox committed Sep 9, 2024
1 parent 487270f commit 9c49553
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 37 deletions.
22 changes: 17 additions & 5 deletions ephios/core/templates/core/event_copy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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 %}
92 changes: 60 additions & 32 deletions ephios/static/ephios/js/event_copy.js
View file
Original file line number Diff line number Diff line change
@@ -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"}, {
Expand Down Expand Up @@ -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) {
Expand All @@ -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');
Expand Down

0 comments on commit 9c49553

Please sign in to comment.