improve under construction

holochain-apps · Dec 20, 2023 · 09043e2 · 09043e2
1 parent ff0a935
commit 09043e2
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 28 deletions.
diff --git a/ui/src/elements/how-document.ts b/ui/src/elements/how-document.ts
@@ -41,6 +41,8 @@ import { CommentControl, Control } from "../controls";
     @state() highlitRange : HilightRange | undefined;
     @state() overlapping : Comment[] | undefined
     @state() commentStats : CommentStats | undefined;
+    @state() availbleCollectionSections : Array<string>  = ["host_fn specs"]
+
     private selectedCommentText: string = ""
 
     @query('how-new-section-dialog')
@@ -461,6 +463,19 @@ import { CommentControl, Control } from "../controls";
             @add-section=${this.addSection}
             sectionType=${SectionType.Content}
           ></how-new-section-dialog>
+          ${this.availbleCollectionSections.length ? this.availbleCollectionSections.map(type => html`
+          <svg-button
+                button="plus"
+                info="add ${type} collection section"
+                infoPosition="right"
+                .click=${() => {
+                  console.log("FISH")
+                  this.dispatchEvent(new CustomEvent('add-section', { detail: {name: type, contentType: "text/markdown", sectionType:  SectionType.Content}, bubbles: true, composed: true }))
+                }}
+                ></svg-button>
+          </div>
+
+          `) : ""}
           `
         }
 

diff --git a/ui/src/elements/how-node.ts b/ui/src/elements/how-node.ts
@@ -7,7 +7,7 @@ import {HowStore} from "../how.store";
 import {ScopedElementsMixin} from "@open-wc/scoped-elements";
 import { StoreSubscriber } from "@holochain-open-dev/stores";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
-import { aliveImage } from "../images";
+import { aliveImage, underConstructionImage } from "../images";
 const angleInRadians = (angleInDegrees: number) => (angleInDegrees - 90) * (Math.PI / 180.0);
 
 const polarToCartesian = (centerX:number, centerY:number, radius:number, angleInDegrees:number) => {
@@ -125,14 +125,19 @@ export class HowNode extends ScopedElementsMixin(LitElement) {
             i+=1
         }
 
-        if (this.state == SysState.Alive) {
+        if (this.flags.includes(UnitFlags.UnderConstruction)) {
           return html`
-            <div class="${this.flags.includes(UnitFlags.Placeholder)?" placeholder":""}"><img src=${aliveImage}></div>
-            `
+          <img src=${underConstructionImage}>`
+
         } else {
-          return html`
-            <div class="${this.flags.includes(UnitFlags.Placeholder)?" placeholder":""}">${this.circle(segments)}</div>
-          `
+          if (this.state == SysState.Alive) {
+            return html`
+              <img src=${aliveImage}>`
+          } else {
+            return html`
+              <div class="circle">${this.circle(segments)}</div>
+            `
+          }
         }
     } else {    
         return html`
@@ -150,10 +155,6 @@ export class HowNode extends ScopedElementsMixin(LitElement) {
       img {
         width: 100%;
       }
-      .placeholder {
-        background-color: lightyellow;
-        border-radius: 50%;
-      }
       `,
     ];
   }

diff --git a/ui/src/elements/how-section.ts b/ui/src/elements/how-section.ts
@@ -53,6 +53,7 @@ export class HowSection extends ScopedElementsMixin(LitElement) {
       case SectionType.Content: return ""; break;
       case SectionType.Process: return html`<span class="template-marker">Process Template</span>`
       case SectionType.Requirement: return html`<span class="template-marker">Required Section</span>`
+      case SectionType.CollectionDef: return html`<span class="template-marker">Collection Definition</span>`
     }
   }
 

diff --git a/ui/src/elements/how-unit.ts b/ui/src/elements/how-unit.ts
@@ -19,6 +19,7 @@ import { InfoItem } from "./info-item";
 import { HowConfirm } from "./how-confirm";
 import { consume } from '@lit/context';
 import { Profile, ProfilesStore, profilesStoreContext } from "@holochain-open-dev/profiles";
