change Save button if unsaved changes are available

app/components/behaviors/action-bar.js

@@ -37,6 +37,7 @@ export default Component.extend({
   ajax: Ember.inject.service(),
   repoFileName: "behaviors.ttl",
   availableBTs: undefined,
+  unsaved: false,
   repoContent: "",
   btFileName: "",
   btContent: "",
@@ -52,6 +53,11 @@ export default Component.extend({
       saveGraph(content);
     });
 
+    this.get('dataBus').on('unsavedChanges', function () {
+      console.log("Unsaved changes!");
+      if (!that.get("unsaved")) that.set("unsaved", true);
+    });
+
     this.get('dataBus').on('saveExportedBT', function (bt) {
       that.set("btFileName", bt.label + "_bt.ttl");
       that.set("btContent", URL.createObjectURL(new Blob(["# Root: <" + bt.uri + "> \r\r@prefix xsd: <http://www.w3.org/2001/XMLSchema#> . " + bt.definition])));

app/components/behaviors/behavior-graph.js

@@ -53,6 +53,7 @@ export default Ember.Component.extend({
   init() {
     this._super(...arguments);
     that = this;
+
     this.get('dataBus').on('addBT', function (bt) {
       createBT(bt);
     });
@@ -151,13 +152,19 @@ function loadBTRdfGraphData() {
 }
 
 function rdfDataHasLoaded(rdfData) {
-	rdfGraph.set(rdfData);
+  console.log("has Loaded");
+  rdfGraph.set(rdfData);
+  rdfGraph.setUnsavedMethod(unsavedChanges);
   setAvailableBTs();
 	bindEvents();
   cy.resize();
   that.dataBus.updatedBT();
 }
 
+function unsavedChanges() {
+  that.dataBus.unsavedChanges();
+}
+
 function setAvailableBTs() {
   let behaviorTrees = actions.getBehaviorTrees();
   that.set("availableBTs", behaviorTrees);

app/helpers/RDFServices/RDF-graph.js

@@ -23,32 +23,53 @@ import rdfFact from "ajan-editor/helpers/RDFServices/RDF-factory";
 
 class RDFGraph {
 	constructor() {
-		this.data = undefined;
+    this.data = undefined;
+    this.unsavedMethod = undefined;
+    this.publishedChanges = false;
 		this.unsavedChanges = false;
 	}
 
 	// Only used for initiating
 	reset() {
 		this.data = undefined;
-		this.unsavedChanges = false;
+    this.unsavedChanges = false;
+    this.unsavedMethod = undefined;
+    this.publishedChanges = false;
   }
 
-	set(newData) {
-		this.data = newData;
-	}
+  set(newData) {
+    this.data = newData;
+    this.unsavedChanges = false;
+    this.unsavedMethod = undefined;
+    this.publishedChanges = false;
+  }
+
+  setUnsavedMethod(unsavedMethod) {
+    if (!this.unsavedMethod) {
+      this.unsavedMethod = unsavedMethod;
+    }
+  }
+
+  setUnsavedChanges(value) {
+    this.unsavedChanges = value;
+      if (this.unsavedMethod && this.unsavedChanges && !this.publishedChanges) {
+      this.publishedChanges = true;
+      this.unsavedMethod();
+    }
+  }
 
 	get() {
 		return this.data;
 	}
 
 	add(quad) {
 		this.data.add(quad);
-		this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
 	}
 
 	addAll(quads) {
 		this.data.addAll(quads);
-		this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
 	}
 
 	existsSome(value) {
@@ -82,13 +103,13 @@ class RDFGraph {
 
 	remove(quad) {
 		this.data.remove(quad);
-		this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
 		console.warn("Delete", quad);
 	}
 
 	removeMatches(ele) {
 		this.data.removeMatches(ele);
-		this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
 		console.warn("Delete matches", ele);
 	}
 
@@ -151,7 +172,7 @@ class RDFGraph {
 			// Update quad
 			if (o !== quad.object.value) {
 				quad.object.value = o;
-				this.unsavedChanges = true;
+        this.setUnsavedChanges(true);
 			}
 		} else {
 			// Create and add quad
@@ -168,7 +189,7 @@ class RDFGraph {
       console.log(quad.object);
       if (o !== quad.object) {
 				quad.object = o;
-				this.unsavedChanges = true;
+        this.setUnsavedChanges(true);
 			}
 		} else {
 			// Create and add quad
@@ -179,7 +200,7 @@ class RDFGraph {
 
 	// Removes all quads which have an element related to val
   removeAllRelated(val, noObject) {
-		this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
     console.warn("Delete related to", val);
     if (noObject) {
       this.data._quads = this.data._quads.filter(quad => {
@@ -200,7 +221,7 @@ class RDFGraph {
 	}
 
   removeRelatedQuads(subject, predicate) {
-    this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
     let remove = [];
     console.warn("Delete related to", subject, predicate);
     this.data.forEach(quad => {
@@ -218,7 +239,7 @@ class RDFGraph {
   }
 
 	removeQuad(removeQuad) {
-		this.unsavedChanges = true;
+    this.setUnsavedChanges(true);
 		console.warn("Delete", removeQuad);
 		this.data._quads = this.data._quads.filter(quad => {
 			return !removeQuad.equals(quad);

app/services/data-bus.js

@@ -21,6 +21,10 @@
 import Ember from "ember";
 
 export default Ember.Service.extend(Ember.Evented, {
+  unsavedChanges() {
+    this.trigger('unsavedChanges');
+  },
+
   createBT() {
     this.trigger('createBT');
   },

app/styles/components/behaviors/action-bar.css

@@ -38,6 +38,10 @@
   text-align: right;
 }
 
+:global(.behaviors-save-button.unsavedChanges button) {
+  color: #FFF !important;
+}
+
 /***********************/
 /* Triplestore Display */
 /***********************/

app/templates/components/behaviors/action-bar.hbs

@@ -61,10 +61,21 @@
     label="Sort"
     onClick=(action "sort")
   }}
-  {{ui/menu-bar/button
-    label="Save"
-    onClick=(action "save")
-  }}
+  {{#if this.unsaved}}
+    {{ui/menu-bar/button
+      label="Save"
+      class="behaviors-save-button unsavedChanges"
+      icon="save icon"
+      onClick=(action "save")
+    }}
+  {{/if}}
+  {{#unless this.unsaved}}
+    {{ui/menu-bar/button
+      label="Save"
+      class="behaviors-save-button"
+      onClick=(action "save")
+    }}
+  {{/unless}}
   {{ui/menu-bar/button
     label="Delete"
     onClick=(action "delete")

app/templates/components/ui/menu-bar/button.hbs

@@ -1 +1 @@
-<button class="menu menu-button primary button" {{action onClick}}>{{label}}</button>
+<button class="menu menu-button primary button" {{action onClick}}><i class="{{icon}}"></i>{{label}}</button>