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") %>
|
||||
@ -33,15 +33,43 @@
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<% /* <div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light">Log in</a>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item is-hidden" id="showOnLogin">
|
||||
<strong>Hey, <span id="nav_username"></span></strong>
|
||||
<button class="button" onclick="window.location='/pay_up'" >Zur Abrechnung</button>
|
||||
</div>
|
||||
</div> */ %>
|
||||
<div class="navbar-item is-hidden" id="onlyShowRoot">
|
||||
<button class="button" onclick="window.location='/admin/'" >Zur Administration</button>
|
||||
</div>
|
||||
<div class="navbar-item is-hidden" id="onlyShowAdmin">
|
||||
<button class="button" onclick="window.location='/admin/'" >Zur Administration</button>
|
||||
<button class="button" onclick="window.location='/'" >Abmelden</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Check if ?user is set
|
||||
if (window.location.search.includes('user')) {
|
||||
// Show the sign up button
|
||||
document.querySelector('#showOnLogin').classList.remove('is-hidden');
|
||||
// Get the username from the cookie
|
||||
username = document.cookie.split('; ').find(row => row.startsWith('name')).split('=')[1];
|
||||
// Set the username in the nav
|
||||
document.getElementById('nav_username').innerText = username;
|
||||
}
|
||||
|
||||
// Check if /user_select is the current page
|
||||
if (window.location.pathname == '/user_select') {
|
||||
// Show the sign up button
|
||||
document.querySelector('#onlyShowRoot').classList.remove('is-hidden');
|
||||
}
|
||||
|
||||
// If admin is contained in url
|
||||
if (window.location.pathname.includes('admin')) {
|
||||
// Show the sign up button
|
||||
document.querySelector('#onlyShowAdmin').classList.remove('is-hidden');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
32
views/payup.eta
Normal file
32
views/payup.eta
Normal file
@ -0,0 +1,32 @@
|
||||
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
|
||||
<%~ include("partials/nav.eta") %>
|
||||
|
||||
<section class="section container" id="mainSelect">
|
||||
<h1 class="title">Abrechnung</h1>
|
||||
<h2 class="subtitle">Ausstehend</h2>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><abbr title="Bezeichner">Bez.</abbr></th>
|
||||
<th>Preis</th>
|
||||
<th></th>
|
||||
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th id="table-sum"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody id="table-content">
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<%~ include("partials/footer.eta") %>
|
||||
<script src="/static/pages/payup.js"></script>
|
||||
<%~ include("partials/base_foot.eta") %>
|
||||
@ -1,6 +1,7 @@
|
||||
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
|
||||
<%~ include("partials/nav.eta") %>
|
||||
|
||||
<input id="scannerField" type="text"/>
|
||||
<section class="section main-content">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
@ -11,6 +12,27 @@
|
||||
<!-- Empty sidebar on the right -->
|
||||
<div class="column is-one-quarter">
|
||||
<h2 class="title is-4" >Ausgewählte Produkte</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><abbr title="Bezeichner">Bez.</abbr></th>
|
||||
<th>Preis</th>
|
||||
<th></th>
|
||||
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th id="TableSum"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody id="selectedProducts">
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="button is-primary" id="checkout">Zur Kasse</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,6 +65,57 @@
|
||||
</div>
|
||||
</hidden>
|
||||
|
||||
<!-- Confirmation modal -->
|
||||
<div class="modal" id="checkoutModal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Bestellung abschließen</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
Sind Sie sicher, dass Sie die ausgewählten so Produkte bestellen möchten?
|
||||
</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bezeichner</th>
|
||||
<th>Preis</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th id="ModalSum"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody id="selectedProductsModal">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success" id="confirmCheckout">Bestellen</button>
|
||||
<button class="button" id="cancelCheckout">Abbrechen</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading modal -->
|
||||
<div class="modal" id="loadingModal" data-dissmiss="false">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<p>Bitte warten...</p>
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<%~ include("partials/footer.eta") %>
|
||||
<script src="/static/pages/product_select.js"></script>
|
||||
<%~ include("partials/base_foot.eta") %>
|
||||
@ -1,5 +1,4 @@
|
||||
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
|
||||
<%~ include("partials/nav.eta") %>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/lockscreen.css">
|
||||
|
||||
@ -14,5 +13,4 @@
|
||||
|
||||
<script src="/static/js/lockscreenBgHandler.js"></script>
|
||||
|
||||
<%~ include("partials/footer.eta") %>
|
||||
<%~ include("partials/base_foot.eta") %>
|
||||
|
||||
Reference in New Issue
Block a user