mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
prepare simple service modal implementation
This commit is contained in:
Jordan Blasenhauer
parent
aa18fa573d
commit
19a7f1c62d
3 changed files with 144 additions and 140 deletions
144
src/ui/templates/services_modal.html
vendored
144
src/ui/templates/services_modal.html
vendored
|
|
@ -42,146 +42,10 @@
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div data-services-tabs-select-header class="flex flex-col">
|
||||
<div class="flex flex-col md:flex-row justify-start w-full items-start md:items-end gap-y-3 gap-x-4">
|
||||
<div class="w-full sm:min-w-[250px] max-w-[300px]">{% include "settings_tabs_select.html" %}</div>
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<!-- search inpt-->
|
||||
<div class="sm:mx-2 mb-1 min-w-[200px] flex flex-col relative col-span-12 md:col-span-6">
|
||||
<h5 class="hidden sm:block my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
|
||||
Search
|
||||
</h5>
|
||||
<label class="sr-only" for="settings-filter">search</label>
|
||||
<input type="text"
|
||||
id="settings-filter"
|
||||
name="settings-filter"
|
||||
class="col-span-12 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="keyword"
|
||||
pattern="(.*?)"
|
||||
required />
|
||||
</div>
|
||||
<!-- end search inpt-->
|
||||
<!-- type plugin -->
|
||||
<div class="hidden mx-2 mb-1 min-w-[200px] sm:flex flex-col relative col-span-12 md:col-span-6">
|
||||
<h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">Type</h5>
|
||||
<button aria-controls="filter-type"
|
||||
data-services-setting-select="type"
|
||||
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
|
||||
<span aria-description="current filter state value"
|
||||
id="services-type"
|
||||
data-name="services-type"
|
||||
data-services-setting-select-text="type">all</span>
|
||||
<!-- chevron -->
|
||||
<svg data-services-setting-select="type"
|
||||
class="transition-transform h-4 w-4 fill-gray-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- end chevron -->
|
||||
<!-- dropdown-->
|
||||
<div id="filter-type"
|
||||
role="listbox"
|
||||
data-services-setting-select-dropdown="type"
|
||||
class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="all"
|
||||
class="dark:bg-primary bg-primary text-gray-300 border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
all
|
||||
</button>
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="core"
|
||||
class=" bg-white dark:bg-slate-700 border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
core
|
||||
</button>
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="external"
|
||||
class=" bg-white dark:bg-slate-700 border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
external
|
||||
</button>
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="pro"
|
||||
class=" bg-white dark:bg-slate-700 rounded-b border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
pro
|
||||
</button>
|
||||
</div>
|
||||
<!-- end dropdown-->
|
||||
</div>
|
||||
<!-- end type plugin-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full min-w-[300px] my-1 sm:my-0">
|
||||
<hr class="separator" />
|
||||
</div>
|
||||
</div>
|
||||
<div data-services-nomatch
|
||||
class="hidden w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words">
|
||||
<div class="col-span-12 flex flex-col justify-center items-center h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="mb-2 w-8 h-8 dark:stroke-white/90 stroke-gray-800">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
|
||||
</svg>
|
||||
<h5 class="font-bold dark:text-white/90 mx-2 text-gray-800">No settings match</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- new and edit form -->
|
||||
<form data-services-modal-form
|
||||
class="w-full h-[90vh] overflow-auto flex flex-col justify-between"
|
||||
id="form-new"
|
||||
method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input type="hidden" id="operation" value="new" name="operation" />
|
||||
<input type="hidden" value="new" name="OLD_SERVER_NAME" />
|
||||
<input type="hidden" value="no" name="is_draft" />
|
||||
{% include "settings_plugins.html" %}
|
||||
<!-- action button -->
|
||||
<div class="w-full flex-col items-center justify-center flex mt-10">
|
||||
<div class="flex justify-center">
|
||||
<button data-services-modal-close
|
||||
type="button"
|
||||
class="dark:bg-slate-800 close-btn mb-4 mr-3 text-base">Close</button>
|
||||
<button data-services-modal-submit type="submit" class="mb-4 valid-btn">Save</button>
|
||||
</div>
|
||||
<!-- end action button-->
|
||||
<p data-services-modal-error-msg
|
||||
class="hidden text-red-500 font-bold dark:opacity-80 mb-0 text-center"></p>
|
||||
</div>
|
||||
</form>
|
||||
<!-- end new and edit form -->
|
||||
<!-- delete form-->
|
||||
<form data-services-modal-form-delete
|
||||
class="w-full h-full flex flex-col justify-between"
|
||||
id="form-delete-server_name"
|
||||
method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input type="hidden" value="delete" name="operation" />
|
||||
<input type="hidden" value="no" name="is_draft" />
|
||||
<input type="hidden" value="" name="SERVER_NAME" />
|
||||
<div class="flex justify-center">
|
||||
<p data-services-modal-text
|
||||
class="text-gray-700 dark:text-gray-300 mx-2 mb-2 mt-8 font-semibold font-sans leading-normal uppercase text-sm">
|
||||
</p>
|
||||
</div>
|
||||
<!-- action button -->
|
||||
<div class="w-full justify-center flex mt-10">
|
||||
<button data-services-modal-close
|
||||
type="button"
|
||||
class="dark:bg-slate-800 close-btn mb-4 mr-3 text-base">Close</button>
|
||||
<button type="submit" class="delete-btn mb-4 mr-3 text-base">Delete</button>
|
||||
</div>
|
||||
<!-- end action button-->
|
||||
</form>
|
||||
<!-- end delete form-->
|
||||
|
||||
{% include "services_modal_advanced.html" %}
|
||||
{% include "services_modal_delete.html" %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal -->
|
||||
|
|
|
|||
116
src/ui/templates/services_modal_advanced.html
vendored
Normal file
116
src/ui/templates/services_modal_advanced.html
vendored
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
|
||||
<div data-advanced data-services-tabs-select-header class="flex flex-col">
|
||||
<div class="flex flex-col md:flex-row justify-start w-full items-start md:items-end gap-y-3 gap-x-4">
|
||||
<div class="w-full sm:min-w-[250px] max-w-[300px]">{% include "settings_tabs_select.html" %}</div>
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<!-- search inpt-->
|
||||
<div class="sm:mx-2 mb-1 min-w-[200px] flex flex-col relative col-span-12 md:col-span-6">
|
||||
<h5 class="hidden sm:block my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">
|
||||
Search
|
||||
</h5>
|
||||
<label class="sr-only" for="settings-filter">search</label>
|
||||
<input type="text"
|
||||
id="settings-filter"
|
||||
name="settings-filter"
|
||||
class="col-span-12 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="keyword"
|
||||
pattern="(.*?)"
|
||||
required />
|
||||
</div>
|
||||
<!-- end search inpt-->
|
||||
<!-- type plugin -->
|
||||
<div class="hidden mx-2 mb-1 min-w-[200px] sm:flex flex-col relative col-span-12 md:col-span-6">
|
||||
<h5 class="my-1 transition duration-300 ease-in-out text-sm sm:text-md font-bold m-0 dark:text-gray-200">Type</h5>
|
||||
<button aria-controls="filter-type"
|
||||
data-services-setting-select="type"
|
||||
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
|
||||
<span aria-description="current filter state value"
|
||||
id="services-type"
|
||||
data-name="services-type"
|
||||
data-services-setting-select-text="type">all</span>
|
||||
<!-- chevron -->
|
||||
<svg data-services-setting-select="type"
|
||||
class="transition-transform h-4 w-4 fill-gray-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- end chevron -->
|
||||
<!-- dropdown-->
|
||||
<div id="filter-type"
|
||||
role="listbox"
|
||||
data-services-setting-select-dropdown="type"
|
||||
class="mt-1 hidden z-100 absolute flex-col w-full translate-y-16 max-h-[350px] overflow-hidden overflow-y-auto">
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="all"
|
||||
class="dark:bg-primary bg-primary text-gray-300 border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
all
|
||||
</button>
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="core"
|
||||
class=" bg-white dark:bg-slate-700 border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
core
|
||||
</button>
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="external"
|
||||
class=" bg-white dark:bg-slate-700 border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
external
|
||||
</button>
|
||||
<button role="option"
|
||||
data-services-setting-select-dropdown-btn="type"
|
||||
value="pro"
|
||||
class=" bg-white dark:bg-slate-700 rounded-b border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
|
||||
pro
|
||||
</button>
|
||||
</div>
|
||||
<!-- end dropdown-->
|
||||
</div>
|
||||
<!-- end type plugin-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full min-w-[300px] my-1 sm:my-0">
|
||||
<hr class="separator" />
|
||||
</div>
|
||||
</div>
|
||||
<div data-advanced data-services-nomatch
|
||||
class="hidden w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words">
|
||||
<div class="col-span-12 flex flex-col justify-center items-center h-fit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="mb-2 w-8 h-8 dark:stroke-white/90 stroke-gray-800">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
|
||||
</svg>
|
||||
<h5 class="font-bold dark:text-white/90 mx-2 text-gray-800">No settings match</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- new and edit form -->
|
||||
<form data-advanced data-services-modal-form
|
||||
class="w-full h-[90vh] overflow-auto flex flex-col justify-between"
|
||||
id="form-new"
|
||||
method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input type="hidden" id="operation" value="new" name="operation" />
|
||||
<input type="hidden" value="new" name="OLD_SERVER_NAME" />
|
||||
<input type="hidden" value="no" name="is_draft" />
|
||||
{% include "settings_plugins.html" %}
|
||||
<!-- action button -->
|
||||
<div class="w-full flex-col items-center justify-center flex mt-10">
|
||||
<div class="flex justify-center">
|
||||
<button data-services-modal-close
|
||||
type="button"
|
||||
class="dark:bg-slate-800 close-btn mb-4 mr-3 text-base">Close</button>
|
||||
<button data-services-modal-submit type="submit" class="mb-4 valid-btn">Save</button>
|
||||
</div>
|
||||
<!-- end action button-->
|
||||
<p data-services-modal-error-msg
|
||||
class="hidden text-red-500 font-bold dark:opacity-80 mb-0 text-center"></p>
|
||||
</div>
|
||||
</form>
|
||||
24
src/ui/templates/services_modal_delete.html
vendored
Normal file
24
src/ui/templates/services_modal_delete.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!-- delete form-->
|
||||
<form data-services-modal-form-delete
|
||||
class="w-full h-full flex flex-col justify-between"
|
||||
id="form-delete-server_name"
|
||||
method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||
<input type="hidden" value="delete" name="operation" />
|
||||
<input type="hidden" value="no" name="is_draft" />
|
||||
<input type="hidden" value="" name="SERVER_NAME" />
|
||||
<div class="flex justify-center">
|
||||
<p data-services-modal-text
|
||||
class="text-gray-700 dark:text-gray-300 mx-2 mb-2 mt-8 font-semibold font-sans leading-normal uppercase text-sm">
|
||||
</p>
|
||||
</div>
|
||||
<!-- action button -->
|
||||
<div class="w-full justify-center flex mt-10">
|
||||
<button data-services-modal-close
|
||||
type="button"
|
||||
class="dark:bg-slate-800 close-btn mb-4 mr-3 text-base">Close</button>
|
||||
<button type="submit" class="delete-btn mb-4 mr-3 text-base">Delete</button>
|
||||
</div>
|
||||
<!-- end action button-->
|
||||
</form>
|
||||
<!-- end delete form-->
|
||||
Loading…
Reference in a new issue