@yarkivaev/simulation-web 1.0.0

package/dist/simulation-web.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f4f6f9;color:#333}.app{display:flex;min-height:100vh}.sidebar{width:220px;background:#1e293b;color:#fff;padding:1.5rem 1rem;flex-shrink:0}.logo{font-size:1.2rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #334155}.nav-list{list-style:none}.nav-list li{margin-bottom:.5rem}.nav-list a{color:#94a3b8;text-decoration:none;display:block;padding:.5rem .75rem;border-radius:6px;transition:background .2s,color .2s}.nav-list a:hover,.nav-list a.router-link-active{background:#334155;color:#fff}.content{flex:1;padding:2rem;overflow-y:auto}.editor-container[data-v-ac617ac0]{height:300px;border:1px solid #cbd5e1;border-radius:6px;overflow:hidden}.simulation-control[data-v-0b0ece24]{display:inline-flex;align-items:center;gap:.75rem}.status-badge[data-v-0b0ece24]{padding:.2rem .6rem;border-radius:12px;font-size:.8rem;font-weight:600}.status-badge.RUNNING[data-v-0b0ece24]{background:#dcfce7;color:#166534}.status-badge.STOPPED[data-v-0b0ece24]{background:#f1f5f9;color:#64748b}.btn-primary[data-v-0b0ece24]{background:#3b82f6;color:#fff;border:none;padding:.25rem .75rem;border-radius:6px;cursor:pointer;font-size:.85rem}.btn-danger[data-v-0b0ece24]{background:#ef4444;color:#fff;border:none;padding:.25rem .75rem;border-radius:6px;cursor:pointer;font-size:.85rem}.page-header[data-v-028dcd41]{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.data-table[data-v-028dcd41]{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.data-table th[data-v-028dcd41],.data-table td[data-v-028dcd41]{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e2e8f0}.data-table th[data-v-028dcd41]{background:#f8fafc;font-weight:600;color:#475569}.dialog-overlay[data-v-028dcd41]{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.dialog[data-v-028dcd41]{background:#fff;border-radius:12px;padding:2rem;min-width:400px;box-shadow:0 8px 30px #0000001f}.dialog.wide[data-v-028dcd41]{min-width:700px;max-width:900px}.dialog h2[data-v-028dcd41]{margin-bottom:1.5rem}.dialog label[data-v-028dcd41]{display:block;margin-bottom:1rem;color:#475569}.dialog input[data-v-028dcd41]{display:block;width:100%;margin-top:.25rem;padding:.5rem;border:1px solid #cbd5e1;border-radius:6px}.dialog-actions[data-v-028dcd41]{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.validation[data-v-028dcd41]{padding:.5rem;border-radius:4px;margin-top:.5rem;background:#f0fdf4;color:#15803d}.validation.error[data-v-028dcd41]{background:#fef2f2;color:#dc2626}.btn-primary[data-v-028dcd41]{background:#3b82f6;color:#fff;border:none;padding:.5rem 1.25rem;border-radius:6px;cursor:pointer}.btn-secondary[data-v-028dcd41]{background:#e2e8f0;color:#475569;border:none;padding:.5rem 1.25rem;border-radius:6px;cursor:pointer}.btn-danger[data-v-028dcd41]{background:#ef4444;color:#fff;border:none;padding:.25rem .75rem;border-radius:4px;cursor:pointer;font-size:.85rem;margin-left:.5rem}

package/dist/simulation-web.js

