implemented ui functions for managing products, uploading images and editiing users
This commit is contained in:
		
							
								
								
									
										24
									
								
								views/admin/dashboard.eta
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								views/admin/dashboard.eta
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,24 @@
 | 
			
		||||
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
 | 
			
		||||
<%~ include("partials/nav.eta") %>
 | 
			
		||||
 | 
			
		||||
<section class="section container" id="mainSelect">
 | 
			
		||||
<h1 class="title">Administration</h1>
 | 
			
		||||
<!-- Big buttons linking to the different admin pages (Produkte, Benutzer, Bericht) -->
 | 
			
		||||
 | 
			
		||||
<div class="columns is-centered">
 | 
			
		||||
    <div class="column is-4">
 | 
			
		||||
	<a href="/admin/products" class="button is-large is-fullwidth is-primary">Produkte</a>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="column is-4">
 | 
			
		||||
	<a href="/admin/users" class="button is-large is-fullwidth is-primary">Benutzer</a>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="column is-4">
 | 
			
		||||
	<a href="/admin/reports" class="button is-large is-fullwidth is-primary">Berichte</a>
 | 
			
		||||
    </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
</section>
 | 
			
		||||
 | 
			
		||||
<%~ include("partials/footer.eta") %>
 | 
			
		||||
<!-- <script src="/static/pages/admin_.js"></script>-->
 | 
			
		||||
<%~ include("partials/base_foot.eta") %>
 | 
			
		||||
							
								
								
									
										153
									
								
								views/admin/products.eta
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										153
									
								
								views/admin/products.eta
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,153 @@
 | 
			
		||||
<%~ include("partials/base_head.eta", {"title": "Admin - Benutzer"}) %>
 | 
			
		||||
<%~ include("partials/nav.eta") %>
 | 
			
		||||
 | 
			
		||||
<section class="section container" id="mainSelect">
 | 
			
		||||
	<h1 class="title">Produktverwaltung</h1>
 | 
			
		||||
	<p class="heading"><button class="js-modal-trigger button" data-target="modal-js-example">
 | 
			
		||||
				Neues Produkt anlegen
 | 
			
		||||
	</button></p>
 | 
			
		||||
 | 
			
		||||
		<input class="input" type="text"  data-searchTargetId="productTable" placeholder="Nach Produkt suchen.." />
 | 
			
		||||
	<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="products" id="productTable" data-pageSize="10">
 | 
			
		||||
		<thead>
 | 
			
		||||
			<tr>
 | 
			
		||||
				<th data-dataCol = "id">Id</th>
 | 
			
		||||
				<th data-dataCol = "name">Name</th>
 | 
			
		||||
				<th data-dataCol = "gtin">GTIN</th>
 | 
			
		||||
				<th data-dataCol = "price">Preis</th>
 | 
			
		||||
				<th data-dataCol = "stock">Lagermenge</th>
 | 
			
		||||
				<th data-dataCol = "visible" data-type="bool">Sichtbarkeit</th>
 | 
			
		||||
				<th data-dataCol = "FUNC:INLINE" data-ColHandler=handleImagePresence>Bild hinterlegt</th>
 | 
			
		||||
				<th data-fnc="actions" data-actions="edit,delete">Aktionen</th>
 | 
			
		||||
			</tr>
 | 
			
		||||
		</thead>
 | 
			
		||||
		<tbody>
 | 
			
		||||
		</tbody>
 | 
			
		||||
		
 | 
			
		||||
	</table>
 | 
			
		||||
	<nav class="pagination is-hidden" role="navigation" aria-label="pagination" data-targetTable="productTable">
 | 
			
		||||
		<ul class="pagination-list">
 | 
			
		||||
			
 | 
			
		||||
		</ul>
 | 
			
		||||
		</nav>
 | 
			
		||||
</section>
 | 
			
		||||
 | 
			
		||||
<!-- Image upload modal -->
 | 
			
		||||
