interval field client processing
This commit is contained in:
parent
f4ef7afea0
commit
3add718cdf
69
web/static/js/interval.js
Normal file
69
web/static/js/interval.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
function update_input(element) {
|
||||||
|
let months = element.querySelector('input[name="interval_months"]');
|
||||||
|
let days = element.querySelector('input[name="interval_days"]');
|
||||||
|
let hours = element.querySelector('input[name="interval_hours"]');
|
||||||
|
let minutes = element.querySelector('input[name="interval_minutes"]');
|
||||||
|
let seconds = element.querySelector('input[name="interval_seconds"]');
|
||||||
|
|
||||||
|
months.value = months.value.padStart(1, "0");
|
||||||
|
days.value = days.value.padStart(1, "0");
|
||||||
|
hours.value = hours.value.padStart(2, "0");
|
||||||
|
minutes.value = minutes.value.padStart(2, "0");
|
||||||
|
seconds.value = seconds.value.padStart(2, "0");
|
||||||
|
|
||||||
|
if (seconds.value >= 60) {
|
||||||
|
let quotient = Math.floor(seconds.value / 60);
|
||||||
|
let remainder = seconds.value % 60;
|
||||||
|
|
||||||
|
seconds.value = String(remainder).padStart(2, "0");
|
||||||
|
minutes.value = String(Number(minutes.value) + Number(quotient)).padStart(2, "0");
|
||||||
|
}
|
||||||
|
if (minutes.value >= 60) {
|
||||||
|
let quotient = Math.floor(minutes.value / 60);
|
||||||
|
let remainder = minutes.value % 60;
|
||||||
|
|
||||||
|
minutes.value = String(remainder).padStart(2, "0");
|
||||||
|
hours.value = String(Number(hours.value) + Number(quotient)).padStart(2, "0");
|
||||||
|
}
|
||||||
|
if (hours.value >= 24) {
|
||||||
|
let quotient = Math.floor(hours.value / 24);
|
||||||
|
let remainder = hours.value % 24;
|
||||||
|
|
||||||
|
hours.value = String(remainder).padStart(2, "0");
|
||||||
|
days.value = Number(days.value) + Number(quotient);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let $intervalGroup = document.querySelector(".interval-group");
|
||||||
|
|
||||||
|
document.querySelector(".interval-group").addEventListener(
|
||||||
|
"blur",
|
||||||
|
(ev) => {
|
||||||
|
if (ev.target.nodeName !== "BUTTON") update_input($intervalGroup);
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$intervalGroup.querySelector("button.clear").addEventListener("click", () => {
|
||||||
|
document
|
||||||
|
.querySelector(".interval-group")
|
||||||
|
.querySelectorAll("input")
|
||||||
|
.forEach((el) => {
|
||||||
|
el.value = "";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("remindersLoaded", (event) => {
|
||||||
|
for (reminder of event.detail) {
|
||||||
|
update_input(reminder.node.querySelector(".interval-group input"));
|
||||||
|
|
||||||
|
reminder.node.querySelector("button.clear").addEventListener("click", () => {
|
||||||
|
reminder.node
|
||||||
|
.querySelector(".interval-group")
|
||||||
|
.querySelectorAll("input")
|
||||||
|
.forEach((el) => {
|
||||||
|
el.value = "";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
@ -66,7 +66,7 @@
|
|||||||
<div class="navbar-item">
|
<div class="navbar-item">
|
||||||
<a class="button is-rounded is-light" href="/dashboard">
|
<a class="button is-rounded is-light" href="/dashboard">
|
||||||
<p>
|
<p>
|
||||||
Dashboard <span class="icon"><i class="fas fa-chevron-right"></i></span>
|
<span>Dashboard</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -114,7 +114,7 @@
|
|||||||
<div class="hero-foot has-text-centered">
|
<div class="hero-foot has-text-centered">
|
||||||
<a class="button is-size-4 is-rounded is-success" href="https://invite.reminder-bot.com">
|
<a class="button is-size-4 is-rounded is-success" href="https://invite.reminder-bot.com">
|
||||||
<p class="is-size-4">
|
<p class="is-size-4">
|
||||||
Add to your Server <span class="icon"><i class="fas fa-chevron-right"></i></span>
|
<span>Add to your Server</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -122,7 +122,7 @@
|
|||||||
<div class="hero-foot has-text-centered">
|
<div class="hero-foot has-text-centered">
|
||||||
<a class="button is-size-4 is-rounded is-primary" href="https://discord.jellywx.com">
|
<a class="button is-size-4 is-rounded is-primary" href="https://discord.jellywx.com">
|
||||||
<p class="is-size-4">
|
<p class="is-size-4">
|
||||||
Join Discord <span class="icon"><i class="fas fa-chevron-right"></i></span>
|
<span>Join Discord</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -321,6 +321,7 @@
|
|||||||
{% include "reminder_dashboard/personal_reminder" %}
|
{% include "reminder_dashboard/personal_reminder" %}
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script src="/static/js/interval.js"></script>
|
||||||
<script src="/static/js/timezone.js"></script>
|
<script src="/static/js/timezone.js"></script>
|
||||||
<script src="/static/js/main.js"></script>
|
<script src="/static/js/main.js"></script>
|
||||||
|
|
||||||
|
@ -159,7 +159,7 @@
|
|||||||
<input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
|
<input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
|
||||||
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
|
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
|
||||||
</div>
|
</div>
|
||||||
<button><span class="icon"><i class="fas fa-trash"></i></span></button>
|
<button class="clear"><span class="icon"><i class="fas fa-trash"></i></span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user