Starttime is now editable; closes #19

server/pages/new.html

@@ -14,6 +14,7 @@
 	<script src="/static/js/jquery-ui.min.js"></script>
 	<script src="/static/js/jquery.ui.datepicker-it.min.js"></script>
 	<script src="/static/js/rec.js"></script>
+	<script src="/static/js/ui.js"></script>
 	<script src="/static/js/new.js"></script>
 </head>
 

server/static/css/techrec.css

@@ -22,10 +22,12 @@
 .pure-button-enorme {
 	font-size: 300% !important;
 }
-
 .pure-button-small {
 	font-size: 85% !important;
 }
+.pure-button-compact {
+  padding: 0.2em 0.5em !important;
+}
 .arancione {
 	color: darkorange;
 }

server/static/js/new.js

@@ -5,31 +5,57 @@ $.widget("ror.countclock", {
 	options: {
 		errormsg: null,
 		since: null,
+		editable:true,
 		to: null
 	},
 	_create: function() {
+		"use strict";
 		this._update();
 		//TODO: aggiungi conto secondi/minuti passati
+
+		var widg = this;
+		this.element.on('click', '.countclock-edit-time', function() {
+			if(widg.options.editable === true) {
+				widg._change_starttime(widg.options.since);
+			}
+		});
 	},
+
+	_change_starttime: function ( since ) {
+		"use strict";
+		var widget = this;
+		time_changer_dialog(since, function(newsince) {
+			widget._trigger("change", null, { since: newsince })
+		});
+	},
+
 	_setOption: function(key, value) {
 		this.options[key] = value;
 		this._update();
 	},
+
 	_update: function() {
+		"use strict";
+		var text = "";
 		if(this.options.since !== null) {
 			if(this.options.to === null) {
-				this.element.text("Registrando da " +
+				text = "Registrando da " + config.datetimeformat(this.options.since);
-					config.datetimeformat(this.options.since)
-					);
 			} else {
-				this.element.text("Registrando da " +
+				text = "Registrando da " +
 					config.datetimeformat(this.options.since) +
 					" a " +
-					config.datetimeformat(this.options.to)
+					config.datetimeformat(this.options.to);
-					);
+					this.options.editable = false;
 			}
-		} else {
+		}
-			this.element.text('');
+		this.element.text(text);
+		if(this.options.editable) {
+			var btn = $('<span/>');
+			btn.addClass('pure-button pure-button-compact countclock-edit-time');
+			btn.css('margin-left', '0.5em');
+
+			btn.append($('<i/>').addClass('fa fa-pencil'));
+			this.element.append(btn);
 		}
 	}
 });
@@ -98,14 +124,27 @@ $.widget("ror.ongoingrec", {
 		}
 		this._update();
 	},
+
         _update: function() {
           var rec = this.options.rec;
           this.element.find('input').val(rec.name);
           this.element.find(':ror-countclock').countclock("option", "since",
-									rec.starttime !== null ? config.date_read(rec.starttime) :	null);
+              rec.starttime !== null ? config.date_read(rec.starttime) :
+              null).on("countclockchange",
+              function(evt, data) {
+                count_widg = this;
+                console.log(this);
+                console.log(rec.starttime, data.since.getTime() / 1000);
+                rec.starttime = data.since.getTime() / 1000;
+                RecAPI.update(rec.id, rec).done(
+                  function() {
+                    $(count_widg).countclock('option', 'since', data.since);
+                  }).fail(console.error);
+              });
+
 		if(this.options.state > 0) {
 			this.element.find(':ror-countclock').countclock("option", "to",
-																											rec.endtime !== null ? config.date_read(rec.endtime) : null
+																											rec.endtime !== null ? new Date(rec.endtime*1000) : null
 																											);
 		} else {
 			this.element.find(':ror-countclock').countclock("option", "to", null);

server/static/js/ui.js

@@ -1,4 +1,44 @@
 /*global $*/
+function time_changer_dialog(d, changed_callback) {
+	//d is a Date object
+	var dlg_html = '<div> \
+								 <form action="#"> \
+								 <input name="h" size="2" maxlength="2" type="number" min="0" max="23"> \
+								 <input name="m" size="2" maxlength="2" type="number" min="0" max="59"> \
+								 <input name="s" size="2" maxlength="2" type="number" min="0" max="59"> \
+								 </form> \
+								 </div>';
+
+	var $dlg = $( $.parseHTML(dlg_html) );
+	$('[name=h]', $dlg).val(d.getHours() );
+	$('[name=m]', $dlg).val(d.getMinutes() );
+	$('[name=s]', $dlg).val(d.getSeconds() );
+	$dlg.dialog( {
+		title: "Modifica inizio",
+		buttons:
+	{
+		"Ok":function() {
+			$(this).dialog( "close" );
+			if(changed_callback === undefined) {
+				return;
+			}
+			newd = new Date(d.getTime());
+			newd.setHours($('[name=h]', $dlg).val());
+			newd.setMinutes($('[name=m]', $dlg).val());
+			newd.setSeconds($('[name=s]', $dlg).val());
+			if(newd.getTime() === d.getTime()) {
+				console.debug("Time not changed, discarding");
+				return;
+			}
+			changed_callback(newd); //FIXME: crea data a partire dal form
+		},
+		"Annulla": function() {
+			$(this).dialog("close");
+		}
+	}
+	}).dialog('open');
+}
+
 $.widget("ror.thebutton", {
 	options: {
 		state: 'Create',