rendering updates and console log/error cleanup

neighbour-hoods · Jan 24, 2024 · b43972a · b43972a
1 parent 3d9656a
commit b43972a
Show file tree

Hide file tree

Showing 8 changed files with 1,566 additions and 101 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/src/components/list-item.ts b/ui/src/components/list-item.ts
@@ -10,7 +10,7 @@ export class ListItem extends ScopedRegistryHost(LitElement) {
 
     render() {
         return html`
-            <mwc-list-item class="list-item" @click=${this.dispatchSelectedList}>${this.listName}</mwc-list-item>
+            <span class="list-item" @click=${this.dispatchSelectedList}>${this.listName}</span>
         `
     }
 
@@ -27,13 +27,6 @@ export class ListItem extends ScopedRegistryHost(LitElement) {
         }
     }
 
-    static get scopedElements() {
-        return {
-            'mwc-list-item': MWCListItem,
-        }
-    }
-
-
     static get styles() {
         return [
             variables,

diff --git a/ui/src/components/sensemaker/context-selector.ts b/ui/src/components/sensemaker/context-selector.ts
@@ -24,7 +24,7 @@ export class ContextSelector extends ScopedRegistryHost(LitElement) {
     });
 
     render() {
-        console.log('rendering context selector', get(this.sensemakerStore.contexts), this.contexts?.value)
+        // console.log('rendering context selector', get(this.sensemakerStore.contexts), this.contexts?.value)
         return html`
             <div class="list-list-container">
                 <mwc-list>

diff --git a/ui/src/components/sensemaker/widgets/average-heat-dimension-display.ts b/ui/src/components/sensemaker/widgets/average-heat-dimension-display.ts
@@ -3,7 +3,6 @@ import { OutputAssessmentControl, RangeValueInteger } from '@neighbourhoods/clie
 import { variables } from '../../../styles/variables';
 
 export class AverageHeatDimensionDisplay extends OutputAssessmentControl {
-
     render() {
         const latestAssessmentValue = this.assessment ? (this.assessment.value as RangeValueInteger).Integer : 0
         let emoji = "🧊";
@@ -36,25 +35,26 @@ export class AverageHeatDimensionDisplay extends OutputAssessmentControl {
             css`
                 .display-box {
                     background-color: var(--nh-theme-accent-muted);
-                    padding: 2px;
                     border-radius: 50%;
-                    width: 32px;
-                    height: 32px;
-                    display: flex;
-                    margin: 2px;
                     border-color: var(--nh-theme-accent-muted);
                     border-style: solid;
-                    justify-content: center;
+                    box-sizing: border-box;
+                    display: flex;
                     align-items: center;
-                    position: relative;
-                    top: 50%;
-                    transform: translateY(-55%);
-                    font-size: 16px;
+                    justify-content: center;
+
+                    width: 36px;
+                    height: 36px;
+                    font-size: .75rem;
+                    line-height: 1.5rem;
                 }
+
                 .display-box-wrapper {
-                    position: relative;
-                    align-items: center;
-                    justify-content: center;
+                    display: grid;
+                    place-content: center;
+                    box-sizing: border-box;
+                    width: 48px;
+                    height: 48px;
                 }
             `
         ]

diff --git a/ui/src/components/sensemaker/widgets/importance-dimension-assessment.ts b/ui/src/components/sensemaker/widgets/importance-dimension-assessment.ts
@@ -8,13 +8,16 @@ import {
 import { variables } from '../../../styles/variables';
 
 export class ImportanceDimensionAssessment extends InputAssessmentControl {
-
   @state()
-  loading: boolean = true
+  loading: boolean = false
 
   @state()
   assessed: boolean = false
 
+  public loadData = async () => {
+    console.log('this.subscriber :>> ', this.assessment, this.nhDelegate);
+  }
+
   createAssessment = async () => {
     if (!this.assessed) {
       this.assessment = await this.nhDelegate.createAssessment({ Integer: 1 })
@@ -24,7 +27,7 @@ export class ImportanceDimensionAssessment extends InputAssessmentControl {
 
   render() {
     if (this.loading) {
-      return html`<span>loading<span>`
+      return html`<sl-spinner class="icon-spinner"></sl-spinner>`
     }
     return html`
       <div class="importance-toggle">
@@ -41,63 +44,61 @@ export class ImportanceDimensionAssessment extends InputAssessmentControl {
       </div>`
   }
 
-  static get scopedElements() {
-    return {
-      'mwc-checkbox': Checkbox,
-    }
-  }
   static get styles() {
     return [
       variables,
       css`
       .importance-toggle {
-          display: flex;
-          flex-direction: row;
-          background-color: var(--nh-theme-bg-muted);
-          padding: 2px;
-          border-radius: var(--border-r-tiny);
-          border-color: var(--nh-theme-accent-muted);
-          border-style: solid;
-          border-width: 1px;
-          margin: 4px;
-          font-size: 16px;
-          align-items: center;
-          justify-content: center;
-          gap: 6px;
-          flex-wrap: nowrap;
+        display: grid;
+        box-sizing: border-box;
+        width: 48px;
+        height: 48px;
+        place-content: center;
+      }
+
+      .importance-toggle:hover .star {
+        background-color: var(--nh-theme-warning-default); 
       }
+
       .star-checkbox {
-          display: flex;
-          padding-left: 10px;
-          padding-right: 10px;
-        }
+        display: grid;
+        place-content: center;
+      }
 
-        .star-checkbox input[type="checkbox"] {
-          display: none;
-        }
+      .star-checkbox input[type="checkbox"] {
+        display: none;
+      }
 
-        .star-checkbox .star {
-          display: inline-block;
-          width: 20px;
-          height: 20px;
-          background-color: #ccc;
-          clip-path: polygon(
-            50% 0%,
-            63% 38%,
-            100% 38%,
-            69% 59%,
-            82% 100%,
-            50% 75%,
-            18% 100%,
-            31% 59%,
-            0% 38%,
-            37% 38%
-          );
-        }
+      .star-checkbox .star {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background-color: #ccc;
+        clip-path: polygon(
+          50% 0%,
+          63% 38%,
+          100% 38%,
+          69% 59%,
+          82% 100%,
+          50% 75%,
+          18% 100%,
+          31% 59%,
+          0% 38%,
+          37% 38%
+        );
+      }
 
-        .star-checkbox input[type="checkbox"]:checked + .star {
-          background-color: #ffdd00; /* Replace with your desired color */
-        }
+      .star-checkbox input[type="checkbox"]:checked + .star {
+        background-color: #ffdd00; /* Replace with your desired color */
+      }
+
+      .icon-spinner {
+        font-size: 2.15rem;
+        --speed: 10000ms;
+        --track-width: 4px;
+        --indicator-color: var(--nh-theme-bg-muted);
+        margin: 3px
+      }
     `]
   }
 }
diff --git a/ui/src/components/sensemaker/widgets/total-importance-dimension-display.ts b/ui/src/components/sensemaker/widgets/total-importance-dimension-display.ts
@@ -28,26 +28,26 @@ export class TotalImportanceDimensionDisplay extends OutputAssessmentControl {
             }
             .display-box {
                 background-color: var(--nh-theme-accent-muted);
-                padding: 2px;
                 border-radius: 50%;
-                width: 32px;
-                height: 32px;
-                display: flex;
-                margin: 2px;
                 border-color: var(--nh-theme-accent-muted);
                 border-style: solid;
-                justify-content: center;
+                box-sizing: border-box;
+                display: flex;
                 align-items: center;
-                position: relative;
-                top: 50%;
-                transform: translateY(-55%);
-                font-size: 16px;
-                color: var(--nh-theme-fg-default);
+                justify-content: center;
+
+                width: 36px;
+                height: 36px;
+                font-size: .75rem;
+                line-height: 1.5rem;
             }
+
             .display-box-wrapper {
-                position: relative;
-                align-items: center;
-                justify-content: center;
+                display: grid;
+                place-content: center;
+                box-sizing: border-box;
+                width: 48px;
+                height: 48px;
             }
             `
             ]

diff --git a/ui/src/components/task-item.ts b/ui/src/components/task-item.ts
@@ -39,16 +39,16 @@ export class TaskItem extends ScopedRegistryHost(LitElement) {
     }
 
     render() {
-        console.log(this.completed)
+        // console.log(this.completed)
         return html`
             <div class="task-item-container">
-                <mwc-check-list-item class="check-list-item"
-                    left
-                    ?selected=${this.completed}
+                <input type="checkbox" class="check-list-item"
+                    checked=${this.completed}
                     @click=${this.dispatchTaskToggle}
                 >
-                    ${this.task.entry.description}
-                </mwc-check-list-item>
+                </input>
+
+                <label>${this.task.entry.description}</label>
             </div>
         `
     }
@@ -64,7 +64,7 @@ export class TaskItem extends ScopedRegistryHost(LitElement) {
         return {
             'mwc-checkbox': Checkbox,
             'mwc-list-item': ListItem,
-            'mwc-check-list-item': CheckListItem,
+            // 'nh-checkbox': NHCheckbox,
         }
     }
 }
