11 changed files with 76 additions and 260 deletions
--- a/.forgejo/workflows/deployment-pull-request.yaml
+++ b/.forgejo/workflows/deployment-pull-request.yaml
@ -1,22 +0,0 @@
-name: deployment-on-pull-request
-on:
-  pull_request:
-  pull_request_target:
-    types:
-      - opened
-      - reopened
-      - synchronize
-
-jobs:
-  deployment:
-    runs-on: docker
-    container:
-      image: node:bookworm
-    steps:
-      - uses: actions/checkout@v4
-      - name: Build inventory
-        uses: https://codeberg.org/umglurf/kaniko-action@main
-        with:
-          cache: false
-          push: 'false'
-          context: /workspace/snoopy/in-c4/
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,2 @@
-/data/*
+/inventory.sqlite3
 *.pyc
--- a/database.py
+++ b/database.py
@ -2,7 +2,7 @@ from sqlalchemy import create_engine
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import sessionmaker

-SQLALCHEMY_DATABASE_URL = "sqlite:///./data/inventory.sqlite3"
+SQLALCHEMY_DATABASE_URL = "sqlite:///./inventory.sqlite3"

 engine = create_engine(
    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}, echo=True
--- a/static/80x80.svg
+++ b/static/80x80.svg
--- a/static/c4.css
+++ b/static/c4.css
@ -1,122 +0,0 @@
-body {
-    color: #f0f0f0;
-    background-color: #333;
-}
-
-h1, h1 a  {
-    color: #dfaa37; /* C4 Yellow */
-}
-
-#search.failed {
-    color: #200;
-    background-color: #ec6d5f;
-}
-
-#map {
-    border: 1px solid #202020;
-    background-color: #4d4d4d;
-    max-width: 1440px;
-    max-height: 50vh;
-    aspect-ratio: 2 / 1;
-    box-shadow: 0px 6px 12px #000c;
-}
-
-#mapnote {
-    background-color: #ccc;
-    color: #333;
-    border-color: #202020;
-    padding: 0.25em 0.5em;
-    position: relative;
-    top: -1px;
-    box-shadow: 0px 6px 12px #000c;
-}
-
-#mapnote:empty {
-    display: none;
-}
-
-#itemcount {
-    display: inline-block;
-    margin-right: 1ch;
-}
-
-.result {
-    background-color: #202020;
-    border-color: #4d4d4d;
-}
-
-.result:focus {
-    background-color: #202020;
-    border-color: #dfaa37;
-    outline-color: #dfaa37;
-}
-
-.result a {
-    color: #dfaa37;
-}
-
-.note {
-    background-color: #333;
-    font-size: smaller;
-}
-
-#knowntypes button {
-    color: #220;
-    background-color: #dfaa37;
-    border: 1px solid #220;
-    border-radius: 4px;
-    padding: 0.2em 0.4em;
-    margin: 0.2em;
-    font-weight: bolder;
-    cursor: pointer;
-}
-
-#knowntypes button:hover, #knowntypes button:focus {
-    background-color: #f5c251;
-}
-
-.btn {
-  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
-}
-
-.btn.primary {
-    color: #220;
-    background-color: #dfaa37;
-}
-
-.btn.primary:hover,.btn.primary:focus {
-    background-color: #f5c251;
-}
-
-.btn.grn {
-    color: #020;
-    background-color: #9f6;
-}
-
-.btn.grn:hover ,.btn.grn:focus {
-    background-color: #3f0;
-}
-
-.btn.red {
-    color: #200;
-    background-color: #ec6d5f;
-}
-
-.btn.red:hover, .btn.red:focus {
-    background-color: #ff7667;
-}
-
-@keyframes blinker {
-    0% { opacity: 1; }
-    40% { opacity: 1; }
-    90% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-#mapgrid {
-    outline: 2px solid #333;
-    background-color: #dfaa37;
-    border-radius: min(4px, 25%);
-    animation: blinker 1s infinite;
-}
-
--- a/static/form.html
+++ b/static/form.html
@ -3,7 +3,6 @@
  <head>
    <title>in?</title>
    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="c4.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="form.js"></script>
    <script src="shared.js"></script>
@ -22,7 +21,7 @@
      <b>Coordinates</b> (click on map)

      <div id="map" title="Map for reference only. Not to scale!">
-        <img src="map.svg" onclick="mapClick(event)">
+        <img src="80x80.svg" onclick="mapClick(event)">
        <div id="mapgrid"></div>
      </div>

@ -50,6 +49,6 @@
    </form>
    
    <button id="delete" class="btn red" autocomplete="off">Delete</button>
-    <button id="save" class="btn primary" autocomplete="off">Save</button>
+    <button id="save" class="btn green" autocomplete="off">Save</button>
  </body>
 </html>
--- a/static/form.js
+++ b/static/form.js
@ -65,22 +65,8 @@ function knownTypes() {
      map[i.type] = true;
    }
  }
