- added toggel for dark/auto/white mode
- added color
This commit is contained in:
		@@ -42,7 +42,16 @@
 | 
			
		||||
			<tr>
 | 
			
		||||
				<th scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.SKU %></th>
 | 
			
		||||
				<td><%= user.name %></td>
 | 
			
		||||
				<td><span class="badge text-bg-success"><%= user.status %></span></td>
 | 
			
		||||
				<% if(user.status == "normal") { %>
 | 
			
		||||
 | 
			
		||||
					<td><span class="badge text-bg-success"><%= user.status %></span></td>
 | 
			
		||||
					<% } else if(user.status == "stolen") { %>
 | 
			
		||||
					<td><span class="badge text-bg-danger"><%= user.status %></span></td>
 | 
			
		||||
					<% } else if(user.status == "lost") { %>
 | 
			
		||||
						<td><span class="badge text-bg-warning"><%= user.status %></span></td>
 | 
			
		||||
					<% } else if(user.status == "borrowed") { %>
 | 
			
		||||
							<td><span class="badge text-bg-info"><%= user.status %></span></td>
 | 
			
		||||
					<% } %>
 | 
			
		||||
				<!--<td><a href="#" class="btn btn-primary">Edit</a></td>-->
 | 
			
		||||
			</tr>
 | 
			
		||||
			<% }) %>
 | 
			
		||||
 
 | 
			
		||||
@@ -24,7 +24,16 @@
 | 
			
		||||
			<tr>
 | 
			
		||||
				<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.SKU %></td>
 | 
			
		||||
				<td><%= user.name %></td>
 | 
			
		||||
				<% if(user.status == "normal") { %>
 | 
			
		||||
 | 
			
		||||
				<td><span class="badge text-bg-success"><%= user.status %></span></td>
 | 
			
		||||
				<% } else if(user.status == "stolen") { %>
 | 
			
		||||
				<td><span class="badge text-bg-danger"><%= user.status %></span></td>
 | 
			
		||||
				<% } else if(user.status == "lost") { %>
 | 
			
		||||
					<td><span class="badge text-bg-warning"><%= user.status %></span></td>
 | 
			
		||||
				<% } else if(user.status == "borrowed") { %>
 | 
			
		||||
						<td><span class="badge text-bg-info"><%= user.status %></span></td>
 | 
			
		||||
				<% } %>
 | 
			
		||||
				<td><a href="#" class="btn btn-primary">Edit</a></td>
 | 
			
		||||
			</tr>
 | 
			
		||||
			<% }) %>
 | 
			
		||||
 
 | 
			
		||||
@@ -159,7 +159,50 @@
 | 
			
		||||
						<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');
 | 
			
		||||
						document.documentElement.setAttribute('data-bs-theme', 'light');
 | 
			
		||||
					});
 | 
			
		||||
					modeAuto.addEventListener('click', () => {
 | 
			
		||||
						localStorage.setItem('bs.theme', 'auto');
 | 
			
		||||
						document.documentElement.setAttribute('data-bs-theme', 'auto');
 | 
			
		||||
					});
 | 
			
		||||
					modeDark.addEventListener('click', () => {
 | 
			
		||||
						localStorage.setItem('bs.theme', 'dark');
 | 
			
		||||
						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%">
 | 
			
		||||
 
 | 
			
		||||
@@ -6,6 +6,16 @@
 | 
			
		||||
			<p><strong>Category:</strong> <%= it.category.name %></p>
 | 
			
		||||
			<p><strong>Amount:</strong> <%= it.amount %></p>
 | 
			
		||||
			<p><strong>SKU:</strong> <%= it.SKU %></p>
 | 
			
		||||
			<p><strong>Status: </strong><% if(it.status == "normal") { %>
 | 
			
		||||
 | 
			
		||||
<span class="badge text-bg-success"><%= it.status %></span>
 | 
			
		||||
				<% } else if(it.status == "stolen") { %>
 | 
			
		||||
				<span class="badge text-bg-danger"><%= it.status %></span>
 | 
			
		||||
				<% } else if(it.status == "lost") { %>
 | 
			
		||||
					<span class="badge text-bg-warning"><%= it.status %></span>
 | 
			
		||||
				<% } else if(it.status == "borrowed") { %>
 | 
			
		||||
						<span class="badge text-bg-info"><%= it.status %></span>
 | 
			
		||||
				<% } %></p>
 | 
			
		||||
		</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user