view: Implement favorite recipes

This marks favorite recipes with a `⭐` emoticon. The favorite flag
value can be set on the recipe edit page. Favorite recipes are listed
first on the recipe list view.

Furthermore as a second priority the created time stamp is used in the
recipe list so that more recent recipes are listed first.

4 files changed, 6 insertions, 2 deletions

diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html
index 9a18e75..14258f3 100644
--- a/view/html/recipe-edit.html
+++ b/view/html/recipe-edit.html
@@ -13,6 +13,7 @@
 				<input type="hidden" name="created" value="{{.Recipe.Created}}">
 				<input type="hidden" name="last_changed" value="{{.Recipe.LastChanged}}">
 
+				<p><label>⭐ Is favorite: <input id="is_favorite" type="checkbox" name="is_favorite" {{if .Recipe.IsFavorite}}checked{{end}}></label></p>
 				<p><input type="text" name="title" value="{{.Recipe.Title}}" placeholder="Title" required></p>
 				<p><input type="number" name="portions" value="{{.Recipe.Portions}}" placeholder="Portions"></p>
 				<p><input type="text" name="url" value="{{.Recipe.Url}}" placeholder="URL"></p>
diff --git a/view/html/recipe.html b/view/html/recipe.html
index b2fe773..b8fd130 100644
--- a/view/html/recipe.html
+++ b/view/html/recipe.html
@@ -12,7 +12,8 @@
 				<button onclick="window.location.href='/recipe/{{.Recipe.Id}}?view=recipe-edit';">edit</button>
 				<button onclick="window.location.href='/recipe/{{.Recipe.Id}}?view=recipe-confirm-deletion';">delete</button>
 			</p>{{ if ne .Recipe.Notes "" }}
-			<p class="notice" style="white-space: pre-line;">{{.Recipe.Notes}}</p>{{end}}{{ if ne .Recipe.Portions "" }}
+			<p class="notice" style="white-space: pre-line;">{{.Recipe.Notes}}</p>{{end}}
+			<p>⭐ <i>Is favorite:</i> {{if .Recipe.IsFavorite}}Yes{{else}}No{{end}}</p>{{ if ne .Recipe.Portions "" }}
 			<p><i>Portions:</i> {{.Recipe.Portions}}</p>{{end}}{{ if ne .Recipe.Url "" }}
 			<p><i>Original recipe:</i> <a href="{{.Recipe.Url}}">{{.Recipe.Url}}</a></p>{{end}}{{if .HasIngredients}}
 			<p><i>Ingredient summary:</i></p>
diff --git a/view/html/recipes.html b/view/html/recipes.html
index d9e720b..35059f7 100644
--- a/view/html/recipes.html
+++ b/view/html/recipes.html
@@ -12,7 +12,7 @@
 {{if ne (len .) 0}}
 			<p><input id="search" onkeyup="filter()" type="text" placeholder="Search for a recipe ..."></p>
 			<ul id="recipes">{{range .}}
-				<li><a href="./recipe/{{.Id}}">{{.Title}}</a></li>{{end}}
+				<li><a href="./recipe/{{.Id}}">{{.Title}}</a>{{if .IsFavorite}} ⭐{{end}}</li>{{end}}
 			</ul>{{else}}
 			<p><i>No recipes available.</i></p>{{end}}
 		</main>
diff --git a/view/static/ceres.js b/view/static/ceres.js
index 91417a7..35a90fd 100644
--- a/view/static/ceres.js
+++ b/view/static/ceres.js
@@ -58,6 +58,8 @@ function updateRecipe(event) {
 	const data = new FormData(form);
 	let obj = Object.fromEntries(data.entries());
 
+	obj.is_favorite = form.querySelector('#is_favorite').checked;
+
 	obj.steps = [];
 	var steps_container = document.getElementById('steps');
 	var steps = steps_container.children;