feat: add clear button to enqueue form

This commit is contained in:
LordMZTE 2023-07-25 21:51:59 +02:00
parent 1e3abf343e
commit ae731aaded
Signed by: LordMZTE
GPG key ID: B64802DC33A64FF6
4 changed files with 48 additions and 21 deletions

View file

@ -66,6 +66,11 @@ button.vid_del_btn:hover {
color: #45475a;
}
#clear_btn:hover {
background-color: #74c7ec;
color: #45475a;
}
ul {
list-style-type: square;
}
@ -88,16 +93,16 @@ ul {
}
.prio_low_txt {
color: #94e2d5;
font-weight: bold;
color: #94e2d5;
font-weight: bold;
}
.prio_medium_txt {
color: #a6e3a1;
font-weight: bold;
color: #a6e3a1;
font-weight: bold;
}
.prio_high_txt {
color: #eba0ac;
font-weight: bold;
color: #eba0ac;
font-weight: bold;
}

13
frontend/Elements.hx Normal file
View file

@ -0,0 +1,13 @@
import js.html.ButtonElement;
import js.html.FormElement;
import js.Browser;
import js.html.InputElement;
var audio_only_switch:InputElement = cast(Browser.document.getElementById("audio_only_switch"), InputElement);
var clear_btn:ButtonElement = cast(Browser.document.getElementById("clear_btn"), ButtonElement);
var description_switch:InputElement = cast(Browser.document.getElementById("description_switch"), InputElement);
var enqueue_form:FormElement = cast(Browser.document.getElementById("enqueue_form"), FormElement);
var outname_inp:InputElement = cast(Browser.document.getElementById("outname_inp"), InputElement);
var pause_btn:ButtonElement = cast(Browser.document.getElementById("pause_btn"), ButtonElement);
var priority_num:InputElement = cast(Browser.document.getElementById("priority_num"), InputElement);
var url_inp:InputElement = cast(Browser.document.getElementById("url_inp"), InputElement);

View file

@ -1,10 +1,9 @@
import js.html.AnchorElement;
import js.html.XMLHttpRequest;
import js.html.InputElement;
import js.Browser;
function main():Void {
Browser.document.getElementById("enqueue_form").addEventListener("submit", onEnqSubmit);
Elements.enqueue_form.addEventListener("submit", onEnqSubmit);
for (del_btn in Browser.document.getElementsByClassName("vid_del_btn")) {
del_btn.onclick = () -> {
@ -18,7 +17,8 @@ function main():Void {
};
}
Browser.document.getElementById("pause_btn").onclick = PauseButton.onClick;
Elements.pause_btn.onclick = PauseButton.onClick;
Elements.clear_btn.onclick = onClearButtonClick;
PauseButton.updateDisplay();
}
@ -26,27 +26,32 @@ function main():Void {
function onEnqSubmit(e:Dynamic):Void {
e.preventDefault();
var url_inp = cast(Browser.document.getElementById("url_inp"), InputElement);
var outname_inp = cast(Browser.document.getElementById("outname_inp"), InputElement);
if (url_inp.value.length == 0) {
if (Elements.url_inp.value.length == 0) {
Browser.alert("Empty URL not allowed!");
return;
}
new EnqueueTask(
url_inp.value,
outname_inp.value.length == 0 ? null : outname_inp.value,
Std.parseInt(cast(Browser.document.getElementById("priority_num"), InputElement).value),
cast(Browser.document.getElementById("description_switch"), InputElement).checked,
cast(Browser.document.getElementById("audio_only_switch"), InputElement).checked
Elements.url_inp.value,
Elements.outname_inp.value.length == 0 ? null : Elements.outname_inp.value,
Std.parseInt(Elements.priority_num.value),
Elements.description_switch.checked,
Elements.audio_only_switch.checked
).send();
outname_inp.value = nextOutnameVal(outname_inp.value);
url_inp.value = "";
Elements.outname_inp.value = nextOutnameVal(Elements.outname_inp.value);
Elements.url_inp.value = "";
}
function nextOutnameVal(cur:String):String {
var inc = ~/[0-9]+$/.map(cur, (reg) -> Std.string(Std.parseInt(reg.matched(0)) + 1));
return inc == cur ? "" : inc;
}
function onClearButtonClick():Void {
Elements.audio_only_switch.checked = false;
Elements.description_switch.checked = false;
Elements.outname_inp.value = "";
Elements.priority_num.value = "0";
Elements.url_inp.value = "";
}

View file

@ -130,7 +130,11 @@ pub fn indexRoute(
\\<form id="enqueue_form">
\\ <input type="text" placeholder="URL" id="url_inp"><br>
\\ <input type="text" placeholder="output name" id="outname_inp"><br>
\\ <input type="number" id="priority_num" min="-1000" max="1000" value="0"> Priority<br>
\\ <div style="display: flex;">
\\ <input type="number" id="priority_num" min="-1000" max="1000" value="0">
\\ <span style="flex-grow: 1;"> Priority</span>
\\ <button type="button" id="clear_btn">Clear Values</button>
\\ </div><br>
\\ <input type="checkbox" id="description_switch">Description<br>
\\ <input type="checkbox" id="audio_only_switch">Audio Only<br>
\\ <input type="submit" id="enqueue_btn" value="Enqueue">