jadowyne/pantry-track
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Implemented dark mode in recipes module

Browse Source
This commit is contained in:
Jadowyne Ulve 2025-08-09 17:26:24 -05:00
parent 6c004a1f02
commit 2186330ae8
11 changed files with 39 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
application/recipes/__pycache__/recipes_api.cpython-313.pyc
View File

Binary file not shown.

1
application/recipes/recipes_api.py
View File

@ -26,6 +26,7 @@ def recipes():
def recipe(id, mode='view'): def recipe(id, mode='view'):
units = database_recipes.getUnits() units = database_recipes.getUnits()
print("woot") print("woot")
print(session)
if mode == "edit": if mode == "edit":
return render_template("recipe_edit.html", recipe_id=id, current_site=session['selected_site'], units=units) return render_template("recipe_edit.html", recipe_id=id, current_site=session['selected_site'], units=units)
if mode == "view": if mode == "view":

2
application/recipes/sql/getRecipeByID.sql
View File

@ -1,7 +1,7 @@
WITH passed_id AS (SELECT %s AS passed_id), WITH passed_id AS (SELECT %s AS passed_id),
cte_recipe_items AS ( cte_recipe_items AS (
SELECT items.*, SELECT items.*,
COALESCE(%%site_name%%_items.barcode, items.uuid) AS uuid, /*COALESCE(%%site_name%%_items.barcode, items.uuid) AS uuid,*/
(SELECT COALESCE(row_to_json(units.*), '{}') FROM units WHERE units.id=%%site_name%%_item_info.uom) AS item_uom, (SELECT COALESCE(row_to_json(units.*), '{}') FROM units WHERE units.id=%%site_name%%_item_info.uom) AS item_uom,
COALESCE(%%site_name%%_items.item_name, items.item_name) AS item_name, COALESCE(%%site_name%%_items.item_name, items.item_name) AS item_name,
COALESCE(%%site_name%%_items.links, items.links) AS links, COALESCE(%%site_name%%_items.links, items.links) AS links,

20
application/recipes/static/js/recipeEditHandler.js
View File

@ -1,23 +1,3 @@
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
// Beginning of site specific code! // Beginning of site specific code!
var recipe = []; var recipe = [];
document.addEventListener('DOMContentLoaded', async function() { document.addEventListener('DOMContentLoaded', async function() {

19
application/recipes/static/js/recipeViewHandler.js
View File

@ -1,22 +1,3 @@
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
// Beginning of site specific code! // Beginning of site specific code!
var recipe = []; var recipe = [];
document.addEventListener('DOMContentLoaded', async function() { document.addEventListener('DOMContentLoaded', async function() {

19
application/recipes/static/js/recipesListHandler.js
View File

@ -1,22 +1,3 @@
var mode = false
async function toggleDarkMode() {
let darkMode = document.getElementById("dark-mode");
darkMode.disabled = !darkMode.disabled;
mode = !mode;
if(mode){
document.getElementById('modeToggle').innerHTML = "light_mode"
document.getElementById('main_html').classList.add('uk-light')
} else {
document.getElementById('modeToggle').innerHTML = "dark_mode"
document.getElementById('main_html').classList.remove('uk-light')
}
}
if(session.user.flags.darkmode){
toggleDarkMode()
}
async function changeSite(site){ async function changeSite(site){
console.log(site) console.log(site)
const response = await fetch(`/changeSite`, { const response = await fetch(`/changeSite`, {

11
application/recipes/templates/recipe_edit.html
View File

@ -16,13 +16,18 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/> {% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
<script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script> <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script> <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
</head> </head>
<body> {% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body>
{% endif %}
<nav class="uk-navbar-container"> <nav class="uk-navbar-container">
<div class="uk-container uk-container-expand"> <div class="uk-container uk-container-expand">
<div class="uk-navbar uk-navbar-primary"> <div class="uk-navbar uk-navbar-primary">

11
application/recipes/templates/recipe_view.html
View File

@ -16,8 +16,9 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/pantry.css') }}"/>
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/> {% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
<script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script> <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script> <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
@ -29,7 +30,11 @@
border-radius: 50%; border-radius: 50%;
} }
</style> </style>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body> <body>
{% endif %}
<nav class="uk-navbar-container"> <nav class="uk-navbar-container">
<div class="uk-container uk-container-expand"> <div class="uk-container uk-container-expand">
<div class="uk-navbar uk-navbar-primary"> <div class="uk-navbar uk-navbar-primary">
@ -38,7 +43,7 @@
<ul class="uk-navbar-nav"> <ul class="uk-navbar-nav">
<li> <li>
<a href>Apps</a> <a href>Apps</a>
<div class="uk-navbar-dropdown" uk-drop="mode: click; multi:false"> <div class="uk-navbar-dropdown uk-light" uk-drop="mode: click; multi:false">
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="/recipes">Recipes</a></li> <li><a href="/recipes">Recipes</a></li>
<li><a href="/shopping-lists">Shopping Lists</a></li> <li><a href="/shopping-lists">Shopping Lists</a></li>

8
application/recipes/templates/recipes_index.html
View File

@ -15,13 +15,19 @@
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/> {% if session['user']['flags']['darkmode'] %}
<link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}"/>
{% endif %}
<script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script> <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script> <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
</head> </head>
{% if session['user']['flags']['darkmode'] %}
<body class="uk-light">
{% else %}
<body> <body>
{% endif %}
<nav class="uk-navbar-container"> <nav class="uk-navbar-container">
<div class="uk-container uk-container-expand"> <div class="uk-container uk-container-expand">
<div class="uk-navbar uk-navbar-primary"> <div class="uk-navbar uk-navbar-primary">

5
logs/database.log
View File

@ -64,4 +64,7 @@
sql='INSERT INTO test_receipt_items(type, receipt_id, barcode, item_uuid, name, qty, uom, data, status) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s) RETURNING *;') sql='INSERT INTO test_receipt_items(type, receipt_id, barcode, item_uuid, name, qty, uom, data, status) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s) RETURNING *;')
2025-08-09 16:10:49.684466 --- ERROR --- DatabaseError(message='operator does not exist: integer = character varyingLINE 4: ...(row_to_json(un), '{}') FROM units un WHERE un.id = items.uo... ^HINT: No operator matches the given name and argument types. You might need to add explicit type casts.', 2025-08-09 16:10:49.684466 --- ERROR --- DatabaseError(message='operator does not exist: integer = character varyingLINE 4: ...(row_to_json(un), '{}') FROM units un WHERE un.id = items.uo... ^HINT: No operator matches the given name and argument types. You might need to add explicit type casts.',
payload=(1,), payload=(1,),
sql='WITH passed_id AS (SELECT %s AS passed_id), cte_receipt_items AS ( SELECT items.* , (SELECT COALESCE(row_to_json(un), '{}') FROM units un WHERE un.id = items.uom LIMIT 1) AS uom FROM testa_receipt_items items WHERE items.receipt_id = (SELECT passed_id FROM passed_id) ORDER BY items.name ASC )SELECT (SELECT passed_id FROM passed_id) AS passed_id, testa_receipts.*, logins.username as submitted_by, (SELECT COALESCE(array_agg(row_to_json(ris)), '{}') FROM cte_receipt_items ris) AS receipt_items, row_to_json(testa_vendors.*) as vendorFROM testa_receiptsJOIN logins ON testa_receipts.submitted_by = logins.idLEFT JOIN testa_vendors ON testa_receipts.vendor_id = testa_vendors.id WHERE testa_receipts.id=(SELECT passed_id FROM passed_id)') sql='WITH passed_id AS (SELECT %s AS passed_id), cte_receipt_items AS ( SELECT items.* , (SELECT COALESCE(row_to_json(un), '{}') FROM units un WHERE un.id = items.uom LIMIT 1) AS uom FROM testa_receipt_items items WHERE items.receipt_id = (SELECT passed_id FROM passed_id) ORDER BY items.name ASC )SELECT (SELECT passed_id FROM passed_id) AS passed_id, testa_receipts.*, logins.username as submitted_by, (SELECT COALESCE(array_agg(row_to_json(ris)), '{}') FROM cte_receipt_items ris) AS receipt_items, row_to_json(testa_vendors.*) as vendorFROM testa_receiptsJOIN logins ON testa_receipts.submitted_by = logins.idLEFT JOIN testa_vendors ON testa_receipts.vendor_id = testa_vendors.id WHERE testa_receipts.id=(SELECT passed_id FROM passed_id)')
2025-08-09 16:20:46.492869 --- ERROR --- DatabaseError(message='relation "testa_recipes" does not existLINE 3: FROM testa_recipes LIMIT 10 OFFSET 0; ^',
payload=(10, 0),
sql='SELECT *, (SELECT COALESCE(array_agg(row_to_json(g)), '{}') FROM testa_recipe_items g WHERE rp_id = testa_recipes.id) AS rp_items FROM testa_recipes LIMIT %s OFFSET %s;')

10
static/css/dark-mode.css
View File

@ -5,6 +5,8 @@
--surface: #121212; --surface: #121212;
--surface-text: #ffffff; --surface-text: #ffffff;
--surface-two: #252525;
--error: #CF6679; --error: #CF6679;
--error-text: #000000; --error-text: #000000;
@ -52,6 +54,14 @@ select, option {
pointer-events: none; pointer-events: none;
} }
.uk-navbar-container {
background-color: var(--surface) !important;
}
.uk-navbar-dropdown {
background-color: var(--surface-two) !important;
box-shadow: var(--elevation-low);
}
.uk-input.uk-disabled { .uk-input.uk-disabled {
background-color: var(--background-secondary); background-color: var(--background-secondary);