-
-  // Get location in document.
-  const known_types = document.getElementById('knowntypes');
-  known_types.textContent = `Known types: `;
-
-  // Create a button for every known type.
-  for (let label of Object.keys(map).sort()) {
-    btn = document.createElement('button');
-    btn.setAttribute('type', 'button');
-    btn.textContent = label;
-    btn.addEventListener('click', function() {
-      document.getElementById('type').value = label;
-    });
-
-    known_types.appendChild(btn);
-  }
+  let types = Object.keys(map).sort().join(', ')
+  document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
 }

 function save() {
@ -150,14 +136,14 @@ function del() {

 let clicks = {x: [], y: []};
 function mapClick(e) {
-  let x = Math.floor(36 / e.target.width * e.layerX);
+  let x = Math.floor(37 / e.target.width * e.layerX);
  let y = Math.floor(18 / e.target.height * e.layerY);

  let humanPos = (x, y) => {
    return `${String.fromCharCode(65 + 16 - y)}${x}`;
  };

-  if (x > 0 && x < 36 && y > 0 && y < 18) {
+  if (x > 0 && x < 37 && y > 0 && y < 18) {
    if (clicks.x.length > 1) {
      clicks.x = [x];
      clicks.y = [y];
--- a/static/index.html
+++ b/static/index.html
@ -3,7 +3,6 @@
  <head>
    <title>in?</title>
    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="c4.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="index.js"></script>
    <script src="shared.js"></script>
@ -12,13 +11,12 @@
    <div id="grid">
      <div id="searchcontainer">
        <input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus>
-        <p id="itemcount"></p>
        <label for="showhidden">Show hidden items</label>
        <input type="checkbox" id="showhidden">
      </div>
      <div id="mapcontainer">
        <div id="map">
-          <img src="map.svg" title="Map for reference only. Not to scale!">
+          <img src="80x80.svg" title="Map for reference only. Not to scale!">
          <div id="mapgrid"></div>
        </div>
        <p id="mapnote"></p>
@ -39,7 +37,7 @@
          </div>
        </template>
      </div>
-      <a href="form.html" class="btn primary">+</a>
+      <a href="form.html" class="btn green">+</a>
    </div>
  </body>
 </html>
--- a/static/index.js
+++ b/static/index.js
@ -17,7 +17,6 @@ function renderItems() {
  const container = document.getElementById('results');
  const template = document.getElementById('item');
  const loading = document.getElementById('loading');
-  let count = 0;

  for (const [id, item] of Object.entries(items)) {
    const clone = template.content.cloneNode(true);
@ -32,14 +31,11 @@ function renderItems() {
    clone.querySelector(".result").id = `item-${id}`;
    clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
    if (item.hidden) {
-      clone.querySelector(".result").classList.add('hidden');
-    } else {
-      count++;
-    }
+      clone.querySelector(".result").classList.add('hidden')
+    };
    container.appendChild(clone);
-  }
+  };
  loading.remove();
-  updateCounter(count);
 }

 function getLocString(items, item) {
@ -71,7 +67,6 @@ function search(e) {
  const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
  const query = e.target.value;
  const regex = new RegExp(query, 'i')
-  let count = 0;

  for (const elem of document.getElementsByClassName('result')) {
    const item = items[elem.id.slice(5)];
@ -90,36 +85,10 @@ function search(e) {

    if (found) {
      elem.classList.remove('filtered');
-      count++;
    } else {
      elem.classList.add('filtered');
    }
  }
-
-  // Indicate failed search.
-  if (count) {
-    e.target.classList.remove('failed');
-  } else {
-    e.target.classList.add('failed');
-  }
-
-  updateCounter(count);
-}
-
-function updateCounter(count) {
-  const itemcount = document.getElementById('itemcount');
-
-  switch(count) {
-    case 0:
-      itemcount.textContent = 'No items found.';
-      break;
-    case 1:
-      itemcount.textContent = '1 item found.';
-      break;
-    default:
-      itemcount.textContent = `${count} items found.`;
-      break;
-  }
 }

 function showhidden(e){
@ -149,4 +118,4 @@ function showItem(e) {

 function hideItem(e) {
  clearMap();
-}
+}
--- a/static/shared.js
+++ b/static/shared.js
@ -1,12 +1,12 @@
 function renderMap(xx, yy) {
-  if (xx[0] > 0 && xx[0] < 36 && yy[0] > 0 && yy[0] < 18 &&
-      xx[1] > 0 && xx[1] < 36 && yy[1] > 0 && yy[1] < 18 &&
+  if (xx[0] > 0 && xx[0] < 37 && yy[0] > 0 && yy[0] < 18 &&
+      xx[1] > 0 && xx[1] < 37 && yy[1] > 0 && yy[1] < 18 &&
      xx[1] >= xx[0] && yy[1] >= yy[0]) {
    let grid = document.getElementById('mapgrid');
    grid.style.top = `${yy[0]*100/18}%`;
-    grid.style.left = `${100/36*xx[0]}%`;
+    grid.style.left = `${100/37*xx[0]}%`;
    grid.style.height = `${(yy[1] - yy[0] + 1) * 100/18}%`;
-    grid.style.width = `${100/36*(xx[1] - xx[0] + 1)}%`;
+    grid.style.width = `${100/37*(xx[1] - xx[0] + 1)}%`;
  } else {
    alert(`invalid coordinates x=${xx} y=${yy}`);
  }
--- a/static/style.css
+++ b/static/style.css
@ -171,10 +171,10 @@ textarea {
 #map {
  position: relative;
  border: 1px solid black;
-  background: #4d4d4d;
-  max-width: 1440px;
+  background: #fff;
+  max-width: 1480px;
  max-height: 50vh;
-  aspect-ratio: 2 / 1;
+  aspect-ratio: 37 / 18;
  margin: 0 auto;
 }