summaryrefslogtreecommitdiff
path: root/data/templates/recipe.html
blob: 536cac9d2a5b2053a1423c6bb88b3b80f0286922 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>

<html>
	
	<head>

		<title>Recipes</title>

		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../../../static/style.css" type="text/css">

	</head>
	
	<body>

		<header>{{if ne .UpstreamUrl ""}}
			<nav>
				<a href="{{.UpstreamUrl}}">Link to recipe</a>
			</nav>
			{{end}}
			<h1>{{.Title}}</h1>
		</header>

		<main>
			<img src="./recipe/image?id={{.Id}}" alt="Recipe image">
			<h2>Recipe description</h2>
			<button id="editbtn" style="display:block" onclick=startEditMode()>edit</button>
			<button id="cancelbtn" style="display:none" onclick=cancelEditMode()>abort</button>
			<button id="savebtn" style="display:none" onclick=saveDescriptionMarkdown()>save</button>
			<pre id="description_md" style="display:none;" contenteditable="true">{{.DescriptionMarkdown}}</pre>
			<div id="rendered_description_md" style="display:block;">
				{{.RenderedDescriptionMarkdown}}
			</div>

			<footer>
				<hr>
				<p>The <a href="https://xengineering.eu/git/ceres">Ceres</a> recipe server is licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL v3</a> and developed with <a href="https://simplecss.org/">simple.css</a>.</p>
			</footer>
		</main>

		<script>
			var editbtn = document.getElementById("editbtn");
			var cancelbtn = document.getElementById("cancelbtn");
			var savebtn = document.getElementById("savebtn");
			var description_md = document.getElementById("description_md");
			var rendered_description_md = document.getElementById("rendered_description_md");

			function startEditMode() {
				editbtn.style.display = "none";
				rendered_description_md.style.display = "none";
				cancelbtn.style.display = "block";
				savebtn.style.display = "block";
				description_md.style.display = "block";
			}

			function cancelEditMode() {
				window.location.reload(true);
			}

			function saveDescriptionMarkdown() {
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function() {
					if (this.readyState == 4) {
						window.location.reload(true);
					}
				}
				xhttp.open("POST", window.location.href, true);
				xhttp.send(description_md.innerHTML.replaceAll("<br>", "\n"));
			}
		</script>

	</body>

</html>