associations

frontend/src/App.svelte

@@ -20,11 +20,18 @@
     TableBody,
     TableBodyRow,
     TableBodyCell,
+    Modal,
   } from "flowbite-svelte";
+  import SubThings from "./lib/SubThings.svelte";
 
   let name: string;
   let thingsList: things.Thing[] = [];
 
+  let thingID: number;
+  let subthingOpened: boolean = false;
+
+  $: console.log(subthingOpened);
+
   function update() {
     GetThings().then((ts) => {
       thingsList = ts;
@@ -37,7 +44,7 @@
     name = "";
   }
 
-  function deleteEvent(id: number) {
+  function deleteThing(id: number) {
     DeleteThing(id).then(update);
   }
 
@@ -79,10 +86,24 @@
             {t.Name}
           </TableBodyCell>
           <TableBodyCell>
-            <Button on:click={(_) => deleteEvent(t.ID)}>Delete</Button>
+            <Button on:click={(_) => deleteThing(t.ID)}>Delete</Button>
+            <Button
+              on:click={(_) => {
+                thingID = t.ID;
+                subthingOpened = true;
+              }}>Edit</Button
+            >
           </TableBodyCell>
         </TableBodyRow>
       {/each}
     </TableBody>
   </Table>
+  <Modal bind:open={subthingOpened} size="xl">
+    <SubThings bind:thingID />
+    <Button
+      on:click={(_) => {
+        subthingOpened = false;
+      }}>Close</Button
+    >
+  </Modal>
 </main>

frontend/src/lib/SubThings.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import {
+    Button,
+    Input,
+    Label,
+    Table,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+  } from "flowbite-svelte";
+  import { things } from "../../wailsjs/go/models";
+  import {
+    AddSubThing,
+    DeleteSubThing,
+    GetSubThings,
+  } from "../../wailsjs/go/things/Service";
+
+  export let thingID: null | number = null;
+  let subThings: things.SubThing[] = [];
+
+  function update() {
+    if (thingID) {
+      GetSubThings(thingID).then((ts) => {
+        subThings = ts;
+      });
+    }
+  }
+
+  $: {
+    thingID = thingID;
+    update();
+  }
+
+  let name: string;
+
+  function submit(e: Event) {
+    e.preventDefault();
+    AddSubThing(thingID, name).then(update);
+    name = "";
+  }
+
+  function deleteSubThing(id: number) {
+    DeleteSubThing(id).then(update);
+  }
+</script>
+
+<form class="max-w-96 m-5 grid-cols-1 gap-10" on:submit={submit}>
+  <div class="m-5">
+    <Label for="first_name" class="mb-2">First name</Label>
+    <Input type="text" placeholder="John" bind:value={name} required />
+  </div>
+  <div class="m-5">
+    <Button type="submit">Submit</Button>
+  </div>
+</form>
+
+<Table class="m-5">
+  <TableHead>
+    <TableHeadCell>ID</TableHeadCell>
+    <TableHeadCell>Name</TableHeadCell>
+
+    <TableHeadCell>Delete</TableHeadCell>
+  </TableHead>
+  <TableBody>
+    {#each subThings as t}
+      <TableBodyRow>
+        <TableBodyCell>
+          {t.ID}
+        </TableBodyCell>
+
+        <TableBodyCell>
+          {t.Name}
+        </TableBodyCell>
+        <TableBodyCell>
+          <Button on:click={(_) => deleteSubThing(t.ID)}>Delete</Button>
+        </TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</Table>

frontend/wailsjs/go/models.ts

@@ -1,8 +1,25 @@
 export namespace things {
 	
+	export class SubThing {
+	    ID: number;
+	    ThingID: number;
+	    Name: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new SubThing(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.ID = source["ID"];
+	        this.ThingID = source["ThingID"];
+	        this.Name = source["Name"];
+	    }
+	}
 	export class Thing {
 	    ID: number;
 	    Name: string;
+	    Subthings: SubThing[];
 	
 	    static createFrom(source: any = {}) {
 	        return new Thing(source);
@@ -12,7 +29,26 @@ export namespace things {
 	        if ('string' === typeof source) source = JSON.parse(source);
 	        this.ID = source["ID"];
 	        this.Name = source["Name"];
+	        this.Subthings = this.convertValues(source["Subthings"], SubThing);
 	    }
+	
+		convertValues(a: any, classs: any, asMap: boolean = false): any {
+		    if (!a) {
+		        return a;
+		    }
+		    if (a.slice && a.map) {
+		        return (a as any[]).map(elem => this.convertValues(elem, classs));
+		    } else if ("object" === typeof a) {
+		        if (asMap) {
+		            for (const key of Object.keys(a)) {
+		                a[key] = new classs(a[key]);
+		            }
+		            return a;
+		        }
+		        return new classs(a);
+		    }
+		    return a;
+		}
 	}
 
 }

frontend/wailsjs/go/things/Service.d.ts

@@ -2,8 +2,14 @@
 // This file is automatically generated. DO NOT EDIT
 import {things} from '../models';
 
+export function AddSubThing(arg1:number,arg2:string):Promise<void>;
+
+export function DeleteSubThing(arg1:number):Promise<void>;
+
 export function DeleteThing(arg1:number):Promise<void>;
 
+export function GetSubThings(arg1:number):Promise<Array<things.SubThing>>;
+
 export function GetThings():Promise<Array<things.Thing>>;
 
 export function NewThing(arg1:string):Promise<void>;

frontend/wailsjs/go/things/Service.js

@@ -2,10 +2,22 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function AddSubThing(arg1, arg2) {
+  return window['go']['things']['Service']['AddSubThing'](arg1, arg2);
+}
+
+export function DeleteSubThing(arg1) {
+  return window['go']['things']['Service']['DeleteSubThing'](arg1);
+}
+
 export function DeleteThing(arg1) {
   return window['go']['things']['Service']['DeleteThing'](arg1);
 }
 
+export function GetSubThings(arg1) {
+  return window['go']['things']['Service']['GetSubThings'](arg1);
+}
+
 export function GetThings() {
   return window['go']['things']['Service']['GetThings']();
 }