adding context menu

webinterface/block.js

@@ -45,6 +45,59 @@ function block_Delete(name) {
 };
 
 
+
+function block_contextmenu(name) {
+	gContextmenuCreate(name);
+
+	gContextmenuAdd("Locomotives", 0, 0);
+	for (var i = 0; i < locomotives.length; i++) {
+		if (locomotives[i].name) 
+			gContextmenuAdd(locomotives[i].name, block_ctxmenu_LocoSelect, locomotives[i].name);
+	}
+	gContextmenuAdd("", 0, 0);
+	gContextmenuAdd("Set DestinationFWD", block_ctxmenu_LocoDestinationFWD, 0);
+	gContextmenuAdd("Set DestinationREV", block_ctxmenu_LocoDestinationREV, 0);
+	gContextmenuAdd("", 0, 0);
+	gContextmenuAdd("AssignFWD", block_ctxmenu_LocoAssignFWD, 0);
+	gContextmenuAdd("AssignREV", block_ctxmenu_LocoAssignREV, 0);
+	gContextmenuAdd("", 0, 0);
+	gContextmenuAdd("Clear", block_ctxmenu_Clear, 0);
+	gContextmenuAdd("Offservice", block_ctxmenu_Clear, 1);
+};
+
+
+function block_ctxmenu_LocoSelect (element, value) {
+	alert ("LocoSelect:" + value);
+};
+
+
+function block_ctxmenu_LocoDestinationFWD (element, value) {
+	alert ("DestinationFWD:" + value);
+};
+
+
+function block_ctxmenu_LocoDestinationREV (element, value) {
+	alert ("DestinationREV:" + value);
+};
+
+
+function block_ctxmenu_LocoAssignFWD (element, value) {
+	alert ("AssignFWD:" + value);
+};
+
+
+function block_ctxmenu_LocoAssignREV (element, value) {
+	alert ("AssignREV:" + value);
+};
+
+
+function block_ctxmenu_Clear (element, value) {
+	// value == 0 ... clear
+	// value == 1 ... Put Off Service
+	alert ("Clear / Off Service");
+}
+
+
 //
 // send new element to server
 //

webinterface/gui/gui.css

@@ -1,6 +1,13 @@
 
 :root {
+    --head-bg-color: #0018ff;
+    --head-fg-color: #ffffff;
 	--bg-color: #dddddd;
+	--fg-color: #000000;
+	--contextmenu-bg-color: #b2ccb5;
+	--contextmenu-fg-color: #000000;
+	--contextmenu-head-bg-color: #10ff39;
+	--contextmenu-head-fg-color: #000000;
 	--input-bg-color: #c8c8c8;
 	--input-fg-color: black;
 }
@@ -11,16 +18,19 @@
   margin:  1px;
   padding: 0px;
   position: absolute;
+  font-family: system-ui;
 }
 
 .GUIwindowHead  {
   border:  1px solid black;
-  background: #0018ff;
-  color: white;
+  background: var(--head-bg-color);
+  color: var(--head-fg-color);
   margin:  0px;
-  padding: 5px;
+  padding: 4px;
   cursor: move;
   text-align: center;
+  font-family: system-ui;
+  font-weight: bold;
 }
 
 .GUIwindowClient {
@@ -30,10 +40,48 @@
   color: var(--input-fg-color);
 }
 
-
 .GUIbutton {
 }
 
