blob: f2695f08da4a28770eb6ff8b3911bb6bef91b8e0 (
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
76
77
78
79
80
81
82
83
84
|
{{define "recipe-edit"}}
<!DOCTYPE html>
<html>
{{ template "head" }}
<body>
<header>
{{ template "nav" }}
<h1>Recipe editor</h1>
</header>
<main>
<form action="/recipe{{if ne .Id ""}}/{{.Id}}{{end}}" onsubmit="updateRecipe(event)">
<input type="hidden" name="id" value="{{.Id}}">
<p><input type="text" name="title" value="{{.Title}}" placeholder="Title" required></p>
<p><input type="number" name="portions" value="{{.Portions}}" placeholder="Portions"></p>
<p><input type="text" name="url" value="{{.Url}}" placeholder="URL"></p>
<p><textarea name="notes" rows="4" cols="50" placeholder="Notes">{{.Notes}}</textarea></p>
<div id="steps">{{range .Steps}}
<section>
<textarea rows="4" cols="50" placeholder="Step description">{{.Text}}</textarea>
<button type="button" onclick="parentNode.remove();">remove</button>
</section>{{end}}
</div>
<button type="button" onclick="addNewStep();">add step</button>
<button type="submit">save</button>{{if eq .Id ""}}
<button onclick="window.location.href='/recipes';">cancel</button>{{else}}
<button onclick="window.location.href='/recipe/{{.Id}}';">cancel</button>{{end}}
</form>
</main>
{{ template "footer" }}
<script src="/static/view/static/ceres.js"></script>
<script>
function updateRecipe(event) {
event.preventDefault();
const form = event.target;
const url = form.getAttribute('action');
const data = new FormData(form);
let obj = Object.fromEntries(data.entries());
obj.steps = [];
const steps = document.querySelectorAll('form section textarea');
steps.forEach(step => {
let s = {};
s.text = step.value;
obj.steps.push(s);
});
fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(obj)
})
.then(response => {
if (response.ok) {
console.log('Form submitted successfully');
} else {
console.error('Form submission failed');
}
if (response.redirected) {
window.location.href = response.url;
}
})
.catch(error => {
console.error('Network error:', error);
});
}
function addNewStep() {
var newStep = document.createElement("section");
newStep.innerHTML = `
<textarea rows="4" cols="50" placeholder="Step description"></textarea>
<button type="button" onclick="parentNode.remove();">remove</button>
`;
var steps = document.querySelector("#steps");
steps.appendChild(newStep);
}
</script>
</body>
</html>
{{end}}
|
