kf save almost good

app/assets/json/global/services.json

@@ -17,10 +17,18 @@
             }
         },
         "/keyframes": {
-            "save": {
+            "create": {
-                "uri": "/api/keyframes/{id}",
+                "uri": "/api/keyframes",
+                "method": "PUT"
+            },
+            "rename": {
+                "uri": "/api/keyframes/{kfId}",
+                "method": "PUT"
+            },
+            "saveAgents": {
+                "uri": "/api/keyframes/{kfId}/agents",
                 "method": "PUT"
             }
-        }        
+        }
     }
 }

app/controllers/editors/EditorsController.js

@@ -12,7 +12,8 @@ class EditorsController extends WindozController {
 
     async keyframe() {
         const models = {
-            agents : new AgentsModel('/agents')
+            agents : new AgentsModel('/agents'),
+            keyframes : new KeyframesModel('/keyframes')
         }
 
         this.loadWindow(

app/models/KeyframesModel.js

@@ -5,7 +5,21 @@ class KeyframesModel extends WindozModel {
         this.ressource = '/keyframes'
     }
 
-    async save(data) {
+    async create(kfData, prevKFId) {
+        let endpoint = {...app.config.api[this.ressource].create}
+        return ( 
+            this.request(endpoint.uri, endpoint.method, kfData)
+        )
+    }
+
+    async rename(kfData, prevKFId) {
+        let endpoint = {...app.config.api[this.ressource].create}
+        return ( 
+            this.request(endpoint.uri, endpoint.method, kfData)
+        )
+    }
+
+    async save(kfId, data) {
         const kfData = Object.keys(data).map(aid => {
             const { position, speed, ...storeValues} = data[aid].values
             return({
@@ -15,9 +29,8 @@ class KeyframesModel extends WindozModel {
             })
         })
 
-        let endpoint = {...app.config.api[this.ressource].getTypes}
+        let endpoint = {...app.config.api[this.ressource].saveAgents}
-        endpoint.uri = endpoint.uri.replace('{family}', data.kfId || '')
+        endpoint.uri = endpoint.uri.replace('{kfId}', kfId)
-        const aid = Object.keys(x)[data]
         return ( 
             this.request(endpoint.uri, endpoint.method, kfData)
         )

app/views/editors/KeyframeView.html

@@ -17,7 +17,7 @@
     }
      .kf-editor article.agent-properties section{
         display: grid;
-        grid-template-rows: 2em 3em auto;
+        grid-template-rows: 2em 2em auto;
         overflow: visible;
         height:100%;
     }
@@ -53,11 +53,14 @@
         padding: 0 0 0 0;
         min-height: 1.2em;
     }
-    .kf-editor article.agent-properties section.kf-actions { border-top: 1px solid #473; padding: 3px 5px 3px 5px; height:3em;}
+    .kf-editor article.agent-properties section.kf-actions { 
+        border-top: 1px solid #473; 
+        padding: 3px 5px 3px 5px; 
+        height:8em;
+    }
     .kf-editor article.agent-properties section.kf-actions button{
         color: #DDD;
         padding: 0 0 0 0;
-        min-height: 2em;
     }
     .kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
     .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
@@ -99,9 +102,13 @@
             </div>
             <div data-output="agentProperties"></div>
         </section>
-        <section class="kf-actions cols-2">
+        <section class="kf-actions">
-            <button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
+            <label>Keyframe name</label>
-            <button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
+            <input type="text" data-output="kfName" placeholder="(min 5 chars)"/>
+            <div class="cols-2">
+                <button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
+                <button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
+            </div>
         </section>
     </article>
     

app/views/editors/KeyframeView.js

@@ -31,6 +31,9 @@ class KeyframeView extends WindozDomContent {
         this.agentTypes = types
         this.currentAgentType = null
 
+        //TODO from browser
+        this.currentKeyframe = { }
+
         this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => {
             return({ markup: `<i class="icon-${item.atp_hascode ? 'bug' : 'atom1'}"></i>${item.atp_name}`, value: item.atp_id})
         }))
@@ -48,7 +51,7 @@ class KeyframeView extends WindozDomContent {
         this.outputs.btnAddAgent.disabled = true
         this.outputs.btnRemoveAgent.disabled = true        
         this.outputs.btnSaveKF.disabled = true  
-
+        this.outputs.kfName.addEventListener('keyup', this.updateKfButtons.bind(this))
         this.currentlySelectedAid = null
     }
 
@@ -93,7 +96,8 @@ class KeyframeView extends WindozDomContent {
     }
 
     updateKfButtons(){
-        if(Object.keys(this.kfArena.agents).length > 0) this.outputs.btnSaveKF.disabled = false  
+        if((Object.keys(this.kfArena.agents).length > 0) && (this.outputs.kfName.value.length > 5)) { this.outputs.btnSaveKF.disabled = false  }
+        else { this.outputs.btnSaveKF.disabled = true  }
     }
 
     fillAgentProperties(aid, agentProps, agentValues = {}){ 
@@ -140,8 +144,15 @@ class KeyframeView extends WindozDomContent {
     }
 
     async onSaveKF(evt){
-        console.log('SAVE:',this.kfArena.agents) 
+        if(!this.currentKeyframe.kfId){ // Create first (and get new kfId)
-        await this.models.keyframe.save(this.kfArena.agents)
+            this.currentKeyframe.kfName = this.outputs.kfName.value
+            const result = await this.models.keyframes.create(this.currentKeyframe)
+            this.currentKeyframe.kfId = result.payload.kfId
+        } else if(this.currentKeyframe.kfName != this.outputs.kfName.value){ //rename 
+            this.currentKeyframe.kfName = this.outputs.kfName.value
+            const result = await this.models.keyframes.rename(this.currentKeyframe)
+        } 
+        await this.models.keyframes.save(this.currentKeyframe.kfId, this.kfArena.agents)
     }
 
 }