Bindings

SketchSystems.spec

Bindings
  No bindings
    add binding -> Selecting target
  Selecting target
    bind -> Sending request
    done -> No bindings
  Selecting target with error
    try again -> Sending request
    done -> No bindings
  Sending request
    success -> Binding
    error -> Selecting target with error
    done -> No bindings
  Binding
    success -> Bound
    error -> Selecting target with error
    done -> No bindings
  Bound
    unbind -> Requesting unbind
    done -> One binding
  Binding error
    try again -> Binding
    give up -> Selecting target
  Requesting unbind
    success -> Unbinding
    done -> No bindings
  Unbinding
    success -> Selecting target
    done -> No bindings
  One binding

SketchSystems_prototype.js

let timeout

function render(model) {
  clearTimeout(timeout)
  
  let state = model.active_states[0].name;
  
  /*
  if (state === 'Sending request') {
    timeout = setTimeout(() => model.emit("success"), 1000);
  }
  
  if (state === 'Binding') {
    timeout = setTimeout(() => model.emit("success"), 1000);
  }
  
  if (state === 'Requesting unbind') {
    timeout = setTimeout(() => model.emit("success"), 1000);
  }
  
  if (state === 'Unbinding') {
    timeout = setTimeout(() => model.emit("success"), 1000);
  }
  */
  
  return <>
    <link
      rel="stylesheet"
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    />
    <main
      className="relative border border-gray-700 p-0 max-w-lg m-auto flex flex-col"
    >
      <header className="p-2 border-b border-gray-700 flex justify-between items-baseline">
        <h1 className="text-lg text-gray-700 font-bold">Current bindings</h1>
        <Button onClick={() => model.emit(state === "No bindings" ? "add binding" : "done")}>
          {state === "No bindings" ? "Add binding" : "Done"}
        </Button>
      </header>
      {state !== "No bindings" &&
        <div className="h-0 mx-2 z-10">
          <ul className="-mt-1 bg-white border shadow">
            <li className="m-0 px-3 py-2 flex justify-between items-baseline">
              <span className="mr-2">
                function-1
                { (state === "Bound" || state === "Requesting unbind") &&
                  <span className="text-sm font-bold text-gray-600 ml-2">(bound)</span>
                }
              </span>
              { state === "Selecting target" &&
                  <Button onClick={() => model.emit("bind")}>Bind</Button> ||
                state === "Selecting target with error" &&
                  <span>
                    <span className="font-bold text-gray-600 text-sm py-1 mr-2">Some error (maybe permissions)…</span>
                    <Button onClick={() => model.emit("try again")}>Bind</Button>
                  </span> ||
                state === "Sending request" &&
                 <span className="font-bold text-gray-600 text-sm py-1">Requesting…</span> ||
                state === "Binding" &&
                 <span className="font-bold text-gray-600 text-sm py-1">Binding…</span> ||
                state === "Binding error" &&
                  <span>
                    <span className="font-bold text-gray-600 text-sm py-1 mr-2">error…</span>
                    <Button onClick={() => model.emit("try again")}>Try again</Button>
                    <span className="font-bold text-gray-600 text-sm py-1 mx-2">or</span>
                    <Button onClick={() => model.emit("give up")}>Give up</Button>
                  </span> ||
                state === "Requesting unbind" &&
                 <span className="font-bold text-gray-600 text-sm py-1">Requesting…</span> ||
                state === "Unbinding" &&
                 <span className="font-bold text-gray-600 text-sm py-1">Unbinding…</span> ||
                ""
              }
            </li>
          </ul>
        </div>
      }
      <div className="p-2">
        { ['Bound'].includes(state) &&
            <p className="text-base text-gray-600">You have no bindings for this object</p>
        }
      </div>
    </main>
  </>;
}

const Button = (props) =>
  <button
    class="text-sm font-bold bg-gray-700 hover:bg-gray-600 focus:outline-none text-white px-4 py-1 rounded-full"
    {...props}
  >
      {props.children}
  </button>