started sims section & axes&grid settings for KFEditor

app/views/sims/CreateSimView.html

@@ -0,0 +1,25 @@
+<style>
+    .create-sim section {
+        padding: 1em;
+    }
+    .create-sim bz-select[data-output="keyframesSelector"] {
+        margin-top: 1em;
+    }
+    .create-sim .cols-2 { align-items: baseline; }
+</style>
+<article eiccard class="create-sim">
+    <header>
+        <h1>Create a simulation</h1>
+    </header>
+    <section>
+        <div class="cols-2">
+            <label>Simulation first keyframe:</label>
+            <bz-select label="Existing keyframes..." data-output="keyframesSelector"></bz-select>
+        </div>
+        <div class="cols-2">
+            <label>Simulation Name:</label>
+            <input type="text" data-output="simName" placeholder="(min 5 chars)"/>
+        </div>
+        <button eicbutton rounded data-output="btnCreateSim" data-trigger="onCreateSim">Create Simulation</button>
+    </section>
+</article>

app/views/sims/CreateSimView.js

@@ -0,0 +1,30 @@
+class CreateSimView extends WindozDomContent {
+
+    constructor() {
+        super()
+        Object.assign(this, app.helpers.activeAttributes, app.helpers.basicDialogs)
+    }
+
+    async DOMContentLoaded(options) {
+        this.models = options.models
+        const components = ui.eicfy(this.el)
+        this.setupRefs(components)
+
+        this.models.keyframes.list('', null).then(data => data.payload).then(kflist => {
+            this.outputs.keyframesSelector.fillOptions(kflist.map(item => {
+                return({
+                    markup: item.ekf_name,
+                    value: item.ekf_uuid
+                })
+            }))
+        })
+        this.outputs.keyframesSelector.addEventListener('change', this.onChangeKeyframe.bind(this))
+    }
+
+    onChangeKeyframe(event) {
+        if(!this.outputs.keyframesSelector.value) return
+        // TODO: use selected keyframe for simulation creation
+    }
+}
+
+app.registerClass('CreateSimView', CreateSimView)

app/views/sims/ManageSimView.html

@@ -0,0 +1,8 @@
+<article eiccard class="manage-sim">
+    <header>
+        <h1>Play / Pause a simulation</h1>
+    </header>
+    <section>
+        <p>TODO: simulation play / pause controls</p>
+    </section>
+</article>

app/views/sims/ManageSimView.js

@@ -0,0 +1,15 @@
+class ManageSimView extends WindozDomContent {
+
+    constructor() {
+        super()
+        Object.assign(this, app.helpers.basicDialogs)
+    }
+
+    async DOMContentLoaded(options) {
+        this.models = options.models
+        ui.eicfy(this.el)
+        // TODO: implement
+    }
+}
+
+app.registerClass('ManageSimView', ManageSimView)