snoopy/in-c4
2
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: snoopy:main
Branches Tags
snoopy:main
snoopy:develop
snoopy:change-color-of-buttons
snoopy:item-counter
snoopy:type-buttons
snoopy:master
snoopy:bulk_location_update
snoopy:bulk-create
snoopy:v1.1.0
snoopy:v1.0.0
..
compare: snoopy:master
Branches Tags
snoopy:main
snoopy:develop
snoopy:change-color-of-buttons
snoopy:item-counter
snoopy:type-buttons
snoopy:master
snoopy:bulk_location_update
snoopy:bulk-create
snoopy:v1.1.0
snoopy:v1.0.0

No commits in common. "main" and "master" have entirely different histories.
main ... master

11 changed files with 76 additions and 260 deletions
Show stats Expand all files Collapse all files

22
.forgejo/workflows/deployment-pull-request.yaml
View file

@ -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/

2
.gitignore vendored
View file

@ -1,2 +1,2 @@
/data/* /inventory.sqlite3
*.pyc *.pyc

2
database.py
View file

@ -2,7 +2,7 @@ from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker from sqlalchemy.orm import sessionmaker
SQLALCHEMY_DATABASE_URL = "sqlite:///./data/inventory.sqlite3" SQLALCHEMY_DATABASE_URL = "sqlite:///./inventory.sqlite3"
engine = create_engine( engine = create_engine(
SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}, echo=True SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}, echo=True

102
static/map.svg → static/80x80.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 97 KiB

122
static/c4.css
View file

@ -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;
}

5
static/form.html
View file

@ -3,7 +3,6 @@
<head> <head>
<title>in?</title> <title>in?</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="c4.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="form.js"></script> <script src="form.js"></script>
<script src="shared.js"></script> <script src="shared.js"></script>
@ -22,7 +21,7 @@
<b>Coordinates</b> (click on map) <b>Coordinates</b> (click on map)
<div id="map" title="Map for reference only. Not to scale!"> <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 id="mapgrid"></div>
</div> </div>
@ -50,6 +49,6 @@
</form> </form>
<button id="delete" class="btn red" autocomplete="off">Delete</button> <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> </body>
</html> </html>

22
static/form.js
View file

@ -65,22 +65,8 @@ function knownTypes() {
map[i.type] = true; map[i.type] = true;
} }
} }
let types = Object.keys(map).sort().join(', ')
// Get location in document. document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
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() { function save() {
@ -150,14 +136,14 @@ function del() {
let clicks = {x: [], y: []}; let clicks = {x: [], y: []};
function mapClick(e) { 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 y = Math.floor(18 / e.target.height * e.layerY);
let humanPos = (x, y) => { let humanPos = (x, y) => {
return `${String.fromCharCode(65 + 16 - y)}${x}`; 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) { if (clicks.x.length > 1) {
clicks.x = [x]; clicks.x = [x];
clicks.y = [y]; clicks.y = [y];

6
static/index.html
View file

@ -3,7 +3,6 @@
<head> <head>
<title>in?</title> <title>in?</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="c4.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="index.js"></script> <script src="index.js"></script>
<script src="shared.js"></script> <script src="shared.js"></script>
@ -12,13 +11,12 @@
<div id="grid"> <div id="grid">
<div id="searchcontainer"> <div id="searchcontainer">
<input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus> <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> <label for="showhidden">Show hidden items</label>
<input type="checkbox" id="showhidden"> <input type="checkbox" id="showhidden">
</div> </div>
<div id="mapcontainer"> <div id="mapcontainer">
<div id="map"> <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 id="mapgrid"></div>
</div> </div>
<p id="mapnote"></p> <p id="mapnote"></p>
@ -39,7 +37,7 @@
</div> </div>
</template> </template>
</div> </div>
<a href="form.html" class="btn primary">+</a> <a href="form.html" class="btn green">+</a>
</div> </div>
</body> </body>
</html> </html>

39
static/index.js
View file

@ -17,7 +17,6 @@ function renderItems() {
const container = document.getElementById('results'); const container = document.getElementById('results');
const template = document.getElementById('item'); const template = document.getElementById('item');
const loading = document.getElementById('loading'); const loading = document.getElementById('loading');
let count = 0;
for (const [id, item] of Object.entries(items)) { for (const [id, item] of Object.entries(items)) {
const clone = template.content.cloneNode(true); const clone = template.content.cloneNode(true);
@ -32,14 +31,11 @@ function renderItems() {
clone.querySelector(".result").id = `item-${id}`; clone.querySelector(".result").id = `item-${id}`;
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`; clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
if (item.hidden) { if (item.hidden) {
clone.querySelector(".result").classList.add('hidden'); clone.querySelector(".result").classList.add('hidden')
} else { };
count++;
}
container.appendChild(clone); container.appendChild(clone);
} };
loading.remove(); loading.remove();
updateCounter(count);
} }
function getLocString(items, item) { function getLocString(items, item) {
@ -71,7 +67,6 @@ function search(e) {
const searchAttrs = ['id', 'name', 'type', 'note', 'content']; const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
const query = e.target.value; const query = e.target.value;
const regex = new RegExp(query, 'i') const regex = new RegExp(query, 'i')
let count = 0;
for (const elem of document.getElementsByClassName('result')) { for (const elem of document.getElementsByClassName('result')) {
const item = items[elem.id.slice(5)]; const item = items[elem.id.slice(5)];
@ -90,36 +85,10 @@ function search(e) {
if (found) { if (found) {
elem.classList.remove('filtered'); elem.classList.remove('filtered');
count++;
} else { } else {
elem.classList.add('filtered'); 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){ function showhidden(e){
@ -149,4 +118,4 @@ function showItem(e) {
function hideItem(e) { function hideItem(e) {
clearMap(); clearMap();
} }

8
static/shared.js
View file

@ -1,12 +1,12 @@
function renderMap(xx, yy) { function renderMap(xx, yy) {
if (xx[0] > 0 && xx[0] < 36 && yy[0] > 0 && yy[0] < 18 && if (xx[0] > 0 && xx[0] < 37 && yy[0] > 0 && yy[0] < 18 &&
xx[1] > 0 && xx[1] < 36 && yy[1] > 0 && yy[1] < 18 && xx[1] > 0 && xx[1] < 37 && yy[1] > 0 && yy[1] < 18 &&
xx[1] >= xx[0] && yy[1] >= yy[0]) { xx[1] >= xx[0] && yy[1] >= yy[0]) {
let grid = document.getElementById('mapgrid'); let grid = document.getElementById('mapgrid');
grid.style.top = `${yy[0]*100/18}%`; 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.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 { } else {
alert(`invalid coordinates x=${xx} y=${yy}`); alert(`invalid coordinates x=${xx} y=${yy}`);
} }

6
static/style.css
View file

@ -171,10 +171,10 @@ textarea {
#map { #map {
position: relative; position: relative;
border: 1px solid black; border: 1px solid black;
background: #4d4d4d; background: #fff;
max-width: 1440px; max-width: 1480px;
max-height: 50vh; max-height: 50vh;
aspect-ratio: 2 / 1; aspect-ratio: 37 / 18;
margin: 0 auto; margin: 0 auto;
} }