feat: Allow to hide some component inside the b64-playground

biscuit-auth · Sep 9, 2022 · d39d793 · d39d793
1 parent 260aa4a
commit d39d793
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/demo/playground-b64.html b/demo/playground-b64.html
@@ -17,7 +17,16 @@ <h1>demo biscuit</h1>
   }
 </style>
 
-<bc-datalog-playground-b64 showBlocks="true" fromHash="eyJhdXRob3JpemVyIjoiY2hlY2sgaWYgdXNlcigxMik7XG5hbGxvdyBpZiB0cnVlOyIsImJsb2NrcyI6W3siY29kZSI6InVzZXIoMTIpOyIsImV4dGVybmFsS2V5IjpudWxsfV19">
+<bc-datalog-playground-b64 displayFacts="false" showBlocks="true" fromHash="eyJhdXRob3JpemVyIjoiY2hlY2sgaWYgdXNlcigxMik7XG5hbGxvdyBpZiB0cnVlOyIsImJsb2NrcyI6W3siY29kZSI6InVzZXIoMTIpOyIsImV4dGVybmFsS2V5IjpudWxsfV19">
+
+</bc-datalog-playground-b64>
+
+
+<bc-datalog-playground-b64 displayFacts="true" showBlocks="true" fromHash="eyJhdXRob3JpemVyIjoiY2hlY2sgaWYgdXNlcigxMik7XG5hbGxvdyBpZiB0cnVlOyIsImJsb2NrcyI6W3siY29kZSI6InVzZXIoMTIpOyIsImV4dGVybmFsS2V5IjpudWxsfV19">
+
+</bc-datalog-playground-b64>
+
+<bc-datalog-playground-b64 displayFacts="true" displayExternalKeys="true" showBlocks="true" fromHash="eyJhdXRob3JpemVyIjoiY2hlY2sgaWYgdXNlcigxMik7XG5hbGxvdyBpZiB0cnVlOyIsImJsb2NrcyI6W3siY29kZSI6InVzZXIoMTIpOyIsImV4dGVybmFsS2V5IjpudWxsfV19">
 
 </bc-datalog-playground-b64>
 

diff --git a/src/bc-datalog-playground-base64.ts b/src/bc-datalog-playground-base64.ts
@@ -19,6 +19,8 @@ import {
 export class BCDatalogPlayground extends LitElement {
   @property() fromHash = null;
   @property() showBlocks = false;
+  @property() displayFacts = false;
+  @property() displayExternalKeys = false;
   @state() code = "";
   @state() blocks: Array<{ code: string; externalKey: string | null }> = [];
   @state() private started = false;
@@ -67,6 +69,14 @@ export class BCDatalogPlayground extends LitElement {
           console.log(newval)
           this.showBlocks = newval === "true";
       }
+
+      if (name === "displayfacts") {
+          this.displayFacts = newval === "true";
+      }
+
+      if (name === "displayexternalkeys") {
+          this.displayExternalKeys = newval === "true";
+      }
   }
 
   addBlock() {
@@ -141,28 +151,33 @@ export class BCDatalogPlayground extends LitElement {
         ) ?? [];
     }
 
+
+    const factContent = html`<p>Facts</p>
+      <bc-authorizer-content
+        .content=${authorizer_world}
+      ></bc-authorizer-content>`;
+
+    const facts = this.displayFacts ? factContent : html``;
+
     return html`
       ${this.renderBlocks(markers.blocks, parseErrors.blocks)}
       ${this.renderAuthorizer(markers.authorizer, parseErrors.authorizer)}
       <p>Result</p>
       <bc-authorizer-result .content=${authorizer_result}>
       </bc-authorizer-result>
-      <p>Facts</p>
-      <bc-authorizer-content
-        .content=${authorizer_world}
-      ></bc-authorizer-content>
+      ${facts}
     `;
   }
 
   renderExternalKeyInput(blockId: number) {
     if (blockId <= 0) return;
 
-    return html`
+    return this.displayExternalKeys ? html`:
       <input
         @input=${(e: InputEvent) => this.onUpdatedExternalKey(blockId, e)}
         value=${this.blocks[blockId].externalKey}
       />
-    `;
+    ` : html``;
   }
 
   renderBlock(
@@ -174,7 +189,7 @@ export class BCDatalogPlayground extends LitElement {
     return html`
         <p>${
           blockId == 0 ? "Authority block" : "Block " + blockId
-        }: ${this.renderExternalKeyInput(blockId)}</p>
+        } ${this.renderExternalKeyInput(blockId)}</p>
       <bc-datalog-editor
         datalog=${code}
         .markers=${markers ?? []}