Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

start add bans + enhance buttons

Browse source 
*add buttons now have a svg
*create "add ban" modal element with structure (submit, close, add field, delete all fields, delete one field, table data structure)
*start modal scripting
This commit is contained in:
Jordan Blasenhauer 2024-01-19 18:00:59 +01:00
parent 13e546023e
commit 0cfb72836b
5 changed files with 318 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

85
src/ui/static/js/bans.js
View file

@ -356,6 +356,91 @@ class Unban {
}
}
class AddBanModal {
constructor() {
//modal elements
this.modal = document.querySelector("[data-bans-modal]");
this.openBtn = document.querySelector("button[data-add-ban]");
this.addBanInp = document.querySelector("input[data-ban-add-inp]");
this.addFieldBtn = document.querySelector("button[data-ban-add-new]");
this.listEl = document.querySelector(`[data-bans-add-ban-list]`);
this.removeAllFieldBtn = document.querySelector(
"button[data-ban-add-delete-all]",
);
this.formEl = document.querySelector("form[data-ban-add-form]");
this.init();
}
init() {
//open modal
this.openBtn.addEventListener("click", (e) => {
this.openModal();
});
this.modal.addEventListener("click", (e) => {
//close
try {
if (e.target.closest("button").hasAttribute("data-bans-modal-close")) {
this.closeModal();
}
} catch (err) {}
});
// add field
this.addFieldBtn.addEventListener("click", (e) => {
const field = document.createElement("div");
field.classList.add("flex", "items-center", "mb-2");
field.innerHTML = `
<input
type="text"
name="ban_add"
class="w-full px-2 py-1 border rounded-md border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-300"
placeholder="IP"
required
/>
<button
type="button"
class="ml-2 px-2 py-1 border rounded-md border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-300"
data-ban-add-delete
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
`;
this.formEl.insertBefore(field, this.removeAllFieldBtn);
});
this.formEl.addEventListener("submit", (e) => {
e.preventDefault();
this.addBanInp.setAttribute("value", this.addBanInp.value);
this.formEl.submit();
});
}
openModal() {
this.modal.classList.remove("hidden");
this.modal.classList.add("flex");
}
closeModal() {
this.modal.classList.add("hidden");
this.modal.classList.remove("flex");
}
}
const setDropdown = new Dropdown();
const setFilter = new Filter();
const setUnban = new Unban();
const setModal = new AddBanModal();

26
src/ui/templates/bans.html vendored
View file

@ -13,6 +13,25 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
{% endif %}
{% endfor %}
<!-- actions -->
<div
class="col-span-12 relative flex justify-center min-w-0 break-words rounded-2xl bg-clip-border"
>
<button
data-add-ban
type="button"
class="dark:bg-green-500/90 duration-300 dark:opacity-90 w-80 flex justify-center items-center px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2">Add ban</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
</div>
<!-- end actions -->
<!-- info-->
<div
class="col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@ -337,6 +356,9 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
<button data-unban-btn disabled type="submit" class="valid-btn mr-3 text-base">
UNBAN SELECTED
</button>
</div>
</form>
</form>
</div>
{% include "bans_modal.html" %}
{% endblock %}

202
src/ui/templates/bans_modal.html vendored Normal file
View file

@ -0,0 +1,202 @@
<!-- modal -->
<div
data-bans-modal
class="dark:brightness-110 hidden w-screen h-screen fixed bg-gray-600/50 z-[1001] top-0 left-0 justify-center items-center"
>
<div
data-bans-modal-card
class="overflow-y-auto mx-0 sm:mx-6 lg:mx-8 my-3 px-4 pt-4 pb-8 w-full sm:min-w-[500px] max-w-[1000px] flex flex-col justify-between break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
>
<div>
<div class="w-full flex justify-between mb-2">
<p
data-bans-modal-title
class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-200 mb-2 font-sans font-semibold leading-normal uppercase text-md"
>
ADD BANS
</p>
<button
class="-translate-y-1"
aria-label="close modal"
data-bans-modal-close
>
<svg
class="transition duration-300 ease-in-out dark:opacity-90 h-6 w-6 sm:h-7 sm:w-7 fill-slate-800 dark:fill-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
/>
</svg>
</button>
</div>
<div
data-bans-tabs-header
class="flex flex-col sm:flex-row justify-start items-start sm:items-center gap-x-4 gap-y-2 my-3"
>
<button
data-ban-add-new
type="button"
class="dark:bg-green-500/90 duration-300 dark:opacity-90 flex justify-center items-center px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2">Add field</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button
data-ban-add-delete-all
type="button"
disabled
class="dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<span class="mr-2">Delete all</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 w-7">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</button>
</div>
<div
class="col-span-12 overflow-y-auto overflow-x-auto"
>
<div data-{{current_endpoint}}-bans-list>
<!-- list container-->
<div class="overflow-hidden min-w-[900px] w-full grid grid-cols-12 rounded p-2">
<!-- header-->
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
>
IP
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
>
Ban start
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-3 m-0 pb-2 border-b border-gray-400"
>
Ban end
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-2 m-0 pb-2 border-b border-gray-400"
>
Reason
</p>
<p
class="dark:text-gray-300 h-8 text-sm font-bold col-span-1 m-0 pb-2 pl-4 border-b border-gray-400"
>
Delete
</p>
<!-- end header-->
<!-- list -->
<ul class="col-span-12 w-full h-full" data-bans-add-ban-list>
<li
data-bans-add-ban-list
class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
>
<div class="mx-1.5 col-span-3">
<label for="ip" class="sr-only">ip</label>
<input
type="text"
id="ip"
name="ip"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="127.0.0.1"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-3">
<label for="ban-start" class="sr-only">Ban start</label>
<input
type="text"
id="ban-start"
name="ban-start"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="01/01/2021 00:00:00"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-3">
<label for="ban-end" class="sr-only">Ban end</label>
<input
type="text"
id="ban-end"
name="ban-end"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="01/01/2021 00:00:00"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-2">
<label for="reason" class="sr-only">reason</label>
<input
type="text"
id="reason"
name="reason"
class="dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="ui"
pattern="(.*?)"
required
/>
</div>
<div class="mx-1.5 col-span-1 flex justify-center items-center">
<button
data-add-ban
type="button"
class="dark:bg-red-500/90 duration-300 dark:opacity-90 flex justify-center items-center p-2 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</button>
</div>
</li>
</ul>
<!-- end list-->
</div>
<!-- end list container-->
</div>
</div>
</div>
<form
data-ban-add-form
class="w-full flex flex-col justify-between"
id="form-new"
action="/bans"
method="POST"
>
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
<input type="hidden" name="operation" value="ban">
<input data-ban-add-inp type="hidden" name="data" value="">
<!-- action button -->
<div class="w-full justify-center flex mt-6 mb-4">
<button
data-bans-modal-close
type="button"
class="close-btn mr-3 text-base"
>
Close
</button>
<button data-bans-modal-submit type="submit" class="valid-btn">
Add
</button>
</div>
<!-- end action button-->
</form>
</div>
</div>
<!-- end modal -->

8
src/ui/templates/services.html vendored
View file

@ -7,9 +7,13 @@
data-services-action="new"
data-services-name="service"
type="button"
class="dark:bg-green-500/90 duration-300 dark:opacity-90 w-80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
class="dark:bg-green-500/90 duration-300 dark:opacity-90 w-80 flex justify-center items-center px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-base ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
>
New SERVICE
<span class="mr-2">new service</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
</div>
<!-- end actions -->