Embryo of web frontend

This commit is contained in:
Roberto Alsina 2024-07-02 12:40:47 -03:00
parent baf60a1bf7
commit 4371444fa4
3 changed files with 29 additions and 28 deletions

View File

@ -1,34 +1,25 @@
<head>
<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.0.nomodule.min.js"></script>
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css" />
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
<body>
<script>
const { a, div, li, p, ul, span, button } = van.tags;
const funkos = van.state([]);
const funko_list = () => {
console.log("derived");
return div(
p("hello"),
ul(
...funkos.val.map((funko) => {
return li(funko);
})
)
);
};
async function getFunkos() {
for (;;) {
const response = await fetch("funkos/");
funkos.val = await response.json();
console.log(funkos.val);
await new Promise((r) => setTimeout(r, 5000));
}
const response = await fetch("funkos/");
funkos = await response.json();
console.log(funkos);
}
van.add(document.body, funko_list());
getFunkos();
</script>
<button hx-get="funkos/?format=html" hx-target="#funko-list">Update</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Action</th>
</tr>
<tbody id="funko-list">
</tbody>
</thead>
</body>
</head>

View File

@ -10,7 +10,7 @@ module Funkos
end
end
get "/funkos/" do |_|
get "/funkos/" do |env|
docker_api = Docr::API.new(Docr::Client.new)
containers = docker_api.containers.list(all: true)
@ -20,7 +20,12 @@ module Funkos
next if names.empty?
funkos << Funko.new(name: names[0][7..])
}
funkos.sort! { |a, b| a.name <=> b.name}
funkos.to_json
funkos.sort! { |a, b| a.name <=> b.name }
if env.params.query.fetch("format", "json") == "html"
render "src/views/funkos.ecr"
else
funkos.to_json
end
end
end

5
src/views/funkos.ecr Normal file
View File

@ -0,0 +1,5 @@
<%- funkos.each do |funko| -%>
<td><%= funko.name %></td>
<td>sarasa</td>
<td><button>DOSTUFF</button></td>
<%- end -%>