F: OpenSeaMap#187 add gauges

Author: Jens Kuebler

src/js/oseam-views-gaugedialog.js

@@ -0,0 +1,56 @@
+OSeaM.views.GaugeDialog = OSeaM.View.extend({
+
+	events : {
+		'click #oseam-cancel' : 'onCancel',
+		'click #close' : 'onCancel',
+		'click #oseam-save' : 'onSave',
+	},
+	initialize : function() {
+		OSeaM.frontend.on("change:language", this.render, this);
+	},
+	render : function() {
+		new OSeaM.views.Wizard();
+		var language = OSeaM.frontend.getLanguage();
+		var template = OSeaM.loadTemplate('gaugedialog-' + language);
+		//var template = OSeaM.loadTemplate('vessel');
+		this.renderParams = {
+			name : this.model.get('name')
+		};
+		var content = $(template(this.renderParams));
+		OSeaM.frontend.translate(content);
+		this.$el.append(content);
+		this.el = content;
+		return content;
+	},
+	onCancel : function(evt) {
+		// removes the inserted dialog div and stops listening for events
+		//        this.wizard.remove();
+		this.el.remove();
+		this.undelegateEvents();
+	},
+	onSave : function(evt) {
+		/*
+		 * If this is new project it won't have the ID attribute defined
+		 */
+		if (null == this.model.id) {
+			/*
+			 * We are creating our model through its collection (this way we'll automatically update its views and persist it to DB)
+			 */
+			this.model.save();
+			this.collection.add(this.model);
+		} else {
+			/*
+			 * Simple save will persist the model to the DB and update its view
+			 */
+			this.model.save();
+		}
+		/*
+		 * Hiding modal dialog window
+		 * removes the inserted dialog div and stops listening for events
+		 */
+		// 
+		//        this.wizard.remove();
+		this.el.remove();
+		this.undelegateEvents();
+	}
+});

src/js/templates/gaugedialog-en.handlebars

@@ -0,0 +1,43 @@
+<div class="oseam-modal modal hide fade" id="gaugeedit" tabindex="-1" role="dialog" aria-labelledby="x" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" id="close" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="gaugevalue">Gauges {{name}}</h3>
+    </div>
+    <div class="modal-body">
+    	<div class="span8">
+	        <h4>Gauge</h4>
+	        <h5>Edit details of gauge</h5>
+        
+			 <div class="control-group">
+		<p><label class="tableft50">Name</label></p>
+        <div class="input-append">
+            <input type="text" class="input-mini" id="name" name="name" placeholder="0.00" value="{{name}}" title="Gauge Name"/>
+            <span class="add-on">m</span>
+							<span class="help-inline helpOsm"></span>
+        </div>
+	    </div>
+		
+		 <div class="control-group">
+        <p><label class="tableft50">Latitude</label></p>
+        <div class="input-append">
+            <input type="text" class="input-mini" id="latitude" name="latitude" placeholder="0.0" value="{{latitude}}" title="Latitude"/>
+            <span class="add-on">Decimal Degree</span>
+							<span class="help-inline helpOsm"></span>
+        </div>
+		    </div>
+		
+		 <div class="control-group">
+        <p><label class="tableft50">Longitude</label></p>
+        <div class="input-append">
+            <input type="text" class="input-mini" id="longitude" name="longitude" placeholder="0.0" value="{{longitude}}" title="Longitude"/>
+            <span class="add-on">m</span>
+							<span class="help-inline helpOsm"></span>
+        </div>
+    </div>
+    
+    </div>
+    <div class="modal-footer">
+        <button class="btn" data-dismiss="modal" id="oseam-cancel" aria-hidden="true">Cancel</button>
+        <button class="btn btn-primary" id="oseam-save">Save and Finish</button>
+    </div>
+</div>