+import { underConstructionImage } from "../images";
 
 const getCurrentStateName  = (unit:Unit, documentState:string ): string => {
   for (const [procType, procName] of unit.processes) {
@@ -123,6 +124,8 @@ export class HowUnit extends ScopedElementsMixin(LitElement) {
     const unitInfo: UnitInfo = this._unitsInfos.value[this.currentUnitEh]
     const action: Action = this._unitsActions.value[this.currentUnitEh]
 
+    const underConstruction = unit.meta.flags && unit.meta.flags.includes(UnitFlags.UnderConstruction)
+
     const path = this.getPath()
     const docInfo = this._store.getCurrentDocument(path, this.currentUnitEh)
     let allDocs = this._store.getDocumentsFiltered(path, this.currentUnitEh , DocType.Document, false)
@@ -149,7 +152,7 @@ export class HowUnit extends ScopedElementsMixin(LitElement) {
       updated = new Date(docInfo.updated)
       const document = docInfo.content
       state = document.state
-      if (isSteward  && document.getStats().emptySections == 0) {
+      if (!underConstruction && isSteward  && document.getStats().emptySections == 0) {
         controlsHTML = controlsHTML.concat(unit
             .nextStatesFrom(document.state)
             .map(
@@ -164,24 +167,31 @@ export class HowUnit extends ScopedElementsMixin(LitElement) {
     } else {
       state = unitInfo.state
     }
-    if (state == SysState.Alive && isSteward) {
+    if ( (underConstruction || state == SysState.Alive) && isSteward) {
       controlsHTML.push(html`
           <svg-button
             .click=${() => this.dispatchEvent(new CustomEvent('add-child', { detail: this.currentUnitEh, bubbles: true, composed: true }))} 
             .info=${"add child"}
             .button=${"plus"}>
-          </svg-button> 
+          </svg-button>
+        </div>
+      `)
+      if (underConstruction && isSteward) {
+        controlsHTML.push(html`
           <svg-button
             .click=${() => this.dispatchEvent(new CustomEvent('reparent', { detail: this.currentUnitEh, bubbles: true, composed: true }))} 
             .info=${"reparent"}
             .button=${"reparent"}>
           </svg-button> 
         </div>
       `)
-      if (updated) {
-        stateHTML = html`<info-item title=${`Alive as of ${updated}`} item="Alive" .name=${`as of ${updated.toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"})}`}></info-item>`
-      } else {
-        stateHTML = html`<info-item item="Alive"></info-item>`
+      }
+      if (!underConstruction) {
+        if (updated) {
+          stateHTML = html`<info-item title=${`Alive as of ${updated}`} item="Alive" .name=${`as of ${updated.toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"})}`}></info-item>`
+        } else {
+          stateHTML = html`<info-item item="Alive"></info-item>`
+        }
       }
     } else if (state == SysState.Defunct) {
       stateHTML = html`<info-item item="Defunct"></info-item >`
@@ -232,9 +242,11 @@ export class HowUnit extends ScopedElementsMixin(LitElement) {
               .button=${"question"}>
           </svg-button> 
           <div class="progress">
-            <how-node .unit=${unit} .state=${stateName} .progress=${docInfo?.content.getProgress()}> </how-node>
+            ${ underConstruction ?
+             html`<img style="width: 100%;" src=${underConstructionImage}>` :
+             html`<how-node .unit=${unit} .state=${stateName} .progress=${docInfo?.content.getProgress()}> </how-node>`}
           </div>
-          ${unit.meta.flags.includes(UnitFlags.Placeholder) ? html`<span style="margin:auto;background:yellow;border: 1px solid;">Under Construction</span>` : ""}
+          ${underConstruction ? html`<span style="margin:auto;background:yellow;border: 1px solid;padding:5px">Under Construction</span>` : ""}
           ${stateHTML}
           <div class="column unit-controls">
             ${controlsHTML}

diff --git a/ui/src/images.ts b/ui/src/images.ts
diff --git a/ui/src/initHolochain.ts b/ui/src/initHolochain.ts
@@ -79,6 +79,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Business, Legal, Finance, Regulatory", // max 25 charAgent
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["social.biz"], // full paths to parent nodes (remember it's a DAG)
@@ -87,6 +88,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Executive Function/ Council", // max 25 charAgent
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["social"], // full paths to parent nodes (remember it's a DAG)
@@ -95,6 +97,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Developer Engagement & Support", // max 25 charAgent
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["social.ops"], // full paths to parent nodes (remember it's a DAG)
@@ -199,7 +202,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Holochain Conductor", // max 25 char
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
-        meta: {flags: `${UnitFlags.Placeholder}`},
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["tech.hc_framework.runtime.conductor"], // full paths to parent nodes (remember it's a DAG)
@@ -208,7 +211,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Holochain Conductor API", // max 25 char
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
-        meta: {flags: `${UnitFlags.Placeholder}`},
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["tech.hc_framework.runtime.conductor"], // full paths to parent nodes (remember it's a DAG)
@@ -217,7 +220,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Holochain Conductor Services", // max 25 char
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
-        meta: {flags: `${UnitFlags.Placeholder}`},
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["tech.hc_framework"], // full paths to parent nodes (remember it's a DAG)
@@ -242,7 +245,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "User Interface", // max 25 char
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
-        meta: {flags: `${UnitFlags.Placeholder}`},
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["tech.hc_framework.organism.organ"], // full paths to parent nodes (remember it's a DAG)
@@ -259,7 +262,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "Shared Visibility", // max 25 char
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
-        meta: {flags: `${UnitFlags.Placeholder}`},
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["tech.hc_framework.organism.organ"], // full paths to parent nodes (remember it's a DAG)
@@ -268,7 +271,7 @@ export function initialTreeHolochain(progenitor: AgentPubKeyB64) {
         shortName: "DNA", // max 25 char
         stewards: [progenitor], // people who can change this document
         processes: std_procs,
-        meta: {flags: `${UnitFlags.Placeholder}`},
+        meta: {flags: `${UnitFlags.UnderConstruction}`},
         })],
       [SysState.Alive, new Unit({
         parents: ["tech.hc_framework.organism.organ.cell"], // full paths to parent nodes (remember it's a DAG)
@@ -733,7 +736,7 @@ function mintNFT(uint256 memory target_) external {
           },
           {
             name: "host_fn spec",
-            sourcePath:"",
+            sourcePath: SourceManual,
             sectionType: SectionType.CollectionDef,
             contentType: "text/markdown",
             content: '{"description": "specification of host functions"}',

diff --git a/ui/src/types.ts b/ui/src/types.ts
@@ -286,7 +286,7 @@ export type UnitInfo = {
 }
 
 export enum UnitFlags {
-  Placeholder = "p"
+  UnderConstruction = "p"
 }
 
 export type UnitOutput = {