split movement into movement_components, some more work on html

shared/types.ts

@@ -61,18 +61,24 @@ export const projectComponentColumns = [
 
 export interface Movement {
   id: number, // integer
-  component: number, // integer
-  quantity: number, // integer
   date: number | null, // integer
   reason: string | null,
   project: number | null, // integer
-  price: number | null, // integer
 }
 export const movementColumns = [
-  "component",
-  "quantity",
   "date",
   "reason",
   "project",
-  "price",
 ] as const satisfies (keyof Movement)[];
+
+export interface MovementComponent {
+  movement: number, // integer
+  component: number, // integer
+  quantity: number, // integer
+  price: number | null, // integer
+}
+export const movementComponentColumns = [
+  "component",
+  "quantity",
+  "price",
+] as const satisfies (keyof MovementComponent)[];

src/main.ts

@@ -2,7 +2,10 @@ import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { showRoutes } from "hono/dev";
 import { DatabaseSync, SQLInputValue } from "node:sqlite";
-import { componentColumns, locationColumns, movementColumns, projectColumns, projectComponentColumns } from "../shared/types";
+import {
+  componentColumns, locationColumns, movementColumns,
+  movementComponentColumns, projectColumns, projectComponentColumns
+} from "../shared/types";
 
 const app = new Hono();
 const api = new Hono().basePath("/api");
@@ -44,6 +47,7 @@ const tables: [string, string[]][] = [
   [ "project", projectColumns ],
   [ "project_component", projectComponentColumns ],
   [ "movement", movementColumns ],
+  [ "movement_component", movementComponentColumns ],
 ];
 for (const [ tableName, columns ] of tables) {
   const path = `/${tableName.replace(/_(.)/g, (_, v) => v.toUpperCase())}`;
@@ -128,18 +132,25 @@ for (const [ tableName, columns ] of tables) {
 
       sql.run`CREATE TABLE movement (
         id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
-        component INTEGER NOT NULL,
-        quantity INTEGER NOT NULL,
         date INTEGER,
         reason TEXT,
         project INTEGER,
-        price INTEGER,
-        FOREIGN KEY (component) REFERENCES component(id),
         FOREIGN KEY (project) REFERENCES project(id)
       ) STRICT`;
-      sql.run`CREATE INDEX movement_component_idx ON movement(component)`;
       sql.run`CREATE INDEX movement_project_idx ON movement(project)`;
 
+      sql.run`CREATE TABLE movement_component (
+        movement INTEGER NOT NULL,
+        component INTEGER NOT NULL,
+        quantity INTEGER NOT NULL,
+        price INTEGER,
+        PRIMARY KEY (movement, component),
+        FOREIGN KEY (movement) REFERENCES movement(id),
+        FOREIGN KEY (component) REFERENCES component(id)
+      ) STRICT`;
+      sql.run`CREATE INDEX movement_component_component_idx ON movement_component(component)`;
+      sql.run`CREATE INDEX movement_component_movement_idx ON movement_component(movement)`;
+
       // language=SQLite - no idea why it's not doing that automatically here
       sql.run`INSERT INTO version (version) VALUES (1)`;
       console.log("initialized database to version 1");

web/index.html

@@ -9,7 +9,7 @@
 <body>
 <div>
   Components:
-  <table>
+  <table data-table="components">
     <thead>
     <tr>
       <th>ID</th>
@@ -26,7 +26,7 @@
     </tr>
     </thead>
     <tbody>
-    <template data-table-template="component">
+    <template>
       <tr>
         <td data-field="id" data-type="id">-</td>
         <td data-field="partNumber">-</td>
@@ -44,8 +44,98 @@
     </tbody>
   </table>
 </div>
-<div class="modal">
+<div class="modal" data-modal="add-movement" data-modal-show>
-
+  <div class="modal-body">
+    <h2>Add stock movement</h2>
+    <div>
+      <label>
+        Date:<br />
+        <input type="date" />
+      </label>
+    </div>
+    <div>
+      <label>
+        Reason:<br />
+        <textarea></textarea>
+      </label>
+    </div>
+    <table data-table="movementComponent">
+      <thead>
+      <tr>
+        <th>P/N</th>
+        <th>Quantity</th>
+        <th>Price</th>
+      </tr>
+      </thead>
+      <tbody>
+      <template>
+        <tr>
+          <td data-field="partNumber">-</td>
+          <td data-input="quantity"><input /></td>
+          <td data-field="unit">-</td>
+          <td data-input="price"><input /></td>
+        </tr>
+      </template>
+      </tbody>
+    </table>
+    <button data-show-modal="add-component">Add component</button>
+  </div>
+</div>
+<div class="modal" data-modal="add-component" data-modal-show>
+  <div class="modal-body">
+    <h2>Add component</h2>
+    <div>
+      <label>
+        Part number:<br />
+        <input /><br />
+        <button>scan</button>
+      </label>
+    </div>
+    <div>
+      Category:
+      <div><label><input type="radio" name="category" value="resistor" /> Resistor</label></div>
+      <div><label><input type="radio" name="category" value="capacitor" /> Capacitor</label></div>
+      <div><label><input type="radio" name="category" value="inductor" /> Inductor</label></div>
+      <div><label><input type="radio" name="category" value="ic" /> IC</label></div>
+      <div><label><input type="radio" name="category" value="connector" /> Connector</label></div>
+      <div><label><input type="radio" name="category" value="switch" /> Switch/Button</label></div>
+      <div>
+        <label>
+          <input type="radio" name="category" value="other" />
+          Other:
+          <input />
+        </label>
+      </div>
+    </div>
+    <div>
+      <label>
+        Description:<br />
+        <input />
+      </label>
+    </div>
+    <div>
+      Packaging:
+      <div>
+        <label>
+          <input type="radio" name="packaging" value="tape" />
+          Tape
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="radio" name="packaging" value="bag" />
+          Bag
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="radio" name="packaging" value="other" />
+          Other:
+          <input />
+        </label>
+      </div>
+    </div>
+  </div>
 </div>
 <script src="main.ts"></script>
 </body>