+
+.GUIcontextmenu {
+  float:left;
+  border: 2px solid black;
+  margin:  1px;
+  padding: 0px;
+  position: absolute;
+  text-size: small;
+  font-family: "Liberation Sans Narrow", "Cantarell Thin", Sans;
+}
+
+.GUIcontextmenuHead  {
+  border:  1px solid black;
+  background: var(--contextmenu-head-bg-color);
+  color: var(--contextmenu-head-fg-color);
+  margin:  0px;
+  padding: 1px;
+  text-align: center;
+  text-size: small;
+  font-family: "Liberation Sans Narrow", "Cantarell Thin", Sans;
+  font-weight: bold;
+}
+
+.GUIcontextmenuClient {
+  overflow: auto;
+  padding: 0px;
+  background-color: var(--contextmenu-bg-color);
+  color: var(--contextmenu-fg-color);
+  text-size: small;
+  font-family: system-ui;
+}
+
+ul.GUIcontextmenuElements {
+  list-style-type: none;
+  margin:  0px;
+  padding: 0px;
+}
+
+
 button {
   background-color: var(--input-bg-color);
   color: var(--input-fg-color);
@@ -44,6 +92,7 @@ input {
   border: 1px solid var(--input-bg-color);
   background-color: var(--input-bg-color);
   color: var(--input-fg-color);
+  font-family: "Lucida Console", Courier, monospace;
 }
 
 td {

webinterface/gui/gui.js

@@ -1,4 +1,7 @@
 
+var MousePosX = null;
+var MousePosY = null;
+    
 
 //
 // init all variables with the class givin
@@ -8,9 +11,28 @@ $(document).ready(function() {
 	$(".GUIwindow").each( function (i) {
 		gWindowDragElement(this);
 	});
+
+    document.addEventListener('mousemove', onMouseUpdate, false);
+    document.addEventListener('mouseenter', onMouseUpdate, false);
+    
 });
 
 
+function onMouseUpdate(e) {
+      MousePosX = e.pageX;
+      MousePosY = e.pageY;
+}
+
+function getMouseX() {
+  return MousePosX;
+}
+
+function getMouseY() {
+  return MousePosY;
+}
+
+
+
 //
 // 
 function gAddEventListener (id, eventname, callback) {
@@ -32,3 +54,74 @@ function getTextBetween(fulltext, text1, text2) {
 	else return "";
 };
 
+
+
+//
+// Context Menus
+function gContextmenuCreate(title) {
+	let cm = document.getElementById("ContextMenu");
+	if (cm) {
+		let parent = cm.parentNode;
+		parent.removeChild(cm);
+	}
+	
+	debug("create Contextmenu:" + title);
+	
+	var head = document.createElement("div");
+	head.setAttribute("id", "ConextMenuHead");
+	head.setAttribute("class", "GUIcontextmenuHead");
+	head.innerHTML = title;
+
+	var ul = document.createElement("ul");
+	ul.setAttribute("id", "ContextMenuElements");
+	ul.setAttribute("class", "GUIcontextmenuElements");
+
+	var client = document.createElement("div");
+	client.setAttribute("id", "ContextMenuClient");
+	client.setAttribute("class", "GUIcontextmenuClient");
+	client.setAttribute("style", "max-height: 400px; max-width:150px;");
+	client.innerHTML = "";
+	client.appendChild (ul);
+
+	cm = document.createElement("div");
+	cm.setAttribute("id", "ContextMenu");
+	cm.setAttribute("class", "GUIcontextmenu");
+	cm.appendChild (head);
+	cm.appendChild (client);
+
+	document.body.appendChild(cm);
+	cm.style.top = getMouseY();
+	cm.style.left = getMouseX();
+
+	return cm;
+};
+
+
+function gContextmenuAdd(text, callback_function, value) {
+	let ul = document.getElementById("ContextMenuElements");
+
+    if (ul)	{
+    	let li = document.createElement("li");
+    
+    	li.innerHTML = text;
+        li.value = value;
+        if (typeof callback_function === 'object' && callback_function !== null) {
+            li.addEventListener("click", callback_function);
+            debug ("add event listener.");
+        }
+        else {
+        	debug ("add event listener.");
+        }
+
+        ul.appendChild(li);
+    }
+};
+
+
+function gContextmenuClose() {
+	let cm = document.getElementById("ContextMenu");
+	if (cm) {
+		let parent = cm.parentNode;
+		parent.removeChild(cm);
+	}
+};

webinterface/index.html

@@ -53,6 +53,8 @@
 	<br><br>
 	<button class="side_btn_mode" id="sidebtn-reset" onclick="sideBtnResetClick(this);" value="none">
 		<img src="images/btnreset.png"></button><br><br>
+	<button class="side_btn_mode" id="sidebtn-close" onclick="sideBtnCloseClick(this);" value="none">
+		<img src="images/btnclose.png"></button><br><br>
 	<br><br>		
 	<div class="page_side_edit" id="side_trackeditbuttons" style="display: none;">
 	<button class="side_btn_mode side_btn_selected" id="mode-none" onclick="sideBtnModeClick(this);" value="none">
@@ -63,8 +65,8 @@
 		<img src="images/btndelete.png"></button>
 	<button class="side_btn_mode" id="mode-rail" onclick="sideBtnModeClick(this);" value="rail">
 		<img src="images/btnrail.png"></button>
-	<button class="side_btn_mode" id="mode-turn" onclick="sideBtnModeClick(this);" value="turnout">
-		<img src="images/btnturnout.png"></button>
+	<button class="side_btn_mode" id="mode-detail" onclick="sideBtnModeClick(this);" value="detail">
+		<img src="images/btnsettings.png"></button>
 	<br><br>		
 	</div>
 

webinterface/layout.css

@@ -1,6 +1,7 @@
 
 body {
 	margin: 0px;
+    font-family: system-ui;
 }
 
 :root {

webinterface/railways.js

@@ -209,10 +209,38 @@ function rw_Click(x,y) {
 		
 		//
 		// Sensor
-		if (track.elements[idx].type == RAILWAY_SENSOR) {
+		else if (track.elements[idx].type == RAILWAY_SENSOR) {
 			if (track.elements[idx].name != "") {
 			}
 		}
+
+		//
+		// Block
+		else if (track.elements[idx].type == RAILWAY_BLOCK) {
+            block_contextmenu(track.elements[idx].name);
+		}
+		else if (y > 0 && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 1 && 
+		        track.elements[x + (y-1)*track.size.x].type == RAILWAY_BLOCK) {
+		    block_contextmenu(track.elements[x + (y-1)*track.size.x].name)
+		}
+		else if (y < track.size.y && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 1 && 
+        	    track.elements[x + (y+1)*track.size.x].type == RAILWAY_BLOCK) {
+		   	block_contextmenu(track.elements[x + (y+1)*track.size.x].name)
+		}
+		else if (x > 0 && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 2 && 
+        	    track.elements[(x-1) + y*track.size.x].type == RAILWAY_BLOCK) {
+		   	block_contextmenu(track.elements[(x-1) + y*track.size.x].name)
+		}
+		else if (x < track.size.x && track.elements[idx].type == RAILWAY_NORMAL && track.elements[idx].dir == 2 && 
+        	    track.elements[(x+1) + y*track.size.x].type == RAILWAY_BLOCK) {
+		   	block_contextmenu(track.elements[(x+1) + y*track.size.x].name)
+		}
+
+		//
+		//
+		else if (track.elements[idx].type == RAILWAY_NORMAL) {
+//			track_selectsegment(x, y);
+		}
 	}
 };
 

webinterface/side.js

@@ -31,7 +31,6 @@ function side_Display(type) {
 //
 // value 0-off, 1-on, 2-stop, 3-shortciruit
 function sideBtnOnOffClick (obj) {
-	side_Display(SIDE_DISPLAY_NONE);
     if (obj.value == 0) {
     	serverinout_Power(1);
     }
@@ -89,6 +88,14 @@ function sideBtnLocoClick () {
 };
 
 
+//
+// close buttons to default
+//
+function sideBtnCloseClick () {
+	side_Display(SIDE_DISPLAY_NONE);
+};
+
+
 //
 // send sensor and turnout reset to server.
 //
@@ -107,8 +114,6 @@ function sideBtnModeGet () {
 	    if (objiter.className == "side_btn_mode side_btn_selected") selected = objiter.id;
 	});
 	
-	// debug ("Selected: '" + selected + "'");
-	
 	return selected;
 };
 

webinterface/track.js

@@ -419,6 +419,8 @@ function trackDraw() {
 		var t = trackGetTurnout({x: trackMouse.pos.x, y: trackMouse.pos.y});
 	}
 
+    else if (!mode == "mode-none") alert("track.js: unknown mode:" + mode);
+
 	//
 	// flip screen - double buffering
 	trackFlipScreen();
@@ -492,6 +494,8 @@ function trackMouseup(event) {
 	debug ("trackMouseup down: " + trackMouse.down.x + "," + trackMouse.down.y);
 	debug ("trackMouseup  pos: " + trackMouse.pos.x + "," + trackMouse.pos.y);
 
+    gContextmenuClose();
+
 	if (mode == "mode-rail") {
 		var pos = {};
 		var selected = new Array();
@@ -502,7 +506,7 @@ function trackMouseup(event) {
 		selected.length = 0;
 	}
 
-	else if (mode == "mode-turn") {
+	else if (mode == "mode-detail") {
 		rwdetail_show(trackMouse.pos.x, trackMouse.pos.y);
 	}
 
@@ -543,6 +547,7 @@ function trackMouseup(event) {
 		selected.length = 0;
 	}
 	else {
+		debug ("rw_Click was das?");
 		rw_Click(trackMouse.pos.x, trackMouse.pos.y);
 	}