make roles user-defined

Carbon-Farm-Network · Jan 14, 2025 · 074b929 · 074b929
1 parent 3d63780
commit 074b929
Show file tree

Hide file tree

Showing 15 changed files with 419 additions and 180 deletions.
diff --git a/ui/src/crud/store.ts b/ui/src/crud/store.ts
@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 export const allHashChanges = writable([]);
 export const clientStored = writable(null);
 export const allAgents = writable([]);
+export const allRoles = writable([]);
 export const allFacets = writable([]);
 export const allFacetValues = writable([]);
 export const allUnits = writable([]);
@@ -42,6 +43,9 @@ export function setActions(newActions: any) {
 
 export function setAgents(newAgents: any) {
     allAgents.update(v => newAgents);
+    const roles = newAgents.map((a: any) => a.classifiedAs[2]).flat();
+    const uniqueRoles = Array.from(new Set(roles));
+    allRoles.update(v => uniqueRoles);
 }
 
 export function setEconomicEvents(newEconomicEvents: any) {

diff --git a/ui/src/lib/Initialize.svelte b/ui/src/lib/Initialize.svelte
@@ -405,11 +405,9 @@
   onMount(checkDependencies)
   // dependenciesOk = false
 </script>
-<!-- <button
-    on:click={addRecipes}
-  >
-    RECIPES
-  </button> -->
+
+<!-- <button on:click={addRecipes}>RECIPES</button> -->
+
 {#if dependenciesOk === true}
   <slot></slot>
 {:else}

diff --git a/ui/src/lib/Map.svelte b/ui/src/lib/Map.svelte
@@ -31,10 +31,10 @@
   }
 
   const defaultIconOptions = {
-    iconSize: [41, 41],
-    iconAnchor: [20, 41],
-    popupAnchor: [1, -34],
-    tooltipAnchor: [16 - 28]
+    iconSize: [31, 31],
+    // iconAnchor: [20, 41],
+    // popupAnchor: [1, -34],
+    // tooltipAnchor: [16 - 28]
   }
 </script>
 
@@ -52,7 +52,7 @@
       }}
     >
       {#if agent.iconUrl }
-        <Icon options={{iconUrl: agent.iconUrl}} />
+        <Icon options={{iconUrl: agent.iconUrl, ...defaultIconOptions}} />
         <!-- <img class="h-20 w-20" src={agent.iconUrl} alt="" /> -->
 
       {/if}

diff --git a/ui/src/lib/Nav.svelte b/ui/src/lib/Nav.svelte
@@ -136,6 +136,36 @@
             >
               Plans
             </button>
+
+
+            <button
+              style="cursor: pointer;"
+              class="{path === '/commitments' ? 'nav-active' : 'nav-inactive'} nav-default"
+              on:click={() => navigate('/commitments')}
+              role="menuitem"
+              tabindex="-1"
+              id="user-menu-item-1">Exchanges</button
+            >
+
+
+            <button
+              style="cursor: pointer;"
+              class="{path === '/economic_events' ? 'nav-active' : 'nav-inactive'} nav-default"
+              on:click={() => navigate('/economic_events')}
+              role="menuitem"
+              tabindex="-1"
+              id="user-menu-item-1">Activity</button
+            >
+
+
+            <button
+              style="cursor: pointer;"
+              class="{path === '/economic_resources' ? 'nav-active' : 'nav-inactive'} nav-default"
+              on:click={() => navigate('/economic_resources')}
+              role="menuitem"
+              tabindex="-1"
+              id="user-menu-item-1">Inventory</button
+            >
           </div>
         </div>
       </div>
@@ -207,15 +237,15 @@
             <!-- Active: "bg-gray-100", Not Active: "" -->
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+                class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/agents')}
               role="menuitem"
               tabindex="-1"
               id="user-menu-item-1">Agents</button
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               style="text-align: left;"
               on:click={() => navigate('/resource_specifications')}
               role="menuitem"
@@ -224,71 +254,47 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/process_specifications')}
               role="menuitem"
               tabindex="-1"
               id="user-menu-item-1">Process specifications</button
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
-              on:click={() => navigate('/economic_events')}
-              role="menuitem"
-              tabindex="-1"
-              id="user-menu-item-1">Economic events</button
-            >
-            <button
-              type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
-              on:click={() => navigate('/economic_resources')}
-              role="menuitem"
-              tabindex="-1"
-              id="user-menu-item-1">Economic resources</button
-            >
-            <button
-              type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
-              on:click={() => navigate('/commitments')}
-              role="menuitem"
-              tabindex="-1"
-              id="user-menu-item-1">Exchanges</button
-            >
-            <button
-              type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/units')}
               role="menuitem"
               tabindex="-1"
               id="user-menu-item-1">Units</button
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/facets')}
               role="menuitem"
               tabindex="-1"
               id="user-menu-item-1">Facets</button
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/recipes')}
               role="menuitem"
               tabindex="-1"
               id="user-menu-item-1">Recipes</button
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/recipe_exchanges')}
               role="menuitem"
               tabindex="-1"
               id="user-menu-item-1">Recipe Exchanges</button
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/export')}
               role="menuitem"
               tabindex="-1"

diff --git a/ui/src/lib/RecipeFlowModal.svelte b/ui/src/lib/RecipeFlowModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { clickOutside } from '../utils'
-  import { allActions, allResourceSpecifications, allUnits } from '../crud/store';
+  import { allActions, allResourceSpecifications, allUnits, allRoles } from '../crud/store';
   import { createRecipeFlow, updateRecipeFlow } from '../crud/commit';
   import { onMount } from 'svelte';
   import type { RecipeFlowCreateParams, RecipeFlowUpdateParams } from '@leosprograms/vf-graphql'
@@ -30,18 +30,23 @@
     resourceSpecifications = value
   })
 