@@ -0,0 +1,239 @@
+import { defineComponent as _, resolveComponent as D, openBlock as i, createElementBlock as r, createElementVNode as e, toDisplayString as v, Fragment as b, renderList as g, createVNode as k, withCtx as P, createTextVNode as w, renderSlot as L, ref as p, onMounted as C, watch as O, onBeforeUnmount as x, normalizeClass as V, reactive as B, withModifiers as A, withDirectives as I, vModelText as M, createCommentVNode as $ } from "vue";
+import * as U from "monaco-editor";
+const j = { class: "app" }, z = { class: "sidebar" }, F = { class: "logo" }, G = { class: "nav-list" }, H = { class: "content" }, st = /* @__PURE__ */ _({
+  __name: "SimulationLayout",
+  props: {
+    title: {},
+    nav: {}
+  },
+  setup(t) {
+    return (l, a) => {
+      const u = D("router-link");
+      return i(), r("div", j, [
+        e("nav", z, [
+          e("h2", F, v(t.title), 1),
+          e("ul", G, [
+            (i(!0), r(b, null, g(t.nav, (s) => (i(), r("li", {
+              key: s.to
+            }, [
+              k(u, {
+                to: s.to
+              }, {
+                default: P(() => [
+                  w(v(s.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["to"])
+            ]))), 128))
+          ])
+        ]),
+        e("main", H, [
+          L(l.$slots, "default")
+        ])
+      ]);
+    };
+  }
+}), J = /* @__PURE__ */ _({
+  __name: "DslEditor",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: l }) {
+    const a = t, u = l, s = p();
+    let n = null;
+    return C(() => {
+      s.value && (n = U.editor.create(s.value, {
+        value: a.modelValue,
+        language: "groovy",
+        theme: "vs",
+        minimap: { enabled: !1 },
+        fontSize: 14,
+        lineNumbers: "on",
+        scrollBeyondLastLine: !1,
+        automaticLayout: !0,
+        tabSize: 2
+      }), n.onDidChangeModelContent(() => {
+        u("update:modelValue", n.getValue());
+      }));
+    }), O(() => a.modelValue, (f) => {
+      n && n.getValue() !== f && n.setValue(f);
+    }), x(() => {
+      n == null || n.dispose();
+    }), (f, y) => (i(), r("div", {
+      ref_key: "container",
+      ref: s,
+      class: "editor-container"
+    }, null, 512));
+  }
+}), h = (t, l) => {
+  const a = t.__vccOpts || t;
+  for (const [u, s] of l)
+    a[u] = s;
+  return a;
+}, R = /* @__PURE__ */ h(J, [["__scopeId", "data-v-ac617ac0"]]), q = { class: "simulation-control" }, K = /* @__PURE__ */ _({
+  __name: "SimulationControl",
+  props: {
+    status: {}
+  },
+  emits: ["start", "stop"],
+  setup(t) {
+    return (l, a) => (i(), r("span", q, [
+      e("span", {
+        class: V(["status-badge", t.status])
+      }, v(t.status), 3),
+      t.status !== "RUNNING" ? (i(), r("button", {
+        key: 0,
+        class: "btn-primary btn-sm",
+        onClick: a[0] || (a[0] = (u) => l.$emit("start"))
+      }, "Start")) : (i(), r("button", {
+        key: 1,
+        class: "btn-danger btn-sm",
+        onClick: a[1] || (a[1] = (u) => l.$emit("stop"))
+      }, "Stop"))
+    ]));
+  }
+}), lt = /* @__PURE__ */ h(K, [["__scopeId", "data-v-0b0ece24"]]), d = "/api";
+async function S(t) {
+  if (!t.ok)
+    throw new Error(`HTTP ${t.status}: ${t.statusText}`);
+  return t.json();
+}
+async function Q() {
+  return S(await fetch(`${d}/scenarios`));
+}
+async function W(t) {
+  return S(await fetch(`${d}/scenarios`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(t)
+  }));
+}
+async function X(t) {
+  await fetch(`${d}/scenarios/${t}`, { method: "DELETE" });
+}
+async function it(t) {
+  return S(await fetch(`${d}/scenarios/${t}/validate`, { method: "POST" }));
+}
+async function rt() {
+  return S(await fetch(`${d}/simulations`));
+}
+async function ut(t) {
+  await fetch(`${d}/simulations/${t}/start`, { method: "POST" });
+}
+async function ct(t) {
+  await fetch(`${d}/simulations/${t}/stop`, { method: "POST" });
+}
+async function dt() {
+  await fetch(`${d}/simulations/start-all`, { method: "POST" });
+}
+async function mt() {
+  await fetch(`${d}/simulations/stop-all`, { method: "POST" });
+}
+const Y = { class: "page-header" }, Z = { class: "data-table" }, tt = ["onClick"], et = ["onClick"], nt = { class: "dialog wide" }, at = /* @__PURE__ */ _({
+  __name: "ScenariosPage",
+  setup(t) {
+    const l = p([]), a = p(!1), u = p(!1), s = p(null), n = B({ name: "", dsl: "" });
+    C(async () => {
+      l.value = await Q();
+    });
+    function f(m) {
+      n.name = m.name, n.dsl = m.dsl, u.value = !0, a.value = !0;
+    }
+    function y() {
+      a.value = !1, u.value = !1, s.value = null, n.name = "", n.dsl = "";
+    }
+    async function N() {
+      const m = await W({ name: n.name, dsl: n.dsl });
+      l.value.push(m), y();
+    }
+    async function T(m) {
+      await X(m), l.value = l.value.filter((o) => o.id !== m);
+    }
+    return (m, o) => (i(), r("div", null, [
+      e("div", Y, [
+        o[3] || (o[3] = e("h1", null, "Scenarios", -1)),
+        e("button", {
+          class: "btn-primary",
+          onClick: o[0] || (o[0] = (c) => a.value = !0)
+        }, "New Scenario")
+      ]),
+      e("table", Z, [
+        o[4] || (o[4] = e("thead", null, [
+          e("tr", null, [
+            e("th", null, "Name"),
+            e("th", null, "Actions")
+          ])
+        ], -1)),
+        e("tbody", null, [
+          (i(!0), r(b, null, g(l.value, (c) => (i(), r("tr", {
+            key: c.id
+          }, [
+            e("td", null, v(c.name), 1),
+            e("td", null, [
+              e("button", {
+                class: "btn-secondary",
+                onClick: (E) => f(c)
+              }, "Edit", 8, tt),
+              e("button", {
+                class: "btn-danger",
+                onClick: (E) => T(c.id)
+              }, "Delete", 8, et)
+            ])
+          ]))), 128))
+        ])
+      ]),
+      a.value ? (i(), r("div", {
+        key: 0,
+        class: "dialog-overlay",
+        onClick: A(y, ["self"])
+      }, [
+        e("div", nt, [
+          e("h2", null, v(u.value ? "Edit" : "New") + " Scenario", 1),
+          e("label", null, [
+            o[5] || (o[5] = w("Name", -1)),
+            I(e("input", {
+              "onUpdate:modelValue": o[1] || (o[1] = (c) => n.name = c)
+            }, null, 512), [
+              [M, n.name]
+            ])
+          ]),
+          o[6] || (o[6] = e("label", null, "DSL", -1)),
+          k(R, {
+            modelValue: n.dsl,
+            "onUpdate:modelValue": o[2] || (o[2] = (c) => n.dsl = c)
+          }, null, 8, ["modelValue"]),
+          s.value ? (i(), r("div", {
+            key: 0,
+            class: V(["validation", { error: !s.value.valid }])
+          }, v(s.value.valid ? "Valid" : s.value.error), 3)) : $("", !0),
+          e("div", { class: "dialog-actions" }, [
+            e("button", {
+              class: "btn-secondary",
+              onClick: y
+            }, "Cancel"),
+            e("button", {
+              class: "btn-primary",
+              onClick: N
+            }, "Save")
+          ])
+        ])
+      ])) : $("", !0)
+    ]));
+  }
+}), vt = /* @__PURE__ */ h(at, [["__scopeId", "data-v-028dcd41"]]);
+export {
+  R as DslEditor,
+  vt as ScenariosPage,
+  lt as SimulationControl,
+  st as SimulationLayout,
+  W as createScenario,
+  X as deleteScenario,
+  Q as fetchScenarios,
+  rt as fetchSimulations,
+  dt as startAll,
+  ut as startSimulation,
+  mt as stopAll,
+  ct as stopSimulation,
+  it as validateScenario
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@yarkivaev/simulation-web",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/simulation-web.js",
+  "files": ["dist"],
+  "scripts": {
+    "build": "vue-tsc -b && vite build",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "monaco-editor": "^0.52.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "monaco-editor": "^0.52.2",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vitest": "^3.0.5",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.2.8"
+  }
+}