assetflow/src/frontend/partials/controls.eta.html

184 lines
7.9 KiB
HTML

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top navShadow" style="z-index: 999">
<div class="container-fluid">
<a class="navbar-brand user-select-none ms-2" onclick="doTheConfetti()" style="cursor: default">
<img alt="AssetFlow Logo" draggable="false" class="me-2 headLogo" src="/logo/Design_icon.svg"/> AssetFlow</a>
<button
class="navbar-toggler position-absolute d-md-none collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<form class="d-flex" role="search">
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#search_modal"><i class="bi bi-search"></i></button>
</form>
</div>
</div>
</nav>
<div class="modal" id="search_modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modalSearchBar">
<div class="input-group mb-3">
<form id="searchForm">
<input type="text" id="SearchBoxInput" class="form-control focus" placeholder="Start typing to search..." aria-label="Search" autocomplete="off">
</form>
</div>
</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="autocompletBody">
</div>
</div>
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="masterToast" style="z-index: 2000">
<div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastMainController">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="generalToast" style="z-index: 2000">
<div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-2 col-lg-2 d-md-block sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link <%= it.active == 'Dashboard' ? 'active' : ''%>" aria-current="page" href="/"> <i class="bi bi-house"></i> <strong>Dashboard</strong> </a>
</li>
<li class="nav-item">
<a class="nav-link <%= it.active == 'Items' ? 'active' : ''%>" href="/items"> <i class="bi bi-list-ul"></i> Items </a>
</li>
<!-- <li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Customers </a>
</li>
<li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Reports </a>
</li>
<li class="nav-item">
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Integrations </a>
</li> -->
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<a href="/manage/" class="nav-link"
>Settings
<span class="badge rounded-pill bg-danger invisible">
2
<span class="visually-hidden">changes or updates</span>
</span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<a class="nav-link <%= it.active == 'SETT_STORE' ? 'active' : ''%>" href="/manage/storages"
><i class="bi bi-box-seam"></i> Manage storages
<span
class="<%= it.active == 'SETT_STORE' ? 'active' : ''%>"
type="button"
onclick="return false"
data-bs-toggle="collapse"
data-bs-target="#collapseSettingsStorages"
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
aria-controls="collapseSettingsStorages">
<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsStorages"></i>
</span>
</a>
<div class="collapse <%= it.active == 'SETT_STORE' ? 'show' : ''%>" id="collapseSettingsStorages">
<a class="nav-link ms-4" href="/manage/storages#storage-loc-tab"><i class="bi bi-bookshelf"></i> Manage locations </a>
<a class="nav-link ms-4" href="/manage/storages#storage-unit-tab"><i class="bi bi-buildings"></i> Manage units </a>
</div>
<li class="nav-item">
<a class="nav-link <%= it.active == 'SETT_CAT' ? 'active' : ''%>" href="/manage/categories"><i class="bi bi-tag"></i> Manage categories </a>
</li>
<a class="nav-link">
<span
class="<%= it.active == 'SETT_IMPORT' ? 'active' : ''%>"
type="button"
onclick="return false"
data-bs-toggle="collapse"
data-bs-target="#collapseSettingsImport"
aria-expanded="<%= it.active.includes('SETT_IMPORT') ? 'true' : 'false'%>"
aria-controls="collapseSettingsImport">
<i class="bi bi-box-seam"></i> Import
<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsImport"></i>
</span>
</a>
<div class="collapse <%= it.active.includes('SETT_IMPORT') ? 'show' : ''%>" id="collapseSettingsImport">
<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_CSV' ? 'active' : ''%>" href="/manage/import/csv"><i class="bi bi-filetype-csv"></i> CSV Import </a>
<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a>
</div>
</ul>
</div>
<!-- Align the mode picker at the bottom of the navbar -->
<ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100">
<div class="input-group mb-3 justify-content-center w-100">
<label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label>
<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" />
<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked />
<label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label>
<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off" />
<label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label>
</div>
<script>
const modeFromStorage = localStorage.getItem('bs.theme') ?? 'auto';
const modeLight = document.getElementById('mode_light');
const modeAuto = document.getElementById('mode_auto');
const modeDark = document.getElementById('mode_dark');
if (modeFromStorage === 'light') {
modeLight.checked = true;
} else if (modeFromStorage === 'dark') {
modeDark.checked = true;
} else {
modeAuto.checked = true;
}
modeLight.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'light');
updateColorMode();
//document.documentElement.setAttribute('data-bs-theme', 'light');
});
modeAuto.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'auto');
updateColorMode();
//document.documentElement.setAttribute('data-bs-theme', 'auto');
});
modeDark.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'dark');
updateColorMode();
//document.documentElement.setAttribute('data-bs-theme', 'dark');
});
</script>
</ul>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">
<!-- The main tag needs to be left open! -->