-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (163 loc) · 9.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype 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": {
"xml-parser": "./src/plug-ins/xml-parser/XmlParser.js",
"async-macro": "./src/plug-ins/async-macro/macro.js",
"finder": "./src/plug-ins/finder/Finder.js",
"htl": "./src/plug-ins/sweetpea-htl/sweetpea-htl.js",
"cable-store": "./src/plug-ins/cable-store/cableStore.js",
"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",
"relay-control": "./src/plug-ins/relay-control/RelayControl.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",
"debounce": "./src/plug-ins/debounce/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 XmlParser from 'xml-parser';
const parser = new XmlParser();
const architecture = await (await fetch('./src/architecture.xml')).text();
const parsedObject = parser.parse(architecture);
console.log( parsedObject );
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
import Finder from 'finder';
customElements.define(`app-finder`, Finder);
</script>
<script src="css/bootstrap.bundle.min.js"></script>
<script>
</script>
<body oncontextmenu="return false;">
<x-stage controls minimap template="stage" theme="original"></x-stage>
<app-finder id="finder-1" data-label="System Browser"></app-finder>
<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>