@citolab/tspci 2.4.1 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -46,5 +46,5 @@
     "help": "tspci --help",
     "init": "tspci init --force --path=../../pcis"
   },
-  "gitHead": "c40332cbf554eb2c8c958e8b83db568317378142"
+  "gitHead": "332d6bc561050b4bd827c8abf9d9c0376b6870d7"
 }

package/preset/preact/src/index.tsx

@@ -55,7 +55,7 @@ class App implements IMSpci<PropTypes> {
   getState = () =>
     JSON.stringify({
       state: this.store.getState(),
-      log: this.logActions,
+      log: this.store.getActions(),
     });
 
   getResponse = () => {

package/preset/preact/src/store.ts

@@ -4,7 +4,7 @@ export type ActionType = "SET_INPUT" | "RESTORE_STATE";
 export type StateModel = { input: number };
 
 export const initStore = (initialState: StateModel, restoreData?: {
-  state: StateModel;
+  state?: StateModel;
   actions: { type: string; payload: any; timestamp?: number }[];
 }) => {
   const store = new Store<StateModel>(initialState, restoreData);

package/public/index.html

@@ -137,18 +137,24 @@
       function setResponse() {
         const response = localStorage.getItem(item.typeIdentifier + "_response");
         if (response) {
-          item.setResponse({
-            base: {
-              string: response,
-            },
-          });
+          if (item.setResponse) {
+            item.setResponse({
+              base: {
+                string: response,
+              },
+            });
+          }
+          else {
+            alert("load response only when TAO interface is implemented");
+          }
         } else {
           alert("no response stored");
         }
       }
 
       function saveResponse() {
-        localStorage.setItem(item.typeIdentifier + "_response", item.getResponse().base.string);
+        const saveResponse = item.getResponse().base.string;
+        localStorage.setItem(item.typeIdentifier + "_response", saveResponse);
       }
 
       function compareResponse() {
@@ -182,7 +188,7 @@
 
       function changeConfig(key, value) {
         item.config.properties[key] = value;
-        item.trigger(`change${key}`, value);
+        item.trigger && item.trigger(`change${key}`, value);
       }
 
       function reConfig(key, value) {
@@ -258,7 +264,9 @@
               <div class="d-flex flex-column">
                 <small class="text-muted">scoring TAO (match correct string)</small>
                 <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
-                  <button class="btn btn-outline-secondary" onClick="${() => saveResponse()}">save</button>
+                  <button class="btn btn-outline-secondary position-relative" onClick="${() => saveResponse()}">
+                    save
+                  </button>
                   <button class="btn btn-outline-secondary" onClick="${() => compareResponse()}">compare</button>
                   <button class="btn btn-outline-secondary" onClick="${() => setResponse()}">load</button>
                   <button
@@ -285,27 +293,22 @@
                 </div>
               </div>
             </div>
-            ${store && html`<div class="mt-5 d-flex flex-column gap-2">
-              <div class="d-flex justify-content-between">
+            ${store && html`<div class="mt-3 d-flex flex-column gap-2">
+              <div class="d-flex gap-2 align-items-center">
                 <button class="btn btn-outline-secondary" onClick="${() => playState()}">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16">
                     <path d="M3.905 14.21a1 1 0 0 1-1.555-.832V2.622a1 1 0 0 1 1.555-.832l9.066 5.293a1 1 0 0 1 0 1.664l-9.066 5.293zm-.57-1.664L11.4 8 3.335 2.454v10.092z"/>
                   </svg>
                 </button>
-                <span>${currentRangeValue}</span>
-              </div>
-              <div class="d-flex gap-2">
-                <span>0</span>
-                <input
-                  class="form-control-range flex-grow-1"
+                <div class="w-100 d-flex"><input
+                  class="form-control-range w-100"
                   type="range"
                   min="0"
                   max="${maxRange}"
                   value=${currentRangeValue}
                   onInput=${(e) => scrubRange(e.target.value)}
                   step="1"
-                />
-                <span>${maxRange}</span>
+                /><div>${maxRange}</div></div>
               </div>
             </div>` }
             
@@ -335,7 +338,7 @@
       item.getInstance(dom, config, state);
 
       if (item.getResponse() !== undefined) {
-        document.getElementById("noresponse").style.display = "block";
+        // document.getElementById("noresponse").style.display = "block";
       }
       localStorage.removeItem(item.typeIdentifier + "_state");
     }