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;
|
color: #45475a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#clear_btn:hover {
|
||||||
|
background-color: #74c7ec;
|
||||||
|
color: #45475a;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: square;
|
list-style-type: square;
|
||||||
}
|
}
|
||||||
|
@ -88,16 +93,16 @@ ul {
|
||||||
}
|
}
|
||||||
|
|
||||||
.prio_low_txt {
|
.prio_low_txt {
|
||||||
color: #94e2d5;
|
color: #94e2d5;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prio_medium_txt {
|
.prio_medium_txt {
|
||||||
color: #a6e3a1;
|
color: #a6e3a1;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prio_high_txt {
|
.prio_high_txt {
|
||||||
color: #eba0ac;
|
color: #eba0ac;
|
||||||
font-weight: bold;
|
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.AnchorElement;
|
||||||
import js.html.XMLHttpRequest;
|
import js.html.XMLHttpRequest;
|
||||||
import js.html.InputElement;
|
|
||||||
import js.Browser;
|
import js.Browser;
|
||||||
|
|
||||||
function main():Void {
|
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")) {
|
for (del_btn in Browser.document.getElementsByClassName("vid_del_btn")) {
|
||||||
del_btn.onclick = () -> {
|
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();
|
PauseButton.updateDisplay();
|
||||||
}
|
}
|
||||||
|
@ -26,27 +26,32 @@ function main():Void {
|
||||||
function onEnqSubmit(e:Dynamic):Void {
|
function onEnqSubmit(e:Dynamic):Void {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var url_inp = cast(Browser.document.getElementById("url_inp"), InputElement);
|
if (Elements.url_inp.value.length == 0) {
|
||||||
var outname_inp = cast(Browser.document.getElementById("outname_inp"), InputElement);
|
|
||||||
|
|
||||||
if (url_inp.value.length == 0) {
|
|
||||||
Browser.alert("Empty URL not allowed!");
|
Browser.alert("Empty URL not allowed!");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
new EnqueueTask(
|
new EnqueueTask(
|
||||||
url_inp.value,
|
Elements.url_inp.value,
|
||||||
outname_inp.value.length == 0 ? null : outname_inp.value,
|
Elements.outname_inp.value.length == 0 ? null : Elements.outname_inp.value,
|
||||||
Std.parseInt(cast(Browser.document.getElementById("priority_num"), InputElement).value),
|
Std.parseInt(Elements.priority_num.value),
|
||||||
cast(Browser.document.getElementById("description_switch"), InputElement).checked,
|
Elements.description_switch.checked,
|
||||||
cast(Browser.document.getElementById("audio_only_switch"), InputElement).checked
|
Elements.audio_only_switch.checked
|
||||||
).send();
|
).send();
|
||||||
|
|
||||||
outname_inp.value = nextOutnameVal(outname_inp.value);
|
Elements.outname_inp.value = nextOutnameVal(Elements.outname_inp.value);
|
||||||
url_inp.value = "";
|
Elements.url_inp.value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextOutnameVal(cur:String):String {
|
function nextOutnameVal(cur:String):String {
|
||||||
var inc = ~/[0-9]+$/.map(cur, (reg) -> Std.string(Std.parseInt(reg.matched(0)) + 1));
|
var inc = ~/[0-9]+$/.map(cur, (reg) -> Std.string(Std.parseInt(reg.matched(0)) + 1));
|
||||||
return inc == cur ? "" : inc;
|
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">
|
\\<form id="enqueue_form">
|
||||||
\\ <input type="text" placeholder="URL" id="url_inp"><br>
|
\\ <input type="text" placeholder="URL" id="url_inp"><br>
|
||||||
\\ <input type="text" placeholder="output name" id="outname_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="description_switch">Description<br>
|
||||||
\\ <input type="checkbox" id="audio_only_switch">Audio Only<br>
|
\\ <input type="checkbox" id="audio_only_switch">Audio Only<br>
|
||||||
\\ <input type="submit" id="enqueue_btn" value="Enqueue">
|
\\ <input type="submit" id="enqueue_btn" value="Enqueue">
|
||||||
|
|
Loading…
Reference in a new issue