prevent scroll position from being lost when updating servings

This commit is contained in:
Khaïs COLIN 2025-10-19 13:57:14 +02:00
parent e05a4d0ccd
commit 12a040fe87
Signed by: logistic-bot
SSH key fingerprint: SHA256:RlpiqKeXpcPFZZ4y9Ou4xi2M8OhRJovIwDlbCaMsuAo
4 changed files with 45 additions and 9 deletions

BIN
foods.db

Binary file not shown.

View file

@ -1,6 +1,6 @@
use std::sync::{Arc, Mutex}; use std::sync::{Arc, Mutex};
use axum::{extract::{Path, State}, response::{Html, Redirect}, routing::{get, post}, Router}; use axum::{extract::{Path, State}, response::Html, routing::{get, post}, Router};
use rusqlite::Connection; use rusqlite::Connection;
use askama::Template; use askama::Template;
@ -11,6 +11,12 @@ struct IndexTemplate {
sum: i32, sum: i32,
} }
#[derive(Template)]
#[template(path = "food.html")]
struct FoodTemplate {
food: Food,
}
#[derive(Debug, Clone, PartialEq)] #[derive(Debug, Clone, PartialEq)]
struct Food { struct Food {
id: i32, id: i32,
@ -64,18 +70,42 @@ async fn root(
async fn increase( async fn increase(
State(conn): State<Arc<Mutex<Connection>>>, State(conn): State<Arc<Mutex<Connection>>>,
Path(id): Path<i32> Path(id): Path<i32>
) -> Redirect{ ) -> Html<String>{
let conn = conn.lock().unwrap(); let conn = conn.lock().unwrap();
let mut stmt = conn.prepare("UPDATE food SET actual_servings = (SELECT actual_servings FROM food WHERE id = ?1) + 1 WHERE id = ?1").unwrap(); let mut stmt = conn.prepare("UPDATE food SET actual_servings = (SELECT actual_servings FROM food WHERE id = ?1) + 1 WHERE id = ?1").unwrap();
stmt.execute((id,)).unwrap(); stmt.execute((id,)).unwrap();
Redirect::to("/") let mut stmt = conn.prepare("SELECT id, portion, name, kc_per_serving, target_servings, actual_servings FROM food WHERE id = ?1").unwrap();
let food = stmt.query_one((id,), |row| Ok(Food {
id: row.get(0).unwrap(),
portion: row.get(1).unwrap(),
name: row.get(2).unwrap(),
kc_per_serving: row.get(3).unwrap(),
target_servings: row.get(4).unwrap(),
actual_servings: row.get(5).unwrap(),
})).unwrap();
let food = FoodTemplate {food};
Html(
food.render().unwrap()
)
} }
async fn decrease( async fn decrease(
State(conn): State<Arc<Mutex<Connection>>>, State(conn): State<Arc<Mutex<Connection>>>,
Path(id): Path<i32> Path(id): Path<i32>
) -> Redirect{ ) -> Html<String>{
let conn = conn.lock().unwrap(); let conn = conn.lock().unwrap();
let mut stmt = conn.prepare("UPDATE food SET actual_servings = MAX((SELECT actual_servings FROM food WHERE id = ?1) - 1, 0) WHERE id = ?1").unwrap(); let mut stmt = conn.prepare("UPDATE food SET actual_servings = MAX((SELECT actual_servings FROM food WHERE id = ?1) - 1, 0) WHERE id = ?1").unwrap();
stmt.execute((id,)).unwrap(); stmt.execute((id,)).unwrap();
Redirect::to("/") let mut stmt = conn.prepare("SELECT id, portion, name, kc_per_serving, target_servings, actual_servings FROM food WHERE id = ?1").unwrap();
let food = stmt.query_one((id,), |row| Ok(Food {
id: row.get(0).unwrap(),
portion: row.get(1).unwrap(),
name: row.get(2).unwrap(),
kc_per_serving: row.get(3).unwrap(),
target_servings: row.get(4).unwrap(),
actual_servings: row.get(5).unwrap(),
})).unwrap();
let food = FoodTemplate {food};
Html(
food.render().unwrap()
)
} }

View file

@ -1,4 +1,4 @@
<div style="border: 1px solid black; margin: 1em; padding: 1em;"> <div style="border: 1px solid black; margin: 1em; padding: 1em;" id="food-{{ food.id }}">
<div style="text-align: center;"> <div style="text-align: center;">
<p> <p>
<b>{{ food.name }}</b> <b>{{ food.name }}</b>
@ -15,9 +15,14 @@
<br> <br>
<form method="post"> <form method="post">
<div style="text-align: center;"> <div style="text-align: center;">
<button formaction="/decrease/{{ food.id }}" style="width: 40%; height: 3em;" {% if food.actual_servings <=0 %} <button hx-post="/decrease/{{ food.id }}" hx-target="#food-{{ food.id }}" hx-swap="outerHTML"
disabled {% endif %}>-</button> style="width: 40%; height: 3em;" {% if food.actual_servings <=0 %} disabled {% endif %}>
<button formaction="/increase/{{ food.id }}" style="width: 40%; height: 3em;">+</button> -
</button>
<button hx-post="/increase/{{ food.id }}" hx-target="#food-{{ food.id }}" hx-swap="outerHTML"
style="width: 40%; height: 3em;">
+
</button>
</div> </div>
</form> </form>
</div> </div>

View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">