Merge pull request 'Reintroduced item counter and fixed text in map.' (#9 ) from develop into main

Reviewed-on: #9
Converted text to path
2024-05-16 22:24:10 +02:00 · 2024-05-16 22:09:54 +02:00 · 2024-05-16 22:07:04 +02:00 · 2024-05-16 21:45:44 +02:00 · 2024-05-16 21:24:19 +02:00 · 2024-05-16 21:16:56 +02:00
13 changed files with 678 additions and 30 deletions
--- a/.forgejo/workflows/deployment-pull-request.yaml
+++ b/.forgejo/workflows/deployment-pull-request.yaml
@ -0,0 +1,22 @@
 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/.forgejo/workflows/deployment.yaml
+++ b/.forgejo/workflows/deployment.yaml
@ -0,0 +1,24 @@
 name: deployment
 on:
  push:
    branches:
      - 'main'
 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: true
          cache_repo: git.koeln.ccc.de/${{ github.repository }}/cache
          push: 'true'
          context: /workspace/snoopy/in-c4/
          credentials: |
            git.koeln.ccc.de=snoopy:${{ secrets.REGISTRY_WRITE }}            
          destinations: |
            git.koeln.ccc.de/${{ github.repository }}/in-c4:latest            
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,2 @@
-/inventory.sqlite3
+/data/*
 *.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:///./inventory.sqlite3"
+SQLALCHEMY_DATABASE_URL = "sqlite:///./data/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
@ -0,0 +1,122 @@
 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,6 +3,7 @@
  <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>
@ -21,7 +22,7 @@
      <b>Coordinates</b> (click on map)
      <div id="map" title="Map for reference only. Not to scale!">
-        <img src="80x80.svg" onclick="mapClick(event)">
+        <img src="map.svg" onclick="mapClick(event)">
        <div id="mapgrid"></div>
      </div>
@ -49,6 +50,6 @@
    </form>
    <button id="delete" class="btn red" autocomplete="off">Delete</button>
-    <button id="save" class="btn green" autocomplete="off">Save</button>
+    <button id="save" class="btn primary" autocomplete="off">Save</button>
  </body>
 </html>
--- a/static/form.js
+++ b/static/form.js
@ -65,8 +65,22 @@ function knownTypes() {
      map[i.type] = true;
    }
  }
-  let types = Object.keys(map).sort().join(', ')
+
-  document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
+  // 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);
  }
 }
 function save() {
@ -136,14 +150,14 @@ function del() {
 let clicks = {x: [], y: []};
 function mapClick(e) {
-  let x = Math.floor(31 / e.target.width * e.layerX);
+  let x = Math.floor(36 / e.target.width * e.layerX);
-  let y = Math.floor(10 / e.target.height * e.layerY);
+  let y = Math.floor(18 / e.target.height * e.layerY);
  let humanPos = (x, y) => {
-    return `${String.fromCharCode(65 + 8 - y)}${x}`;
+    return `${String.fromCharCode(65 + 16 - y)}${x}`;
  };
-  if (x > 0 && x < 31 && y > 0 && y < 9) {
+  if (x > 0 && x < 36 && y > 0 && y < 18) {
    if (clicks.x.length > 1) {
      clicks.x = [x];
      clicks.y = [y];
--- a/static/index.html
+++ b/static/index.html
@ -3,6 +3,7 @@
  <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>
@ -11,12 +12,13 @@
    <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="80x80.svg" title="Map for reference only. Not to scale!">
+          <img src="map.svg" title="Map for reference only. Not to scale!">
          <div id="mapgrid"></div>
        </div>
        <p id="mapnote"></p>
@ -37,7 +39,7 @@
          </div>
        </template>
      </div>
-      <a href="form.html" class="btn green">+</a>
+      <a href="form.html" class="btn primary">+</a>
    </div>
  </body>
 </html>
--- a/static/index.js
+++ b/static/index.js
@ -17,6 +17,7 @@ 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);
@ -31,11 +32,14 @@ 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')
+      clone.querySelector(".result").classList.add('hidden');
-    };
+    } else {
      count++;
    }
    container.appendChild(clone);
-  };
+  }
  loading.remove();
  updateCounter(count);
 }
 function getLocString(items, item) {
@ -67,6 +71,7 @@ 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)];
@ -85,10 +90,36 @@ 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){
--- a/static/map.svg
+++ b/static/map.svg
--- a/static/shared.js
+++ b/static/shared.js
@ -1,12 +1,12 @@
 function renderMap(xx, yy) {
-  if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 &&
+  if (xx[0] > 0 && xx[0] < 36 && yy[0] > 0 && yy[0] < 18 &&
-      xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 &&
+      xx[1] > 0 && xx[1] < 36 && yy[1] > 0 && yy[1] < 18 &&
      xx[1] >= xx[0] && yy[1] >= yy[0]) {
    let grid = document.getElementById('mapgrid');
-    grid.style.top = `${yy[0]*10}%`;
+    grid.style.top = `${yy[0]*100/18}%`;
-    grid.style.left = `${100/31*xx[0]}%`;
+    grid.style.left = `${100/36*xx[0]}%`;
-    grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`;
+    grid.style.height = `${(yy[1] - yy[0] + 1) * 100/18}%`;
-    grid.style.width = `${100/31*(xx[1] - xx[0] + 1)}%`;
+    grid.style.width = `${100/36*(xx[1] - xx[0] + 1)}%`;
  } else {
    alert(`invalid coordinates x=${xx} y=${yy}`);
  }
@ -26,8 +26,8 @@ function coordsToMap(coords_bl, coords_tr) {
  let bl_x = parseInt(coords_bl.slice(1));
  let tr_x = parseInt(coords_tr.slice(1));
-  bl_y = 8 - (bl_y.charCodeAt(0) - 65);
+  bl_y = 16 - (bl_y.charCodeAt(0) - 65);
-  tr_y = 8 - (tr_y.charCodeAt(0) - 65);
+  tr_y = 16 - (tr_y.charCodeAt(0) - 65);
  renderMap([bl_x, tr_x], [tr_y, bl_y]);
 }
--- a/static/style.css
+++ b/static/style.css
@ -171,10 +171,10 @@ textarea {
 #map {
  position: relative;
  border: 1px solid black;
-  background: #fff;
+  background: #4d4d4d;
-  max-width: 800px;
+  max-width: 1440px;
  max-height: 50vh;
-  aspect-ratio: 31 / 10;
+  aspect-ratio: 2 / 1;
  margin: 0 auto;
 }
Author	SHA1	Message	Date
shy	8fec9e6ef7	Merge pull request 'Reintroduced item counter and fixed text in map.' (#9 ) from develop into main All checks were successful deployment / deployment (push) Successful in 20s Details Reviewed-on: #9	2024-05-16 22:24:10 +02:00
Shy	45c1d0f9cc	Converted text to path All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m21s Details	2024-05-16 22:09:54 +02:00
Shy	c2334642fb	Added item counter.	2024-05-16 22:07:04 +02:00
Shy	6e98d1979c	Merge branch 'develop' of ssh://git.koeln.ccc.de:2222/snoopy/in-c4 into develop	2024-05-16 21:45:44 +02:00
snoopy	1171e0de40	Merge pull request 'Refined map and design.' (#8 ) from develop into main All checks were successful deployment / deployment (push) Successful in 21s Details Reviewed-on: #8	2024-05-16 21:24:19 +02:00
Shy	360164be7a	Refined corridor All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m15s Details	2024-05-16 21:16:56 +02:00
Shy	e5e61fb9c4	Change misleading file name	2024-05-16 21:16:56 +02:00
snoopy	3b0a40ace8	Merge branch 'change-color-of-buttons' All checks were successful deployment / deployment (push) Successful in 2m18s Details	2024-05-16 21:13:50 +02:00
Shy	060560d8a2	Refined corridor All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 2m50s Details	2024-05-10 14:50:22 +02:00
Shy	0fa4e48ff5	Change misleading file name	2024-05-10 14:40:36 +02:00
Shy	62699c90eb	Limit marker roundness on small screens All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m20s Details	2024-05-09 03:02:42 +02:00
Shy	6b3783e69f	Merge branch 'change-color-of-buttons' of ssh://git.koeln.ccc.de:2222/snoopy/in-c4 into change-color-of-buttons	2024-05-08 07:30:34 +02:00
Shy	15d914fae3	Enhance visibility of marker All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m20s Details	2024-05-07 22:23:47 +02:00
Shy	bf182251ec	Yellow outline around search input	2024-05-07 22:23:47 +02:00
Shy	0c1a280a19	More beautiful #mapnote	2024-05-07 22:23:47 +02:00
Shy	d98342bd02	Fixed colors for #mapnote	2024-05-07 22:23:47 +02:00
snoopy	ebf06fa163	Merge pull request 'Added buttons for known types.' (#5 ) from type-buttons into main All checks were successful deployment / deployment (push) Successful in 18s Details Reviewed-on: #5	2024-05-07 20:31:08 +02:00
Shy	7236d859eb	Enhance visibility of marker All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m20s Details	2024-05-07 19:13:45 +02:00
Shy	f8ecf20b75	Yellow outline around search input All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m14s Details	2024-05-07 18:38:00 +02:00
Shy	065fa5adbf	More beautiful #mapnote All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m16s Details	2024-05-06 18:43:03 +02:00
Shy	1b3de458fa	Fixed colors for #mapnote	2024-05-06 17:26:31 +02:00
Shy	c9cda14f38	Fix indentation and use const where preferable All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 1m17s Details	2024-05-06 14:42:21 +02:00
Shy	9f95e704b9	Added buttons for known types. All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 2m34s Details	2024-05-04 18:28:09 +02:00
snoopy	b9e87f09d5	Merge pull request 'Add drop shadow to map' (#4 ) from change-color-of-buttons into main All checks were successful deployment / deployment (push) Successful in 1m29s Details Reviewed-on: #4	2024-05-02 20:50:07 +02:00
Shy	5b5728f7e2	Add drop shadow to map All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 53s Details	2024-05-01 17:17:35 +02:00
snoopy	457af44a79	Merge pull request 'Changes colors slightly' (#3 ) from change-color-of-buttons into main All checks were successful deployment / deployment (push) Successful in 22s Details Reviewed-on: #3	2024-05-01 01:10:05 +02:00
snoopy	9935c0562b	Changes colors slightly All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 55s Details	2024-05-01 01:08:43 +02:00
snoopy	7b51b3414d	Merge pull request 'Change button names' (#2 ) from change-color-of-buttons into main All checks were successful deployment / deployment (push) Successful in 19s Details Reviewed-on: #2	2024-05-01 00:18:23 +02:00
snoopy	a6e363220a	Fixes wrong active button color and use primary color All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 48s Details	2024-05-01 00:04:37 +02:00
Shy	299a2f5914	Modified button colors All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 47s Details	2024-04-30 21:45:01 +02:00
snoopy	b6a0d22674	Change button names All checks were successful deployment-on-pull-request / deployment (pull_request) Successful in 48s Details	2024-04-30 21:22:07 +02:00
snoopy	b41f74bf7b	Fix gitignore All checks were successful deployment / deployment (push) Successful in 18s Details Goal is to not have the contents of /data/ inside the git workflow	2024-04-30 20:19:15 +02:00
snoopy	c25188611e	Adds actions workflow for pull-requests	2024-04-30 20:18:37 +02:00
snoopy	2ec7600fa4	Merge pull request 'Updated map und grid' (#1 ) from shy/in-c4:c4-design into main All checks were successful deployment / deployment (push) Successful in 18s Details Reviewed-on: #1	2024-04-30 19:54:18 +02:00
Shy	2aae5dd441	Include C4 style sheet	2024-04-30 18:18:56 +02:00
Shy	f91b83d3ca	C4 inspired stylesheet	2024-04-30 18:18:11 +02:00
Shy	6cdeb1a3da	Updated map und grid	2024-04-30 16:27:00 +02:00
snoopy	0bc3cac6f5	Puts database into a subfolder All checks were successful deployment / deployment (push) Successful in 17s Details	2024-04-30 02:14:18 +02:00
snoopy	277b2aec57	Add Dockerfile build action All checks were successful deployment / deployment (push) Successful in 1m50s Details	2024-04-30 02:05:36 +02:00
snoopy	111a0f6e45	Changes map and update coordinate grid to c4 map	2024-04-30 01:56:38 +02:00