Project-Name-Here/hydrationhub
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend stuff

Browse Source
This commit is contained in:
Leon
2025-02-24 22:55:28 +01:00
parent 611a4a0ead
commit 45cd5b10e6
17 changed files with 330 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
views/contacts.eta
View File

@ -1,119 +0,0 @@
<%~ include("partials/base_head.eta", {"title": "Kontakte"}) %>
<%~ include("partials/nav.eta") %>
<section class="hero is-primary" id="heroStatus">
<div class="hero-body">
<p class="title" data-tK="start-hero-header-welcome">Kontaktverwaltung</p>
<p class="subtitle" data-tK="start-hero-header-subtitle-default" id="heroExplainer">Erklärungstext</p>
</div>
</section>
<section class="section">
<nav class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Kontakte</p>
<p class="title"><span data-dataSource="AlertContacts" data-dataAction="COUNT" class="is-skeleton">Load.</span></p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading"><button class="js-modal-trigger button" data-target="modal-js-example">
Neuen Konakt anlegen
</button></p>
</div>
</div>
</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="AlertContacts">
<h2 class="title">Neuer Kontakt</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">Telefonummer</label>
<div class="control has-icons-left">
<input class="input" type="text" placeholder="+49 1234 5678912" value="" name="phone">
<span class="icon is-small is-left">
<i class="bi bi-telephone-fill"></i>
</span>
</div>
</div>
<div class="field">
<label class="label">Anmerkung</label>
<div class="control has-icons-left">
<input class="input" type="text" placeholder="" value="" name="comment">
<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>
<section class="section">
<h1 class="title" data-tK="start-recent-header">Kontaktübersicht</h1>
<input class="input" type="text" data-searchTargetId="contactTable" placeholder="Search..." />
<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="AlertContacts" id="contactTable" data-pageSize="5">
<thead>
<tr>
<th data-dataCol = "id"><abbr title="Position">Pos</abbr></th>
<th data-dataCol = "name">Name</th>
<th data-dataCol = "phone">Telefonnummer</th>
<th data-dataCol = "comment">Kommentar</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="contactTable">
<ul class="pagination-list">
</ul>
</nav>
</section>
<%~ include("partials/footer.eta") %>
<%~ include("partials/base_foot.eta") %>

2
views/index.eta
View File

@ -1,5 +1,5 @@
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
<%~ include("partials/nav.eta") %>
<!--<%~ include("partials/nav.eta") %>-->
<section class="hero is-primary">
<div class="hero-body">

2
views/partials/base_foot.eta
View File

@ -1,4 +1,2 @@
<script src="/static/apiWrapper.js"></script>
<script src="/static/pageDriver.js"></script>
</body>
</html>

2
views/partials/footer.eta
View File

@ -7,3 +7,5 @@
</p>
</div>
</footer>
<script src="/static/apiWrapper.js"></script>
<script src="/static/pageDriver.js"></script>

8
views/partials/nav.eta
View File

@ -18,9 +18,11 @@
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">Home</a>
<a class="navbar-item" href="/dbTest">API Integration <span class="tag is-info">Dev</span></a>
<a class="navbar-item" href="/contact">Kontakte <span class="tag is-primary">Neu!</span></a>
<a class="navbar-item" href="/">Screensaver</a>
<a class="navbar-item" href="/user_select">user_select</a>
<a class="navbar-item" href="/product_select">product_select</a>
<a class="navbar-item" href="/test">Test <span class="tag is-info">Dev</span></a>
<!--<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">

38
views/product_select.eta Normal file
View File

@ -0,0 +1,38 @@
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
<%~ include("partials/nav.eta") %>
<section class="section">
<div class="container columns" id="mainSelect">
</div>
</section>
<hidden>
<!-- Base Button -->
<div class="column" id="baseStruct">
<div class="card" >
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="card-content">
<p class="title is-4">CocaCola lol</p>
<p class="subtitle is-6">0123456789</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span> 9.99€ </span>
</p>
</footer>
</div>
</div>
</hidden>
<%~ include("partials/footer.eta") %>
<script src="/static/pages/product_select.js"></script>
<%~ include("partials/base_foot.eta") %>

0
views/lockscreen.eta → views/screensaver.eta
View File

97
views/user_select.eta Normal file
View File

@ -0,0 +1,97 @@
<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
<%~ include("partials/nav.eta") %>
<section class="section buttons container" id="mainSelect">
</section>
<hidden>
<!-- Base Button -->
<button class="button is-link is-large m-2" id="baseStruct">Username</button>
</hidden>
<div class="modal" id="pinPadModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Bitte PIN eingeben</p>
<div class="notification is-danger is-hidden" id="pinError">
<button class="delete"></button>
Ein fehlerhafter PIN wurde eingegeben.
</div>
</header>
<section class="modal-card-body">
<!--
<input class="input" type="password" placeholder="1234" id="pinInput" maxlength="4" />
-->
<!-- Use 4 fields for the pin, similar to a 2FA fields -->
<div class="field has-addons is-centered">
<div class="control">
<input class="input is-large has-text-centered" type="password" placeholder="1" id="pinInput1" maxlength="1" />
</div>
<div class="control">
<input class="input is-large has-text-centered" type="password" placeholder="2" id="pinInput2" maxlength="1" />
</div>
<div class="control">
<input class="input is-large has-text-centered" type="password" placeholder="3" id="pinInput3" maxlength="1" />
</div>
<div class="control">
<input class="input is-large has-text-centered" type="password" placeholder="4" id="pinInput4" maxlength="1" />
</div>
</div>
<section class="section buttons container is-centered are-centered" id="numpad">
<!-- Num pad with 3 keys per row -->
<div class="columns is-grouped">
<div class="column">
<button class="button is-link is-large m-2">1</button>
</div>
<div class="column">
<button class="button is-link is-large m-2">2</button>
</div>
<div class="column">
<button class="button is-link is-large m-2">3</button>
</div>
</div>
<div class="columns is-grouped">
<div class="column">
<button class="button is-link is-large m-2">4</button>
</div>
<div class="column">
<button class="button is-link is-large m-2">5</button>
</div>
<div class="column">
<button class="button is-link is-large m-2">6</button>
</div>
</div>
<div class="columns is-grouped">
<div class="column">
<button class="button is-link is-large m-2">7</button>
</div>
<div class="column">
<button class="button is-link is-large m-2">8</button>
</div>
<div class="column">
<button class="button is-link is-large m-2">9</button>
</div>
</div>
<div class="columns is-grouped">
<div class="column">
<button class="button is-link is-large m-2">0</button>
</div>
<div class="column">
<button class="button is-warning is-large m-2"><i class="bi bi-backspace-fill"></i></button>
</div>
<div class="column">
<button class="button is-success is-large m-2"><i class="bi bi-check"></i></button>
</div>
</div>
</section>
</section>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<%~ include("partials/footer.eta") %>
<script src="/static/pages/user_select.js"></script>
<%~ include("partials/base_foot.eta") %>