From 00eb6145dace76265e87e8ec1d64e797aa70f4df Mon Sep 17 00:00:00 2001 From: Stephan Richter Date: Sat, 12 Sep 2020 21:21:02 +0200 Subject: [PATCH] implemented editing of layout in browser --- resources/css/style.css | 14 ++++- resources/js/plan.js | 61 ++++++++++++++++++- resources/svg/DiagES.svg | 3 + .../de/srsoftware/web4rail/Application.java | 4 +- .../java/de/srsoftware/web4rail/Page.java | 1 + .../java/de/srsoftware/web4rail/Plan.java | 18 ++++++ .../de/srsoftware/web4rail/tiles/Tile.java | 8 +-- 7 files changed, 100 insertions(+), 9 deletions(-) create mode 100644 resources/svg/DiagES.svg diff --git a/resources/css/style.css b/resources/css/style.css index 0846490..90e1ea2 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -1,3 +1,8 @@ +body{ + background: gray; + width: 100%; + height: 100%; +} .tile{ border: 1px solid black; width: 30px; @@ -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{ diff --git a/resources/js/plan.js b/resources/js/plan.js index 2ead174..596ba8d 100644 --- a/resources/js/plan.js +++ b/resources/js/plan.js @@ -1 +1,60 @@ -alert('hallo!'); \ No newline at end of file +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); +} diff --git a/resources/svg/DiagES.svg b/resources/svg/DiagES.svg new file mode 100644 index 0000000..4e25784 --- /dev/null +++ b/resources/svg/DiagES.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/main/java/de/srsoftware/web4rail/Application.java b/src/main/java/de/srsoftware/web4rail/Application.java index 4eb509a..28212be 100644 --- 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; 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 { 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 { } 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 { diff --git a/src/main/java/de/srsoftware/web4rail/Page.java b/src/main/java/de/srsoftware/web4rail/Page.java index 66e85c4..d4f9c3e 100644 --- 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 { StringBuffer sb = new StringBuffer() .append("\n") .append("\t\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"); } diff --git a/src/main/java/de/srsoftware/web4rail/Plan.java b/src/main/java/de/srsoftware/web4rail/Plan.java index 21ed780..e654ddf 100644 --- 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; 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> tiles = new HashMap>(); @@ -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; diff --git a/src/main/java/de/srsoftware/web4rail/tiles/Tile.java b/src/main/java/de/srsoftware/web4rail/tiles/Tile.java index 74ad49e..16191b9 100644 --- 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; public abstract class Tile { - protected int x,y; + protected int x = -1,y = -1; protected HashSet classes = new HashSet(); public 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()) {