add roundest pokémon example

lovasoa · lovasoa · commit d8fed348b00f · 2024-11-17T14:15:51.000+01:00
diff --git a/examples/official-site/examples/tabs/images/roundest_pokemon_rating.svg b/examples/official-site/examples/tabs/images/roundest_pokemon_rating.svg
diff --git a/examples/official-site/examples/tabs/index.sql b/examples/official-site/examples/tabs/index.sql
@@ -8,6 +8,7 @@ select 'Authenticated CRUD', 'CRUD - Authentication', 'sqlite', 'Complete Create
 select 'Image Gallery', 'image gallery with user uploads', 'sqlite', 'Create an image gallery with user uploads and session management.' union all
 select 'Developer UI', 'SQLPage developer user interface', 'postgres', 'A web-based interface for managing SQLPage files and database tables.' union all
 select 'Corporate Game', 'corporate-conundrum', 'sqlite', 'An interactive multiplayer board game with real-time updates.' union all
+select 'Roundest Pokemon', 'roundest_pokemon_rating', 'sqlite', 'Demo app with a distinct non-default design, using custom HTML templates for everything.' union all
 select 'Todo Application', 'todo application (PostgreSQL)', 'sqlite', 'A full-featured todo list application with PostgreSQL backend.' union all
 select 'MySQL & JSON', 'mysql json handling', 'mysql', 'Learn advanced JSON manipulation in MySQL to build advanced SQLPage applications.' union all
 select 'Simple Website', 'simple-website-example', 'sqlite', 'Basic website example with navigation and data management.' union all
