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" >
<div>
<label for="amount">Amount</label>
<input id="amount" name="amount" type="number" required
<div class="mb-3">
<label for="amount" class="form-label">Amount</label>
<input id="amount" class="form-control" name="amount" type="number" required
{% if !amount_error.is_empty() -%}
aria-invalid="true"
aria-describedby="invalid-amount"
{% endif -%}
/>
{% if !amount_error.is_empty() -%}
<small id="invalid-amount">{{ amount_error }}</small>
<small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
{% endif -%}
</div>
<div>
<label for="price">Price</label>
<input id="price" name="price" required
<div class="mb-3">
<label for="price" class="form-label">Price</label>
<input id="price" class="form-control" name="price" required
{% if !price_error.is_empty() -%}
aria-invalid="true"
aria-describedby="invalid-price"
{% endif -%}
/>
{% if !price_error.is_empty() -%}
<small id="invalid-price">{{ price_error }}</small>
<small id="invalid-price" class="invalid-feedback">{{ price_error }}</small>
{% endif -%}
</div>
<button class="btn primary">Add Stock</button>
<div class="mb-3">
<button class="btn btn-primary">Add Stock</button>
</div>
</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" >
<div>
<label for="amount">Amount</label>
<input id="amount" name="amount" type="number" step="0.01" required
<div class="mb-3">
<label for="amount" class="form-label">Amount</label>
<input id="amount" class="form-control" name="amount" type="number" step="0.01" required
{% if !amount_error.is_empty() -%}
aria-invalid="true"
aria-describedby="invalid-amount"
{% endif -%}
/>
{% if !amount_error.is_empty() -%}
<small id="invalid-amount">{{ amount_error }}</small>
<small id="invalid-amount" class="invalid-feedback">{{ amount_error }}</small>
{% endif -%}
</div>
<button class="btn primary">Record Sale</button>
<div class="mb-3">
<button class="btn btn-primary">Record Sale</button>
</div>
</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>
<tr>
<th scope="col">Date</th>

31
templates/catalog.html
Unescape View File

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

19
templates/catalog_item_fragment.html
Unescape View File

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

53
templates/history.html
Unescape View File

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

38
templates/history_item_fragment.html
Unescape View File

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

30
templates/home.html
Unescape View File

@ -4,20 +4,24 @@
{% block content %}
<p>
<input id="search" type="search" name="q"
placeholder="Search"
aria-label="Search"
value='{{ query.search.as_deref().unwrap_or("") }}'
hx-get="/home/search"
hx-trigger="search, keyup delay:500ms changed"
hx-target="#items"
hx-push-url="true"
/>
</p>
<div class="container">
<p class="container d-flex justify-content-center">
<input id="search"
class="form-control"
type="search" name="q"
placeholder="Search"
aria-label="Search"
value='{{ query.search.as_deref().unwrap_or("") }}'
hx-get="/home/search"
hx-trigger="search, keyup delay:500ms changed"
hx-target="#items"
hx-push-url="true"
/>
</p>
<div id="items" class="container">
{% include "home_search_item_fragment.html" %}
<div id="items" class="container">
{% include "home_search_item_fragment.html" %}
</div>
</div>
{% 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">
<div class="grid">
<div><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
<div>Count: <span id="item-{{item.id}}-count" hx-get="/item/{{item.id}}/count" hx-trigger="load">0</span></div>
<div>Reorder Point: {{ item.reorder_point }}</div>
</div>
</article>
{% endfor %}
{% if items.len() > 0 %}
<div class="card">
<ul class="list-group list-group-flush">
{% for item in items %}
<li id="item-{{item.id}}-entry" class="list-group-item">
<div class="row">
<div class="col-6"><a href="/item/{{item.id}}/" hx-push-url="true">{{ item.name }}</a></div>
<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">
<article>Amount in stock: {{amount}} {{unit_abbreviation}}</article>
<article>Total Value: {{value}}</article>
<div hx-get="/item/{{item_id}}/stats" hx-trigger="new-adjustment from:body" hx-swap="outerHTML" class="row">
<div class="col">Amount in stock: {{amount}} {{unit_abbreviation}}</div>
<div class="col">Total Value: {{value}}</div>
</div>

28
templates/item.html
Unescape View File

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

43
templates/main.html
Unescape View File

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

Powered by TurnKey Linux.