wes
/
inventory-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to bootstrap css

Browse Source
demo-mode
Wes Holland 12 months ago
parent c3d3eecf4d
commit ba0a6c88fb
12 changed files with 171 additions and 136 deletions
Show Stats Download Patch File Download Diff File

20
templates/adjustment-new-stock-form.html
Unescape View File

@ -1,28 +1,30 @@
<form hx-post="/item/{{item_id}}/adjustment/new-stock" hx-target="this" hx-swap="outerHTML" > <form hx-post="/item/{{item_id}}/adjustment/new-stock" hx-target="this" hx-swap="outerHTML" >
<div> <div class="mb-3">
<label for="amount">Amount</label> <label for="amount" class="form-label">Amount</label>
<input id="amount" name="amount" type="number" required <input id="amount" class="form-control" name="amount" type="number" required
{% if !amount_error.is_empty() -%} {% if !amount_error.is_empty() -%}
aria-invalid="true" aria-invalid="true"
aria-describedby="invalid-amount" aria-describedby="invalid-amount"
{% endif -%} {% endif -%}
/> />
{% if !amount_error.is_empty() -%} {% if !amount_error.is_empty() -%}
<small id="invalid-amount">{{ amount_error }}</small> <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
{% endif -%} {% endif -%}
</div> </div>
<div> <div class="mb-3">
<label for="price">Price</label> <label for="price" class="form-label">Price</label>
<input id="price" name="price" required <input id="price" class="form-control" name="price" required
{% if !price_error.is_empty() -%} {% if !price_error.is_empty() -%}
aria-invalid="true" aria-invalid="true"
aria-describedby="invalid-price" aria-describedby="invalid-price"
{% endif -%} {% endif -%}
/> />
{% if !price_error.is_empty() -%} {% if !price_error.is_empty() -%}
<small id="invalid-price">{{ price_error }}</small> <small id="invalid-price" class="invalid-feedback">{{ price_error }}</small>
{% endif -%} {% endif -%}
</div> </div>
<button class="btn primary">Add Stock</button> <div class="mb-3">
<button class="btn btn-primary">Add Stock</button>
</div>
</form> </form>

12
templates/adjustment-sale-form.html
Unescape View File

@ -1,16 +1,18 @@
<form hx-post="/item/{{item_id}}/adjustment/sale" hx-target="this" hx-swap="outerHTML" > <form hx-post="/item/{{item_id}}/adjustment/sale" hx-target="this" hx-swap="outerHTML" >
<div> <div class="mb-3">
<label for="amount">Amount</label> <label for="amount" class="form-label">Amount</label>
<input id="amount" name="amount" type="number" step="0.01" required <input id="amount" class="form-control" name="amount" type="number" step="0.01" required
{% if !amount_error.is_empty() -%} {% if !amount_error.is_empty() -%}
aria-invalid="true" aria-invalid="true"
aria-describedby="invalid-amount" aria-describedby="invalid-amount"
{% endif -%} {% endif -%}
/> />
{% if !amount_error.is_empty() -%} {% if !amount_error.is_empty() -%}
<small id="invalid-amount">{{ amount_error }}</small> <small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
{% endif -%} {% endif -%}
</div> </div>
<button class="btn primary">Record Sale</button> <div class="mb-3">
<button class="btn btn-primary">Record Sale</button>
</div>
</form> </form>

2
templates/adjustments-table-fragment.html
Unescape View File

@ -1,5 +1,5 @@
<table hx-get="/item/{{item_id}}/adjustments" hx-trigger="new-adjustment from:body" hx-swap="outerHTML"> <table class="table" hx-get="/item/{{item_id}}/adjustments" hx-trigger="new-adjustment from:body" hx-swap="outerHTML">
<thead> <thead>
<tr> <tr>
<th scope="col">Date</th> <th scope="col">Date</th>

31
templates/catalog.html
Unescape View File

@ -4,21 +4,24 @@
{% block content %} {% block content %}
<p> <div class="container">
<input id="search" type="search" name="q" <p class="container d-flex justify-content-center">
placeholder="Filter" <input id="search" class="form-control"
aria-label="Search" type="search" name="q"
value='{{ query.search.as_deref().unwrap_or("") }}' placeholder="Filter"
hx-get="/items" aria-label="Search"
hx-trigger="search, keyup delay:500ms changed" value='{{ query.search.as_deref().unwrap_or("") }}'
hx-target="#items" hx-get="/items"
hx-push-url="true" hx-trigger="search, keyup delay:500ms changed"
/> hx-target="#items"
</p> hx-push-url="true"
/>
</p>
<div id="items" class="container"> <div id="items" class="container">
{% include "catalog_item_fragment.html" %} {% include "catalog_item_fragment.html" %}
</div> </div>
</div>
{% endblock %} {% endblock %}

19
templates/catalog_item_fragment.html
Unescape View File

@ -1,8 +1,11 @@
<div class="card">
{% for item in items %} <ul class="list-group list-group-flush">
<article id="item-{{item.id}}-card"> {% for item in items %}
<div class="grid"> <li id="item-{{item.id}}-entry" class="list-group-item">
<div><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div> <div class="row">
</div> <div class="col-6"><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
</article> </div>
{% endfor %} </li>
{% endfor %}
</ul>
</div>

53
templates/history.html
Unescape View File

@ -6,34 +6,33 @@
<h1>Audit Log (Coming soon)</h1> <h1>Audit Log (Coming soon)</h1>
<form action="/history" hx-get="/history" hx-trigger="change" hx-target="#items"> <section class="container mb-4">
<div class="grid"> <form action="/history" hx-get="/history" hx-trigger="change" hx-target="#items">
<fieldset> <div class="row">
<label for="start-date">Start Date</label> <div class="col-sm-2">
<input type="date" id="start-date" name="start-date" value="{{ start_date }}" /> <label for="start-date" class="form-label">Start Date</label>
</fieldset> <input type="date" id="start-date" name="start-date" value="{{ start_date }}" class="form-control" />
<fieldset> </div>
<label for="start-time">Start Time</label> <div class="col-sm-2">
<input type="time" id="start-time" name="start-time" value="{{ start_time }}"/> <label for="start-time" class="form-label">Start Time</label>
<small>Timezone {{ time_zone }}</small> <input type="time" id="start-time" name="start-time" value="{{ start_time }}" class="form-control"/>
</fieldset> <small class="form-text">Timezone {{ time_zone }}</small>
</div> </div>
<div class="col-sm-2">
<label for="end-date" class="form-label">End Date</label>
<input type="date" id="end-date" name="end-date" value="{{ end_date }}" class="form-control"/>
</div>
<div class="col-sm-2">
<label for="end-time" class="form-label">End Time</label>
<input type="time" id="end-time" name="end-time" value="{{ end_time }}" class="form-control"/>
<small class="form-text">Timezone {{ time_zone }}</small>
</div>
</div>
</form>
</section>
<div class="grid"> <section id="items" class="container">
<fieldset>
<label for="end-date">End Date</label>
<input type="date" id="end-date" name="end-date" value="{{ end_date }}"/>
</fieldset>
<fieldset>
<label for="end-time">End Time</label>
<input type="time" id="end-time" name="end-time" value="{{ end_time }}"/>
<small>Timezone {{ time_zone }}</small>
</fieldset>
</div>
</form>
<div id="items" class="container">
{% include "history_item_fragment.html" %} {% include "history_item_fragment.html" %}
</div> </section>
{% endblock %} {% endblock %}

38
templates/history_item_fragment.html
Unescape View File

@ -1,18 +1,22 @@
{% for item in items %} <div class="card">
<article> <ul class="list-group list-group-flush">
<div class="grid"> {% for item in items %}
<p>{{ item.create_date }}</p> <li class="list-group-item">
<p>{{ item.item_name }}</p> <div class="row">
<p>{{ item.user_name }}</p> <p class="col">{{ item.create_date }}</p>
<p> <p class="col">{{ item.item_name }}</p>
{% match item.item_type %} <p class="col">{{ item.user_name }}</p>
{% when HistoryItemEntry::PositiveAdjustment with (entry) %} <p class="col">
{{ entry.amount }} @ {{ entry.unit_value }} {% match item.item_type %}
{% when HistoryItemEntry::NegativeAdjustment with (entry) %} {% when HistoryItemEntry::PositiveAdjustment with (entry) %}
{{ entry.amount }} {{ entry.reason }} {{ entry.amount }} @ {{ entry.unit_value }}
{% endmatch %} {% when HistoryItemEntry::NegativeAdjustment with (entry) %}
</p> {{ entry.amount }} {{ entry.reason }}
</div> {% endmatch %}
</article> </p>
{% endfor %} </div>
</li>
{% endfor %}
</ul>
</div>

30
templates/home.html
Unescape View File

@ -4,20 +4,24 @@
{% block content %} {% block content %}
<p> <div class="container">
<input id="search" type="search" name="q" <p class="container d-flex justify-content-center">
placeholder="Search" <input id="search"
aria-label="Search" class="form-control"
value='{{ query.search.as_deref().unwrap_or("") }}' type="search" name="q"
hx-get="/home/search" placeholder="Search"
hx-trigger="search, keyup delay:500ms changed" aria-label="Search"
hx-target="#items" value='{{ query.search.as_deref().unwrap_or("") }}'
hx-push-url="true" hx-get="/home/search"
/> hx-trigger="search, keyup delay:500ms changed"
</p> hx-target="#items"
hx-push-url="true"
/>
</p>
<div id="items" class="container"> <div id="items" class="container">
{% include "home_search_item_fragment.html" %} {% include "home_search_item_fragment.html" %}
</div>
</div> </div>
{% endblock %} {% endblock %}

25
templates/home_search_item_fragment.html
Unescape View File

