feat: add clear button to enqueue form
This commit is contained in:
parent
1e3abf343e
commit
ae731aaded
4 changed files with 48 additions and 21 deletions
|
@ -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
13
frontend/Elements.hx
Normal 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);
|
|
@ -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 = "";
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue