First stab at a form submit off an alpine.js form. Honestly not great. It's a lot of code already for even less functionality.
parent
e4153fd74a
commit
3fd8169d83
@ -1,31 +1,43 @@ |
||||
<script> |
||||
let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/"); |
||||
|
||||
const PostForm = async (url, data) => { |
||||
console.log("DATA", JSON.stringify(data)); |
||||
return await fetch(url, { |
||||
method: "POST", |
||||
mode: "same-origin", |
||||
body: JSON.stringify(data), |
||||
headers: { |
||||
'Content-Type': 'application/json' |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
|
||||
<blockstart> |
||||
<h1>Admin Tables</h1> |
||||
|
||||
<block x-init="item = await Data.oneThing()" x-data="{item: {}}"> |
||||
<form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}/"> |
||||
<card> |
||||
<top><h1>{{ .Table }} : {{ .Id }}</h1></top> |
||||
<middle> |
||||
<template x-for="(value, key) in item"> |
||||
<div> |
||||
<label x-text="key" x-bind:for="key"></label> |
||||
<input x-text="value" x-bind:value="value" x-bind:id="key" /> |
||||
</div> |
||||
</template> |
||||
</middle> |
||||
<bottom> |
||||
<button-group> |
||||
<button type="button">Back</button> |
||||
<button type="submit">Update</button> |
||||
<button type="button">Delete</button> |
||||
</button-group> |
||||
</bottom> |
||||
</card> |
||||
</form> |
||||
<form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}/"> |
||||
<card> |
||||
<top><h1>{{ .Table }} : {{ .Id }}</h1></top> |
||||
<middle> |
||||
<template x-for="(value, key) in item"> |
||||
<div> |
||||
<label x-text="key" x-bind:for="key"></label> |
||||
<input x-text="value" x-model="item[key]" x-bind:id="key" /> |
||||
</div> |
||||
</template> |
||||
</middle> |
||||
<bottom> |
||||
<button-group> |
||||
<button type="button">Back</button> |
||||
<button type="button" @click.prevent="PostForm('/api/admin/table/{{ .Table }}/{{ .Id }}/', item)">Update</button> |
||||
<button type="button" @click.prevent="console.log('DELETE', item.id)">Delete</button> |
||||
</button-group> |
||||
</bottom> |
||||
</card> |
||||
</form> |
||||
</block> |
||||
|
||||
</blockstart> |
||||
|
Loading…
Reference in new issue