@ -1,9 +1,16 @@
{% for item in items %}
<article id="item-{{item.id}}-card"> {% if items.len() > 0 %}
<div class="grid"> <div class="card">
<div><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div> <ul class="list-group list-group-flush">
<div>Count: <span id="item-{{item.id}}-count" hx-get="/item/{{item.id}}/count" hx-trigger="load">0</span></div> {% for item in items %}
<div>Reorder Point: {{ item.reorder_point }}</div> <li id="item-{{item.id}}-entry" class="list-group-item">
</div> <div class="row">
</article> <div class="col-6"><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
{% endfor %} <div class="col">Count: <span id="item-{{item.id}}-count" hx-get="/item/{{item.id}}/count" hx-trigger="load">0</span></div>
<div class="col">Reorder Point: {{ item.reorder_point }}</div>
</div>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

6
templates/item-stats-fragment.html
Unescape View File

@ -1,6 +1,6 @@
<div hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="grid"> <div hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="row">
<article>Amount in stock: {{amount}} {{unit_abbreviation}}</article> <div class="col">Amount in stock: {{amount}} {{unit_abbreviation}}</div>
<article>Total Value: {{value}}</article> <div class="col">Total Value: {{value}}</div>
</div> </div>

28
templates/item.html
Unescape View File

@ -4,8 +4,9 @@
{% block content %} {% block content %}
<h2>{{item.name}} {% if !item.active %} <mark>Inactive</mark> {% endif %}</h2> <h2>{{item.name}} {% if !item.active %}<span class="badge text-bg-danger">Inactive</span> {% endif %}</h2>
<section>
<section class="container">
<div hx-get="/item/{{item_id}}/stats" hx-trigger="load" hx-swap="outerHTML"> <div hx-get="/item/{{item_id}}/stats" hx-trigger="load" hx-swap="outerHTML">
</div> </div>
@ -15,24 +16,21 @@
</section> </section>
{% if item.active %} {% if item.active %}
<section> <section class="container-fluid">
<div class="grid"> <div class="row">
<article> <div class="col-sm-6">
<h3>Sale</h3> <div hx-get="/item/{{item_id}}/adjustment/sale" hx-trigger="load" hx-swap="outerHTML">
<div hx-get="/item/{{item_id}}/adjustment/sale" hx-trigger="load" hx-swap="outerHTML"> </div>
</div> </div>
</article> <div class="col-sm-6">
<div hx-get="/item/{{item_id}}/adjustment/new-stock" hx-trigger="load" hx-swap="outerHTML">
<article> </div>
<h3>New Stock</h3>
<div hx-get="/item/{{item_id}}/adjustment/new-stock" hx-trigger="load" hx-swap="outerHTML">
</div> </div>
</article> </div>
</div>
</section> </section>
{% endif %} {% endif %}
<section> <section class="container">
<div hx-get="/item/{{item_id}}/adjustments" hx-trigger="load" hx-swap="outerHTML"> <div hx-get="/item/{{item_id}}/adjustments" hx-trigger="load" hx-swap="outerHTML">
</div> </div>
</section> </section>

43
templates/main.html
Unescape View File

@ -1,29 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-bs-theme="dark">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="/css/pico.min.css" > <!-- <link rel="stylesheet" href="/css/pico.min.css" > -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--TODO Vendor css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="/js/htmx.min.js"></script> <script src="/js/htmx.min.js"></script>
<!--TODO Vendor this script --> <!--TODO Vendor this script -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>{% block title %}Title{% endblock %}</title> <title>{% block title %}Title{% endblock %}</title>
</head> </head>
<body> <body>
<header class="container"> <header class="container mb-4">
<nav class="container"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<ul> <div class="container-fluid">
<li><h1><a class="secondary" href="/home">Inventory App</a></h1></li> <a class="navbar-brand" href="/home">Inventory App</a>
</ul> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<ul> <span class="navbar-toggler-icon"></span>
<li><a class="secondary" href="/overview">Overview</a></li> </button>
<li><a class="secondary" href="/catalog">Catalog</a></li> <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<li><a class="secondary" href="/upload">Upload</a></li> <ul class="navbar-nav ">
<li><a class="secondary" href="/reports">Reports</a></li> <li class="nav-item"><h1></h1></li>
<li><a class="secondary" href="/history">History</a></li> <li class="nav-item"><a class="nav-link" href="/overview">Overview</a></li>
<li><a class="contrast" href="/auth/logout">Logout</a></li> <li class="nav-item"><a class="nav-link" href="/catalog">Catalog</a></li>
</ul> <li class="nav-item"><a class="nav-link" href="/upload">Upload</a></li>
<li class="nav-item"><a class="nav-link" href="/reports">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="/history">History</a></li>
</ul>
<div class="d-flex">
<a class="btn btn-primary" href="/auth/logout">Logout</a>
</div>
</div>
</div>
</nav> </nav>
</header> </header>
<main class="container"> <main class="container">
@ -31,5 +43,6 @@
</main> </main>
<footer class="container-fluid"> <footer class="container-fluid">
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.