{{define "recipe-edit"}}
<!DOCTYPE html>
<html>
{{ template "head" }}
<body>
<header>
{{ template "nav" }}
<h1>Recipe editor</h1>
</header>
<main>
<form action="/recipe/{{.Id}}">
<input type="hidden" name="id" value="{{.Id}}">
<p>
<label>Title</label>
<input type="text" name="title" value="{{.Title}}">
</p>
<p>
<label>Portions</label>
<input type="number" name="portions" value="{{.Portions}}">
</p>
<p>
<label>URL</label>
<input type="text" name="url" value="{{.Url}}">
</p>
<p>
<label>Notes</label>
<textarea name="notes" rows="4" cols="50">{{.Notes}}</textarea>
</p>
<div id="steps">{{range .Steps}}
<section>
<label>Text</label>
<textarea rows="4" cols="50">{{.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>
<button onclick="window.location.href='/recipe/{{.Id}}';">cancel</button>
</form>
</main>
{{ template "footer" }}
<script src="/static/view/static/ceres.js"></script>
<script>
var forms = document.querySelectorAll('form');
forms.forEach(form => {
form.addEventListener('submit', updateRecipe);
});
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 = `
<label>Text</label>
<textarea rows="4" cols="50"></textarea>
<button type="button" onclick="parentNode.remove();">remove</button>
`;
var steps = document.querySelector("#steps");
steps.appendChild(newStep);
}
</script>
</body>
</html>
{{end}}