sweetpea
Version:
Signal and Web Component Enhanced Web Apps
255 lines (158 loc) • 13.1 kB
HTML
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sweetpea · Signal and Web Component Enhanced Web Apps</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍈</text></svg>">
<script type="importmap">
{
"imports": {
"dataset-store": "./src/plug-ins/dataset-store/DatasetStore.js",
"system-parameters": "./src/plug-ins/system-parameters/SystemParameters.js",
"system-integration": "./src/plug-ins/system-integration/SystemIntegration.js",
"view": "./src/plug-ins/view/View.js",
"interpolate": "./src/plug-ins/interpolate/index.js",
"location": "./src/plug-ins/location/index.js",
"isEqual": "./src/plug-ins/is-equal/isEqual.js",
"cloneDeep": "./src/plug-ins/clone-deep/cloneDeep.js",
"theme-reader": "./src/plug-ins/theme-reader/ThemeReader.js",
"automatic-transmission": "./src/plug-ins/automatic-transmission/AutomaticTransmission.js",
"state-machine": "./src/plug-ins/state-machine/StateMachine.js",
"event-emitter": "./src/plug-ins/event-emitter/EventEmitter.js",
"string-bikini": "./src/plug-ins/string-bikini/index.js",
"work-queue": "./src/plug-ins/work-queue/WorkQueue.js",
"job-buffer": "./src/plug-ins/job-buffer/JobBuffer.js",
"job-queue": "./src/plug-ins/job-queue/JobQueue.js",
"movable": "./src/plug-ins/mouse/Movable.js",
"connectable": "./src/plug-ins/mouse/Connectable.js",
"theoretical": "./src/plug-ins/theoretical/index.js",
"masticator": "./src/plug-ins/masticator/index.js",
"signal": "./src/plug-ins/signal/Signal.js",
"signal-merge": "./src/plug-ins/signal-merge/index.js",
"water-closet": "./src/plug-ins/water-closet/WaterCloset.js"
}
}
</script>
<style>
body {
background-color: #212529; /* NOTE: this must be hard-coded to prevent flash of white */
}
</style>
</head>
<script type="module">
Object.defineProperty(globalThis, 'VPL_ELEMENT_PREFIX', {
value: 'x', // Value of the constant
writable: false, // Prevent modification of the constant
enumerable: false, // Make it enumerable (optional, for iteration)
configurable: false // Prevent deletion or reconfiguration of the constant
});
import masticator from 'masticator';
await masticator('css/style.css', 'css/bootstrap.min.css','css/bootstrap-icons.min.css');
import {StageElement, CableElement, ValveElement, SuperElement } from 'theoretical';
await StageElement.load();
await ValveElement.load();
await CableElement.load();
await SuperElement.load();
// RISC
customElements.define(`${VPL_ELEMENT_PREFIX}-stage`, StageElement);
customElements.define(`${VPL_ELEMENT_PREFIX}-valve`, ValveElement);
customElements.define(`${VPL_ELEMENT_PREFIX}-super`, SuperElement); // load super before cable
customElements.define(`${VPL_ELEMENT_PREFIX}-cable`, CableElement); // load after super
</script>
<script src="css/bootstrap.bundle.min.js"></script>
<script>
</script>
<body>
<x-stage controls minimap template="stage" theme="original">
<x-super id="guid-18865fe2-de5f-43f0-abc0-3426e6e3a672" x="427" y="32" supervisor="system/standard" worker="stage/director" data-text="" selected="false"></x-super>
<x-super id="guid-92e560db-8df1-49e9-a33e-dc1e84745721" x="24" y="71" supervisor="system/standard" worker="stage/parameter" data-text="" data-json="{"url":"./samples/json-path-example.json"}" selected="false"></x-super>
<x-super id="guid-b1742e3d-bf2b-4dff-9906-3bd2204c4af3" x="762" y="151" supervisor="system/standard" worker="logging-and-monitoring/console" data-text="Stage Director Output:" data-context="log" selected="false"></x-super>
<x-cable id="guid-938cee5a-4329-4a2c-a5f8-2f787bc90097" from="guid-92e560db-8df1-49e9-a33e-dc1e84745721:output" to="guid-18865fe2-de5f-43f0-abc0-3426e6e3a672:start-message" selected="false"></x-cable>
<x-cable id="guid-b5b52451-178f-4579-b1bd-18bda31a3028" from="guid-18865fe2-de5f-43f0-abc0-3426e6e3a672:start-event" to="guid-b1742e3d-bf2b-4dff-9906-3bd2204c4af3:input" selected="false"></x-cable>
<x-super id="guid-c8b532ee-65ff-43d8-af43-4d2497081566" x="93" y="438" supervisor="system/standard" worker="stage/listener" data-text="" data-event="bork" selected="false"></x-super>
<x-super id="guid-deaabf37-4aad-4e85-930f-e89c24b9f280" x="567" y="427" supervisor="system/standard" worker="logging-and-monitoring/console" data-text="Bork Event Data:" data-context="warn" selected="false"></x-super>
<x-cable id="guid-9b2eeaf4-68de-4c80-ad6f-30bd8ba3ff38" from="guid-c8b532ee-65ff-43d8-af43-4d2497081566:output" to="guid-deaabf37-4aad-4e85-930f-e89c24b9f280:input" selected="false"></x-cable>
<x-super id="guid-ddb000eb-7209-42a1-b034-9000895b7331" x="1079" y="33" supervisor="system/standard" worker="network-services/js-fetch" data-text="" data-url="uses packet" selected="false"></x-super><x-cable id="guid-fd1c0724-0a74-4ece-bfed-5c157a0caeb0" from="guid-18865fe2-de5f-43f0-abc0-3426e6e3a672:start-event" to="guid-ddb000eb-7209-42a1-b034-9000895b7331:input" selected="false"></x-cable><x-super id="guid-747dbcb6-868b-4469-9184-2b457e065630" x="1707" y="14" supervisor="system/standard" worker="data-extraction/json-path" data-text="" data-query="$.store.book[*].author" selected="false"></x-super><x-cable id="guid-22c86eec-fcc9-4a25-a39a-62a9cc97d451" from="guid-ddb000eb-7209-42a1-b034-9000895b7331:output" to="guid-747dbcb6-868b-4469-9184-2b457e065630:input" selected="false"></x-cable><x-super id="guid-e73f709d-ab69-4617-8f0f-ac5031b0d7b8" x="1398" y="119" supervisor="system/standard" worker="logging-and-monitoring/console" data-text="Data Fetch Output:" data-context="log" selected="false"></x-super><x-cable id="guid-c716d8ca-cefc-4c88-8255-099df8643f7a" from="guid-ddb000eb-7209-42a1-b034-9000895b7331:output" to="guid-e73f709d-ab69-4617-8f0f-ac5031b0d7b8:input" selected="false"></x-cable><x-super id="guid-2f6edcf8-74a8-44c2-8bea-f136c2d89f79" x="2116" y="-154" supervisor="system/standard" worker="logging-and-monitoring/console" data-text="JSON Path extraction result:" data-context="log" selected="true"></x-super><x-cable id="guid-9a1067df-c48d-43ad-b372-817a7559063b" from="guid-747dbcb6-868b-4469-9184-2b457e065630:output" to="guid-2f6edcf8-74a8-44c2-8bea-f136c2d89f79:input" selected="false"></x-cable><x-super id="guid-e05b51b7-2b4b-41f9-882a-5aa64c84508b" x="2096" y="85" supervisor="system/standard" worker="stage/emitter" data-text="" data-event="bork" selected="false"></x-super><x-cable id="guid-d1d51886-5fcf-44fa-8e0f-ad7e966b1da7" from="guid-747dbcb6-868b-4469-9184-2b457e065630:output" to="guid-e05b51b7-2b4b-41f9-882a-5aa64c84508b:input" selected="false"></x-cable>
</x-stage>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body px-0">
<div class="container-fluid">
<div class="row">
<div class="col px-0 pt-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active ms-3" aria-current="page">Library</button>
</li>
<!-- <li class="nav-item">
<button class="nav-link">Code Editor</button>
</li> -->
<li class="nav-item">
<button class="nav-link">Intelligent Composer</button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-3 ps-3 pt-4">
<h5 class="mb-1 p-3">
Categories
<small class="d-block text-body-secondary">With faded secondary text</small>
</h5>
<nav class="nav flex-column">
<a class="nav-link" href="#"><i class="bi bi-filter-right me-2 text-secondary"></i> Most Used</a>
<a class="nav-link" href="#"><i class="bi bi-gear me-2 text-secondary"></i> Recently Added</a>
<a class="nav-link mb-3 border-bottom" href="#"><i class="bi bi-flower3 me-2 text-secondary"></i> Your Tags</a>
<a class="nav-link active" aria-current="page" href="#"><i class="bi bi-fuel-pump-diesel-fill me-2 text-secondary"></i> Artificial Intelligence</a>
<a class="nav-link" href="#"><i class="bi bi-fuel-pump-diesel me-2 text-secondary"></i> API Calls</a>
<a class="nav-link" href="#"><i class="bi bi-geo-alt-fill me-2 text-secondary"></i> Data Processing</a>
<a class="nav-link"><i class="bi bi-graph-up me-2 text-secondary"></i> User Interaction</a>
<a class="nav-link disabled" aria-disabled="true"><i class="bi bi-grid-3x3 me-2 text-secondary"></i> File Handling</a>
</nav>
</div>
<div class="col-3 pt-4">
<h5 class="mb-1 p-3">
Functions
<small class="d-block text-body-secondary">With faded secondary text</small>
</h5>
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#"><i class="bi bi-hand-index-fill me-2 text-secondary"></i> Form Submission</a>
<a class="nav-link" href="#"><i class="bi bi-hdd-stack-fill me-2 text-secondary"></i> Button Click</a>
<a class="nav-link" href="#"><i class="bi bi-hearts me-2 text-secondary"></i> Event Listener</a>
<a class="nav-link"><i class="bi bi-house-check-fill me-2 text-secondary"></i> Invoke AI Model</a>
<a class="nav-link"><i class="bi bi-houses me-2 text-secondary"></i> Prepare AI Input</a>
<a class="nav-link"><i class="bi bi-info-square-fill me-2 text-secondary"></i> Handle AI Response</a>
</nav>
</div>
<div class="col-6 ms-auto pt-4">
<div class="card mx-3 placeholder-glow">
<!-- <img src="..." class="card-img-top placeholder" alt="..." style="height: 8rem;"> -->
<div class="card-body">
<h5 class="card-title">HTTP GET</h5>
<p class="card-text">Fetches data from a specified URL using the GET method: This action involves making a request to a specific web address (URL) to retrieve information from a server. The GET method is one of the most common ways to request data, and it typically involves appending parameters directly to the URL to specify what information is needed. When the server receives the request, it processes it and sends back the requested data, which can be in various formats, such as JSON or XML. This method is particularly useful for retrieving data without making any changes on the server, such as fetching user profiles, product details, or any public data accessible through the web. For novice users, understanding GET requests is fundamental to working with APIs, as they form the basis for interacting with many online services and applications.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Customize</a>
<a href="#" class="card-link">Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add To Stage</button>
</div>
</div>
</div>
</div>
</body>
</html>