<div id="imageModal" class="modal">
 | 
			
		||||
	<div class="modal-background"></div>
 | 
			
		||||
 | 
			
		||||
	<div class="modal-content">
 | 
			
		||||
		<div class="box">
 | 
			
		||||
			<form id="imgUploadForm" enctype="multipart/form-data" method="post" action="/api/v1/image">
 | 
			
		||||
				<h2 class="title">Bild hochladen</h1>
 | 
			
		||||
				<div class="file has-name">
 | 
			
		||||
					<label class="file-label">
 | 
			
		||||
						<input id="imgUpload" class="file-input" type="file" name="image" />
 | 
			
		||||
						<span class="file-cta">
 | 
			
		||||
							<span class="file-icon">
 | 
			
		||||
								<i class="fas fa-upload"></i>
 | 
			
		||||
							</span>
 | 
			
		||||
						<span class="file-label"> Datei wählen… </span>
 | 
			
		||||
					</span>
 | 
			
		||||
					<span class="file-name" id="fileName"></span>
 | 
			
		||||
					</label>
 | 
			
		||||
				</div>
 | 
			
		||||
				<br>
 | 
			
		||||
				
 | 
			
		||||
			</form>
 | 
			
		||||
			<div class="control">
 | 
			
		||||
				<input type="button" class="button is-link" value="Hochladen" onclick="silentFormSubmit()">
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<!-- TODO: Mark required fields as required; add handling for validation -->
 | 
			
		||||
<div id="modal-js-example" class="modal">
 | 
			
		||||
	<div class="modal-background"></div>
 | 
			
		||||
 | 
			
		||||
	<div class="modal-content">
 | 
			
		||||
		<div class="box entryPhase is-hidden">
 | 
			
		||||
			<h2 class="title">Neuer Kontakt</h1>
 | 
			
		||||
 | 
			
		||||
				<i class="bi bi-arrow-clockwise title"></i>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div class="box entryPhase">
 | 
			
		||||
		
 | 
			
		||||
			<form data-targetTable="products">
 | 
			
		||||
			<h2 class="title">Neuer Benutzer</h1>
 | 
			
		||||
			<div class="field">
 | 
			
		||||
				<label class="label">Bezeichner</label>
 | 
			
		||||
				<div class="control has-icons-left">
 | 
			
		||||
					<input class="input" type="text" placeholder="John Doe" value="" name="name">
 | 
			
		||||
					<span class="icon is-small is-left">
 | 
			
		||||
					<i class="bi bi-file-earmark-person-fill"></i>
 | 
			
		||||
					</span>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="field">
 | 
			
		||||
			<label class="label">GTIN</label>
 | 
			
		||||
			<div class="control has-icons-left">
 | 
			
		||||
				<input class="input" type="number" placeholder="" value="" name="gtin">
 | 
			
		||||
				<span class="icon is-small is-left">
 | 
			
		||||
				<i class="bi bi-upc"></i>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="field">
 | 
			
		||||
			<label class="label">Lagermenge</label>
 | 
			
		||||
			<div class="control has-icons-left">
 | 
			
		||||
				<input class="input" type="number" placeholder="" value="" name="stock">
 | 
			
		||||
				<span class="icon is-small is-left">
 | 
			
		||||
				<i class="bi bi-archive-fill"></i>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="field">
 | 
			
		||||
			<label class="label">Preis</label>
 | 
			
		||||
			<div class="control has-icons-left">
 | 
			
		||||
				<input class="input" type="number" placeholder="" value="" step=0.01 name="price">
 | 
			
		||||
				<span class="icon is-small is-left">
 | 
			
		||||
				<i class="bi bi-currency-euro"></i>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="field">
 | 
			
		||||
			<div class="control">
 | 
			
		||||
			<label class="checkbox">
 | 
			
		||||
			<input type="checkbox" value="" name="visible">
 | 
			
		||||
			In der Liste anzeigen</a>
 | 
			
		||||
			</label>
 | 
			
		||||
				
 | 
			
		||||
			</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
		
 | 
			
		||||
 | 
			
		||||
			<div class="field is-grouped">
 | 
			
		||||
			<div class="control">
 | 
			
		||||
				<input type="submit" class="button is-link" value="Save" data-actionBtn="save">
 | 
			
		||||
			</div>
 | 
			
		||||
			<!--<div class="control">
 | 
			
		||||
				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
 | 
			
		||||
			</div>-->
 | 
			
		||||
			</div>
 | 
			
		||||
		</form>
 | 
			
		||||
			
 | 
			
		||||
			
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
 | 
			
		||||
	<button class="modal-close is-large" aria-label="close"></button>
 | 
			
		||||
	</div>
 | 
			
		||||
 | 
			
		||||
<script src="/static/pages/admin_products.js"></script>
 | 
			
		||||
<%~ include("partials/footer.eta") %>
 | 
			
		||||
<%~ include("partials/base_foot.eta") %>
 | 
			
		||||
							
								
								
									
										96
									
								
								views/admin/users.eta
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										96
									
								
								views/admin/users.eta
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,96 @@
 | 
			
		||||
