implemented editing of layout in browser

5 years ago · 00eb6145da
7 changed files with 100 additions and 9 deletions
--- a/resources/css/style.css
+++ b/resources/css/style.css
@ -1,3 +1,8 @@
				@@ -1,3 +1,8 @@
+body{
+	background: gray;
+	width: 100%;
+	height: 100%;
+}
 .tile{
 	border: 1px solid black;
 	width: 30px;
@ -26,17 +31,20 @@ svg text{
				@@ -26,17 +31,20 @@ svg text{
 	font-size: 12px;
 }

-.menu .tile .list{
+.menu .list{
 	display: none;
 }

-.menu .tile:hover .list{
+.menu div:hover .list{
+	display: inherit;
+}
+
+.menu .tile .list{
 	position: fixed;
 	right: 0;
 	height: 30px;
 	left: 0; 
 	bottom: 40px; 
-	display: inline-block;
 }

 .menu .tile .list .tile{
--- a/resources/js/plan.js
+++ b/resources/js/plan.js
@ -1 +1,60 @@
				@@ -1 +1,60 @@
-alert('hallo!');
+const ADD = 1;
+const SQUARE = 30;
+const BODY = 'body';
+const SVG = 'svg';
+var selected = null;
+var mode = null;
+
+
+function addTile(tile,x,y){	
+	console.log("addTile:",tile.id,x,y);
+	x = Math.floor(x/SQUARE);
+	y = Math.floor(y/SQUARE);
+	var id = 'tile-'+x+'-'+y;
+	$('#'+id).remove();
+	var tile = $(tile).clone().css({left:(30*x)+'px',top:(30*y)+'px','border':''}).attr('id',id);
+	console.log(tile);
+	$(BODY).append(tile);
+}
+
+function bodyClick(ev){
+	console.log('bodyClick:',ev);
+	switch (mode){
+	case undefined:
+		case null: return;
+		case ADD:
+			return addTile(selected,ev.clientX,ev.clientY);
+	}
+	console.log(ev.clientX,ev.clientY);
+}
+
+function closeMenu(ev){
+	console.log('closeMenu:',ev);
+	if (selected != null) $(selected).css('border','');
+	$('.menu .list').css('display','')
+	mode = null;
+	selected = null;
+	return false;
+}
+
+function enableAdding(ev){
+	console.log('enableAdding:',ev);
+	if (selected != null) $(selected).css('border','');
+	selected = ev.target;
+	while (selected != null && selected.nodeName != SVG) selected = selected.parentNode;
+	if (selected == null){
+		mode = null;
+	} else {
+		$(selected).css('border','2px solid red');
+		$('.menu .tile .list').css('display','inherit');
+		mode = ADD;
+	}
+	return false; // otherwise body.click would also be triggered
+}
+
+window.onload = function () {
+	var isDragging = false;
+	$('.menu > div').click(closeMenu);
+	$('.menu .tile .list svg').click(enableAdding);
+	$(BODY).click(bodyClick);
+}
--- a/resources/svg/DiagES.svg
+++ b/resources/svg/DiagES.svg
@ -0,0 +1,3 @@
				@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewbox="0 0 100 100">
+	<polygon points="65,100 35,100 100,35 100,65" />
+</svg>
--- a/src/main/java/de/srsoftware/web4rail/Application.java
+++ b/src/main/java/de/srsoftware/web4rail/Application.java
@ -8,6 +8,7 @@ import java.io.OutputStream;
				@@ -8,6 +8,7 @@ import java.io.OutputStream;
 import java.net.InetSocketAddress;
 import java.net.URI;
 import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;

 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@ -62,6 +63,7 @@ public class Application {
				@@ -62,6 +63,7 @@ public class Application {
 		File file = new File(System.getProperty("user.dir")+"/resources"+uri);
 		LOG.debug("requesting file: {}",file);
 		if (file.exists()) {
+			client.getResponseHeaders().add("Content-Type", Files.probeContentType(file.toPath()));
 			client.sendResponseHeaders(200, file.length());
 			OutputStream out = client.getResponseBody();
 			FileInputStream in = new FileInputStream(file);
@ -86,7 +88,7 @@ public class Application {
				@@ -86,7 +88,7 @@ public class Application {
 	}

 	private static void sendPlan(HttpExchange client) throws IOException {
-		send(client,plan.html().style("css/style.css").js("jquery-3.5.1.slim.min.js").js("js/plan.js"));
+		send(client,plan.html().style("css/style.css").js("js/jquery-3.5.1.slim.min.js").js("js/plan.js"));
 	}

 	private static void send(HttpExchange client, Page response) throws IOException {
--- a/src/main/java/de/srsoftware/web4rail/Page.java
+++ b/src/main/java/de/srsoftware/web4rail/Page.java
@ -24,6 +24,7 @@ public class Page {
				@@ -24,6 +24,7 @@ public class Page {
 		StringBuffer sb = new StringBuffer()
 				.append("<html>\n")
 				.append("\t<head>\n");
+		sb.append("\t\t"+new Tag("meta").attr("charset", "UTF-8")+"\n");
 		for (String cssFile : cssFiles) {
 			sb.append("\t\t"+new Tag("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", cssFile)+"\n");
 		}
--- a/src/main/java/de/srsoftware/web4rail/Plan.java
+++ b/src/main/java/de/srsoftware/web4rail/Plan.java
@ -5,9 +5,18 @@ import java.util.HashMap;
				@@ -5,9 +5,18 @@ import java.util.HashMap;
 import java.util.Map.Entry;

 import de.srsoftware.tools.Tag;
+import de.srsoftware.web4rail.tiles.DiagES;
+import de.srsoftware.web4rail.tiles.DiagNE;
+import de.srsoftware.web4rail.tiles.DiagSW;
+import de.srsoftware.web4rail.tiles.DiagWN;
+import de.srsoftware.web4rail.tiles.EndE;
+import de.srsoftware.web4rail.tiles.EndW;
 import de.srsoftware.web4rail.tiles.StraightH;
 import de.srsoftware.web4rail.tiles.StraightV;
 import de.srsoftware.web4rail.tiles.Tile;
+import de.srsoftware.web4rail.tiles.TurnoutSE;
+import de.srsoftware.web4rail.tiles.TurnoutSW;
+import de.srsoftware.web4rail.tiles.TurnoutWS;

 public class Plan {
 	private HashMap<Integer,HashMap<Integer,Tile>> tiles = new HashMap<Integer,HashMap<Integer,Tile>>();
@ -50,6 +59,15 @@ public class Plan {
				@@ -50,6 +59,15 @@ public class Plan {
 		StringBuffer tiles = new StringBuffer();
 		tiles.append(new StraightH().html());
 		tiles.append(new StraightV().html());
+		tiles.append(new DiagES().html());
+		tiles.append(new DiagSW().html());
+		tiles.append(new DiagNE().html());
+		tiles.append(new DiagWN().html());
+		tiles.append(new EndE().html());
+		tiles.append(new EndW().html());
+		tiles.append(new TurnoutSE().html());
+		tiles.append(new TurnoutWS().html());
+		tiles.append(new TurnoutSW().html());
 		new Tag("div").clazz("list").content(tiles.toString()).addTo(tileMenu).addTo(menu);
 			
 		return menu;
--- a/src/main/java/de/srsoftware/web4rail/tiles/Tile.java
+++ b/src/main/java/de/srsoftware/web4rail/tiles/Tile.java
@ -12,7 +12,7 @@ import de.srsoftware.web4rail.Application;
				@@ -12,7 +12,7 @@ import de.srsoftware.web4rail.Application;

 public abstract class Tile {
 	
-	protected int x,y;	
+	protected int x = -1,y = -1;	
 	protected HashSet<String> classes = new HashSet<String>();
 	
 	public Tile() {
@ -28,12 +28,12 @@ public abstract class Tile {
				@@ -28,12 +28,12 @@ public abstract class Tile {
 	public String html() throws IOException {
 		
 		Tag svg = new Tag("svg")
-				.id("tile-"+x+"-"+y)
+				.id((x!=-1 && y!=-1)?("tile-"+x+"-"+y):(getClass().getSimpleName()))
 				.clazz(classes)
 				.size(100,100)
 				.attr("name", getClass().getSimpleName())
-				.attr("viewbox", "0 0 100 100")
-				.style("left: "+(30*x)+"px; top: "+(30*y)+"px");
+				.attr("viewbox", "0 0 100 100");
+				if (x>-1) svg.style("left: "+(30*x)+"px; top: "+(30*y)+"px");

 		File file = new File(System.getProperty("user.dir")+"/resources/svg/"+getClass().getSimpleName()+".svg");
 		if (file.exists()) {