-  const dispatch = createEventDispatcher();
+  let roles: any = allRoles
+  allRoles.subscribe(value => {
+    roles = value
+  })
+
+  // let roles = [
+  //   "Farmer",
+  //   "Scouring Mill",
+  //   "Spinning Mill",
+  //   "Knitting Factory",
+  //   "Weaving Factory",
+  //   "Designer",
+  //   "Shipping",
+  //   "Network",
+  // ]
 
-  let roles = [
-    "Farmer",
-    "Scouring Mill",
-    "Spinning Mill",
-    "Knitting Factory",
-    "Weaving Factory",
-    "Designer",
-    "Shipping",
-    "Network",
-  ]
+  const dispatch = createEventDispatcher();
 
   function checkKey(e: any) {
     if (e.key === "Escape" && !e.shiftKey) {
@@ -127,7 +132,7 @@
                   for="provider_role"
                   class="block text-sm font-medium leading-6 text-gray-900">Provider Role</label
                 >
-                <select
+                <!-- <select
                   id="provider_role"
                   name="provider_role"
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
@@ -140,7 +145,28 @@
                   {#each roles as role}
                     <option value={role}>{role}</option>
                   {/each}
-                </select>
+                </select> -->
+                <input
+                  type="text"
+                  id="classifiedAs"
+                  name="classifiedAs"
+                  list="roleSuggestions"
+                  bind:value={recipeFlow.providerRole}
+                  on:input={e => {
+                  const input = e.target;
+                  if (input instanceof HTMLInputElement) {
+                    recipeFlow.providerRole = input.value;
+                    //@ts-ignore
+                    // currentAgent.imageUrl = roleImages[role] || 'profile.png'
+                  }
+                  }}
+                  class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+                <datalist id="roleSuggestions">
+                  {#each roles as role (role)}
+                  <option value={role}>{role}</option>
+                  {/each}
+                </datalist>
               </div>
             </div>
 
@@ -150,7 +176,7 @@
                   for="receiverRole"
                   class="block text-sm font-medium leading-6 text-gray-900">Receiver Role</label
                 >
-                <select
+                <!-- <select
                   id="receiverRole"
                   name="receiverRole"
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
@@ -163,7 +189,28 @@
                   {#each roles as role}
                     <option value={role}>{role}</option>
                   {/each}
-                </select>
+                </select> -->
+                <input
+                  type="text"
+                  id="classifiedAs"
+                  name="classifiedAs"
+                  list="roleSuggestions"
+                  bind:value={recipeFlow.receiverRole}
+                  on:input={e => {
+                  const input = e.target;
+                  if (input instanceof HTMLInputElement) {
+                    recipeFlow.receiverRole = input.value;
+                    //@ts-ignore
+                    // currentAgent.imageUrl = roleImages[role] || 'profile.png'
+                  }
+                  }}
+                  class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+                <datalist id="roleSuggestions">
+                  {#each roles as role (role)}
+                  <option value={role}>{role}</option>
+                  {/each}
+                </datalist>
               </div>
             </div>
 
@@ -259,20 +306,23 @@
                   for="unit"
                   class="block text-sm font-medium leading-6 text-gray-900">Unit</label
                 >
-                {recipeFlow.resourceQuantity?.hasUnit ? units.find(it => it.id === recipeFlow.resourceQuantity.hasUnit)?.label
-                 : ""}
-                <!-- <select
+                <!-- {recipeFlow.resourceQuantity?.hasUnit ? units.find(it => it.id === recipeFlow.resourceQuantity.hasUnit)?.label
+                 : ""} -->
+                <select
                   id="unit"
                   name="unit"
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  value={recipeFlow.resourceQuantity?.hasUnit}
                   on:change={(e) => {
-                    recipeFlow.unit = e.target.value
+                    if (recipeFlow.resourceQuantity) {
+                      recipeFlow.resourceQuantity.hasUnit = e.target.value
+                    }
                   }}
                 >
                   {#each $allUnits as unit}
                     <option value={unit.id}>{unit.label}</option>
                   {/each}
-                </select> -->
+                </select>
               </div>
             </div>
 

diff --git a/ui/src/lib/SidePanel.svelte b/ui/src/lib/SidePanel.svelte
@@ -76,7 +76,7 @@
               -->
               <div class="ml-8">
                 {#if panelInfo && panelInfo.imageUrl}
-                  <img class="h-20 w-20" src={panelInfo.imageUrl} alt="" />
+                  <img class="w-20" src={panelInfo.imageUrl} alt="" />
                 {:else}
                   <span
                     class="inline-block h-14 w-14 rounded-full overflow-hidden bg-gray-100"

diff --git a/ui/src/lib/SvgIcon.svelte b/ui/src/lib/SvgIcon.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { svgIcons } from "./svgIcons"
+
+    export let icon: string
+    export let style: string = ""
+    export let color: string =""
+    export let size: string = "20px"
+
+    $:iconStr = () => {
+        let i = svgIcons[icon]
+        if (!i) console.log("missing icon for ", icon)
+        if (color) {
+            i = i.replace("<svg",`<svg fill="${color}"`)
+        }
+        return `data:image/svg+xml;charset=utf-8,${i.replace("#","%23")}`
+    }
+    $:styleStr = `${size ? "width:"+size:""};`
+</script>
+
+<div class="icon" style={style}><img width={size} src={iconStr()}/></div>
+
+<style>
+    .icon {
+        display: inline-block;
+    }
+    .icon img {
+        vertical-align: middle;
+    }
+</style>