diff --git a/examples/roundest_pokemon_rating/Dockerfile b/examples/roundest_pokemon_rating/Dockerfile
@@ -0,0 +1,5 @@
+FROM lovasoa/sqlpage:latest
+
+COPY sqlpage /etc/sqlpage
+COPY src /var/www
+ENV DATABASE_URL=sqlite:///tmp/pokemon.db?mode=rwc
diff --git a/examples/roundest_pokemon_rating/README.md b/examples/roundest_pokemon_rating/README.md
@@ -0,0 +1,27 @@
+# Roundest (SQLPage Version)
+
+This is a simple web app that allows you to vote on which Pokemon is the most round.
+
+| Vote UI | Results UI |
+| --- | --- |
+| ![vote ui screenshot](screenshots/vote.png) | ![results ui](screenshots/results.png) |
+
+It demonstrates how to build an entirely custom web app,
+without using any of the pre-built components of SQLPage.
+
+All the custom components are in the [`sqlpage/templates/`](./sqlpage/templates/) folder.
+
+## Running the app
+
+### Using an installed version of SQLPage
+
+```
+sqlpage --web-root src
+```
+
+### Using Docker
+
+```
+docker build -t roundest-sqlpage .
+docker run -p 8080:8080 -it roundest-sqlpage
+```
diff --git a/examples/roundest_pokemon_rating/screenshots/results.png b/examples/roundest_pokemon_rating/screenshots/results.png
diff --git a/examples/roundest_pokemon_rating/screenshots/vote.png b/examples/roundest_pokemon_rating/screenshots/vote.png
diff --git a/examples/roundest_pokemon_rating/sqlpage/migrations/0000_pokemon_table.sql b/examples/roundest_pokemon_rating/sqlpage/migrations/0000_pokemon_table.sql
@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS pokemon (
+    dex_id INTEGER PRIMARY KEY,
+    name TEXT NOT NULL,
+    up_votes INTEGER DEFAULT 0,
+    down_votes INTEGER DEFAULT 0
+);
diff --git a/examples/roundest_pokemon_rating/sqlpage/templates/pokemon.handlebars b/examples/roundest_pokemon_rating/sqlpage/templates/pokemon.handlebars
@@ -0,0 +1,30 @@
+<div
+  class="container d-flex justify-content-center align-items-center min-vh-75 gap-5"
+>
+  <form action="/vote.sql" method="POST" class="d-flex gap-5">
+    {{#each_row}}
+      <div class="text-center">
+        <input type="hidden" name="option_{{@row_index}}" value="{{dexNumber}}" />
+        <img
+          src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{{dexNumber}}.png"
+          class="img-fluid"
+          style="width: 256px; height: 256px; image-rendering: pixelated;"
+          alt="{{name}}"
+        />
+        <div class="mt-3">
+          <span class="text-secondary fs-5">#{{dexNumber}}</span>
+          <h2 class="fs-1 fw-bold text-capitalize">{{name}}</h2>
+          <div class="mt-4">
+            <button
+              type="submit"
+              formaction="/vote.sql?voted={{dexNumber}}"
+              class="btn btn-primary btn-lg px-4"
+            >
+              Vote
+            </button>
+          </div>
+        </div>
+      </div>
+    {{/each_row}}
+  </form>
+</div>
diff --git a/examples/roundest_pokemon_rating/sqlpage/templates/results.handlebars b/examples/roundest_pokemon_rating/sqlpage/templates/results.handlebars
@@ -0,0 +1,29 @@
+<div class="container py-4">
+  <div class="row g-4">
+    {{#each_row}}
+      <div class="col-12">
+        <div class="d-flex align-items-center gap-4 p-4 bg-dark bg-opacity-40 rounded shadow">
+          <div class="fs-3 fw-bold text-secondary" style="width: 2rem">
+            #{{rank}}
+          </div>
+
+          <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{{dex_id}}.png" alt="{{name}}" class="img-fluid" style="width: 5rem; height: 5rem" />
+
+          <div class="flex-grow-1">
+            <div class="text-secondary small">#{{dex_id}}</div>
+            <h2 class="fs-4 fw-semibold text-capitalize text-white">{{name}}</h2>
+          </div>
+
+          <div class="text-end">
+            <div class="fs-3 fw-bold text-info">
+              {{win_percentage}}%
+            </div>
+            <div class="small text-secondary">
+              {{up_votes}}W - {{down_votes}}L
+            </div>
+          </div>
+        </div>
+      </div>
+    {{/each_row}}
+  </div>
+</div>
diff --git a/examples/roundest_pokemon_rating/sqlpage/templates/shell.handlebars b/examples/roundest_pokemon_rating/sqlpage/templates/shell.handlebars
@@ -0,0 +1,39 @@
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="{{static_path 'sqlpage.css'}}">
+  </head>
+  <body class="d-flex flex-column min-vh-100 bg-dark text-white border-top border-info">
+    <header class="py-3 px-4">
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-baseline">
+          <a href="/" class="text-decoration-none text-white">
+            <h1 class="fw-bold fs-2 mb-0">
+              round<span class="text-info">est</span>
+              <span class="text-secondary fw-light ms-2 fs-3">
+                (SQLPage Version)
+              </span>
+            </h1>
+          </a>
+        </div>
+        <nav class="d-flex gap-4">
+          <a href="/results.sql" class="text-white text-decoration-none fs-5 hover-underline">
+            Results
+          </a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="flex-grow-1">{{~#each_row~}}{{~/each_row~}}</main>
+
+    <footer class="text-center py-2 text-secondary fw-light">
+      <a
+        href="https://github.com/t3dotgg/1app5stacks"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-secondary"
+      >
+        GitHub
+      </a>
+    </footer>
+  </body>
+</html>
diff --git a/examples/roundest_pokemon_rating/src/favicon.ico b/examples/roundest_pokemon_rating/src/favicon.ico
diff --git a/examples/roundest_pokemon_rating/src/index.sql b/examples/roundest_pokemon_rating/src/index.sql
@@ -0,0 +1,8 @@
+select 'redirect' as component, '/populate.sql' as link
+where not exists(select 1 from pokemon);
+
+select 'pokemon' as component;
+
+select dex_id as dexNumber, name 
+from pokemon
+order by random() limit 2;
diff --git a/examples/roundest_pokemon_rating/src/populate.sql b/examples/roundest_pokemon_rating/src/populate.sql
@@ -0,0 +1,12 @@
+-- This updates our pokemon table with fresh data from pokeapi.co
+insert into pokemon (dex_id, name)
+select 
+    cast(rtrim(substr(value->>'url', 
+        length('https://pokeapi.co/api/v2/pokemon/') + 1), 
+    '/') as integer) as dex_id,
+    value->>'name' as name
+from json_each(
+    sqlpage.fetch('https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0') -> 'results'
+);
+
+select 'redirect' as component, '/' as link;
diff --git a/examples/roundest_pokemon_rating/src/results.sql b/examples/roundest_pokemon_rating/src/results.sql
@@ -0,0 +1,15 @@
+select 'results' as component;
+
+with ranked as (
+    select
+        *,
+        case 
+            when (up_votes + down_votes) = 0 then 0
+            else 100 * up_votes / (up_votes + down_votes)
+        end as win_percentage,
+        up_votes - down_votes as score
+    from pokemon
+)
+select *, rank() over (order by score desc) as rank
+from ranked
+order by win_percentage desc, score desc;
diff --git a/examples/roundest_pokemon_rating/src/vote.sql b/examples/roundest_pokemon_rating/src/vote.sql
@@ -0,0 +1,7 @@
+update pokemon
+set
+    up_votes = up_votes + (dex_id = $voted),
+    down_votes = down_votes + (dex_id != $voted)
+where dex_id IN (:option_0, :option_1);
+
+select 'redirect' as component, '/' as link;
