sweetpea
Version:
Signal and Web Component Enhanced Web Apps
110 lines (84 loc) • 4.3 kB
HTML
<html>
<body>
<template id="supervisor-interface">
<div class="perspective movable" use="movable selectable focusable">
<div class="card front shadow active-card">
<div class="card-header drag-handle focusable-handle">
<span class="selectable-handle small" data-slot="worker-path">ddd</span>
<button type="button" class="btn btn-sm btn-outline-secondary float-end opacity-50" style="--bs-btn-padding-y: .09rem; --bs-btn-padding-x: .28rem; --bs-btn-font-size: .80rem;" onclick="(element, component)=>this.flip('.back')"><i class="bi bi-gear"></i></button>
</div>
<ul class="list-group list-group-flush" data-feature="standard-io">
<li class="list-group-item">
<span data-feature="standard-input" class="badge rounded-pill text-bg-dark float-start" data-slot="queue-count" data-template="${count}/${total}"></span>
<span data-feature="standard-output" class="badge rounded-pill text-bg-dark float-end" data-slot="buffer-count" data-template="${count}/${total}"></span>
<x-valve data-feature="standard-input" id="input" data-direction="in" data-icon="fire"></x-valve>
<x-valve data-feature="standard-output" id="output" data-direction="out" data-icon="fire"></x-valve>
</li>
</ul>
<ul class="list-group list-group-flush" data-slot="parameters">
</ul>
<div class="card-footer text-wrap">
<small>
</small>
</div>
</div>
<div class="card back worker-configuration shadow">
<div class="card-header drag-handle focusable-handle">
<span class="selectable-handle">Configuration</span> <button type="button" class="btn btn-sm btn-outline-success float-end" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .55rem;" onclick="(element, component)=>this.flip('.front')"><i class="bi bi-check-circle"></i></button>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<select class="form-select form-select-sm mb-2" data-slot="category-list">
</select>
<select class="form-select form-select-sm mb-2" data-slot="worker-list">
</select>
</li>
<li class="list-group-item" data-slot="description"></li>
</ul>
<div class="card-footer text-wrap">
<small class="muted">
Configure your component
</small>
</div>
</div>
</div>
</template>
<template id="worker-parameters">
<li class="list-group-item" data-slot="type">
</li>
</template>
<template id="worker-parameters-enum">
<select class="form-select form-select-sm mb-2" data-slot="option-list">
</select>
</template>
<template id="worker-parameters-string">
<div class="form-floating">
<input id="floatingInput" type="text" class="form-control" data-bind="value">
<label for="floatingInput" data-bind="name">URL</label>
</div>
</template>
<template id="worker-parameters-number">
<div class="row">
<div class="col">
<label for="inputPassword6" class="col-form-label">Number</label>
</div>
<div class="col">
<input type="number" class="form-control" data-bind="value">
</div>
</div>
</template>
<template id="worker-parameters-event">
<x-valve data-bind="name@id" data-bind-template="${name}-message" data-direction="in" data-icon="box-arrow-up-right"></x-valve>
<x-valve data-bind="name@id" data-bind-template="${name}-event" data-direction="out" data-icon="envelope"></x-valve>
<span data-bind="name">DATA BIND NAME</span>
<div data-bind="description"><small>DATA BIND NAME</small></div>
</template>
<template id="cable-valve">
<style>
.valve {
}
</style>
<span use="connectable" class="valve glow-sm d-inline-block position-absolute p-1 top-50 {{direction=='out'?'start-100':'start-0'}} translate-middle badge rounded-pill bg-success"><i class="bi bi-{{icon}}"></i></span>
</template>
</body>
</html>