<%~ include("partials/base_head.eta", {"title": "Admin - Benutzer"}) %>
 | 
			
		||||
<%~ include("partials/nav.eta") %>
 | 
			
		||||
 | 
			
		||||
<section class="section container" id="mainSelect">
 | 
			
		||||
	<h1 class="title">Benutzerverwaltung</h1>
 | 
			
		||||
	<p class="heading"><button class="js-modal-trigger button" data-target="modal-js-example">
 | 
			
		||||
				Neuen Konakt anlegen
 | 
			
		||||
	</button></p>
 | 
			
		||||
	<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="user" id="userTable" data-pageSize="10">
 | 
			
		||||
		<thead>
 | 
			
		||||
			<tr>
 | 
			
		||||
				<th data-dataCol = "id">Id</th>
 | 
			
		||||
				<th data-dataCol = "name">Name</th>
 | 
			
		||||
				<th data-dataCol = "email">E-Mail</th>
 | 
			
		||||
				<th data-dataCol = "code" data-type="bool" data-edit-transfer="disable">Code</th>
 | 
			
		||||
				<th data-fnc="actions" data-actions="edit,delete">Aktionen</th>
 | 
			
		||||
			</tr>
 | 
			
		||||
		</thead>
 | 
			
		||||
		<tbody>
 | 
			
		||||
		</tbody>
 | 
			
		||||
		
 | 
			
		||||
	</table>
 | 
			
		||||
	<nav class="pagination is-hidden" role="navigation" aria-label="pagination" data-targetTable="userTable">
 | 
			
		||||
		<ul class="pagination-list">
 | 
			
		||||
			
 | 
			
		||||
		</ul>
 | 
			
		||||
		</nav>
 | 
			
		||||
</section>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<!-- TODO: Mark required fields as required; add handling for validation -->
 | 
			
		||||
<div id="modal-js-example" class="modal">
 | 
			
		||||
	<div class="modal-background"></div>
 | 
			
		||||
 | 
			
		||||
	<div class="modal-content">
 | 
			
		||||
		<div class="box entryPhase is-hidden">
 | 
			
		||||
			<h2 class="title">Neuer Kontakt</h1>
 | 
			
		||||
 | 
			
		||||
				<i class="bi bi-arrow-clockwise title"></i>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div class="box entryPhase">
 | 
			
		||||
		
 | 
			
		||||
			<form data-targetTable="user">
 | 
			
		||||
			<h2 class="title">Neuer Benutzer</h1>
 | 
			
		||||
			<div class="field">
 | 
			
		||||
				<label class="label">Name</label>
 | 
			
		||||
				<div class="control has-icons-left">
 | 
			
		||||
					<input class="input" type="text" placeholder="John Doe" value="" name="name">
 | 
			
		||||
					<span class="icon is-small is-left">
 | 
			
		||||
					<i class="bi bi-file-earmark-person-fill"></i>
 | 
			
		||||
					</span>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="field">
 | 
			
		||||
			<label class="label">E-Mail</label>
 | 
			
		||||
			<div class="control has-icons-left">
 | 
			
		||||
				<input class="input" type="email" placeholder="test@example.org" value="" name="email">
 | 
			
		||||
				<span class="icon is-small is-left">
 | 
			
		||||
				<i class="bi bi-envelope"></i>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="field">
 | 
			
		||||
			<label class="label">Pin</label>
 | 
			
		||||
			<div class="control has-icons-left">
 | 
			
		||||
				<input class="input" type="text" placeholder="" value="" name="code">
 | 
			
		||||
				<span class="icon is-small is-left">
 | 
			
		||||
				<i class="bi bi-chat-fill"></i>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<br>
 | 
			
		||||
 | 
			
		||||
			<div class="field is-grouped">
 | 
			
		||||
			<div class="control">
 | 
			
		||||
				<input type="submit" class="button is-link" value="Save" data-actionBtn="save">
 | 
			
		||||
			</div>
 | 
			
		||||
			<!--<div class="control">
 | 
			
		||||
				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
 | 
			
		||||
			</div>-->
 | 
			
		||||
			</div>
 | 
			
		||||
		</form>
 | 
			
		||||
			
 | 
			
		||||
			
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
 | 
			
		||||
	<button class="modal-close is-large" aria-label="close"></button>
 | 
			
		||||
	</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<%~ include("partials/footer.eta") %>
 | 
			
		||||
<script src="/static/pages/admin_users.js"></script>
 | 
			
		||||
<%~ include("partials/base_foot.eta") %>
 | 
			
		||||
		Reference in New Issue
	
	Block a user