diff --git a/ui/src/todo-app.ts b/ui/src/todo-app.ts
@@ -68,13 +68,14 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) {
         appletRoleName
       );
 
-      const allTasks = await this.todoStore.fetchAllTasks()
-      console.log(allTasks)
+      this.todoStore.fetchAllTasks()
+      // console.log(allTasks)
       const allTaskEntryHashes = get(this.todoStore.allTaskEntryHashes())
-      console.log(allTaskEntryHashes)
+      // console.log(allTaskEntryHashes)
       await this.nhDelegate.sensemakerStore.getAssessmentsForResources({
         resource_ehs: allTaskEntryHashes
       })
+      console.log('got assessments');
       this.loaded = true;
     }
     catch (e) {
@@ -83,7 +84,7 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) {
   }
 
   render() {
-    console.log("In the render")
+    // console.log("In the render")
 
     console.log("Render", `loaded is ${this.loaded}`)
     if (!this.loaded) {
@@ -94,8 +95,6 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) {
       </div>`;
     }
 
-    console.log("Rendering todo-app")
-
     // the task list component is also used to display a cultural context, so we need to pass a flag to it
     // TODO: instead of having one task-list component, might be best to have separate ones - context view, empty list, etc. and just pass through the list itself
     const taskList = html`
@@ -119,7 +118,7 @@ export class TodoApplet extends ScopedRegistryHost(AppBlock) {
                     ${this.lists?.value?.map((listName) => html`
                         <list-item class="todo-list-list-item" listName=${listName}></list-item>
                     `)}
-                <mwc-list>
+                </mwc-list>
               </div>
               <div class="view-selector-heading">Data Views</div>
               <context-selector .appId=${this.nhDelegate.appInfo.installed_app_id} .sensemakerStore=${this.sensemakerStore} @list-selected=${this.computeContext}></context-selector>