From 4bd7d202930dd0ba9129c7bd6af7dd83bc294c24 Mon Sep 17 00:00:00 2001
From: Niki Roo <niki@nikiroo.be>
Date: Wed, 13 May 2020 00:07:12 +0200
Subject: [PATCH] ui

---
 .../fanfix/library/WebLibraryServer.java      | 160 +++++++++---------
 .../fanfix/library/web/clear-32x32.png        | Bin 0 -> 1848 bytes
 src/be/nikiroo/fanfix/library/web/clear.png   | Bin 0 -> 1698 bytes
 src/be/nikiroo/fanfix/library/web/style.css   |  21 ++-
 4 files changed, 98 insertions(+), 83 deletions(-)
 create mode 100644 src/be/nikiroo/fanfix/library/web/clear-32x32.png
 create mode 100644 src/be/nikiroo/fanfix/library/web/clear.png

diff --git a/src/be/nikiroo/fanfix/library/WebLibraryServer.java b/src/be/nikiroo/fanfix/library/WebLibraryServer.java
index 4abd438b..7c5cf425 100644
--- a/src/be/nikiroo/fanfix/library/WebLibraryServer.java
+++ b/src/be/nikiroo/fanfix/library/WebLibraryServer.java
@@ -93,8 +93,8 @@ public class WebLibraryServer implements Runnable {
 						subkeys.add("");
 
 						for (String subkey : subkeys) {
-							if (CookieUtils.validateCookie(
-									wookie + subkey + opts, rehashed)) {
+							if (CookieUtils.validateCookie(wookie + subkey
+									+ opts, rehashed)) {
 								this.wookie = wookie;
 								this.token = token;
 								this.success = true;
@@ -148,8 +148,7 @@ public class WebLibraryServer implements Runnable {
 		Integer port = Instance.getInstance().getConfig()
 				.getInteger(Config.SERVER_PORT);
 		if (port == null) {
-			throw new IOException(
-					"Cannot start web server: port not specified");
+			throw new IOException("Cannot start web server: port not specified");
 		}
 
 		int cacheMb = Instance.getInstance().getConfig()
@@ -173,8 +172,8 @@ public class WebLibraryServer implements Runnable {
 			if (!keystorePath.isEmpty()) {
 				File keystoreFile = new File(keystorePath);
 				try {
-					KeyStore keystore = KeyStore
-							.getInstance(KeyStore.getDefaultType());
+					KeyStore keystore = KeyStore.getInstance(KeyStore
+							.getDefaultType());
 					InputStream keystoreStream = new FileInputStream(
 							keystoreFile);
 					try {
@@ -226,8 +225,8 @@ public class WebLibraryServer implements Runnable {
 							params.get("login"), whitelist);
 				} else {
 					String token = cookies.get("token");
-					login = login(who, token, Instance.getInstance().getConfig()
-							.getList(Config.SERVER_ALLOWED_SUBKEYS));
+					login = login(who, token, Instance.getInstance()
+							.getConfig().getList(Config.SERVER_ALLOWED_SUBKEYS));
 				}
 
 				if (login.isSuccess()) {
@@ -236,8 +235,9 @@ public class WebLibraryServer implements Runnable {
 					}
 
 					// refresh token
-					session.getCookies().set(new Cookie("token",
-							login.getToken(), "30; path=/"));
+					session.getCookies()
+							.set(new Cookie("token", login.getToken(),
+									"30; path=/"));
 
 					// set options
 					String optionName = params.get("optionName");
@@ -247,8 +247,9 @@ public class WebLibraryServer implements Runnable {
 							session.getCookies().delete(optionName);
 							cookies.remove(optionName);
 						} else {
-							session.getCookies().set(new Cookie(optionName,
-									optionValue, "; path=/"));
+							session.getCookies().set(
+									new Cookie(optionName, optionValue,
+											"; path=/"));
 							cookies.put(optionName, optionValue);
 						}
 					}
@@ -258,7 +259,7 @@ public class WebLibraryServer implements Runnable {
 				if (!login.isSuccess() && (uri.equals("/") //
 						|| uri.startsWith(STORY_URL_BASE) //
 						|| uri.startsWith(VIEWER_URL_BASE) //
-						|| uri.startsWith(LIST_URL))) {
+				|| uri.startsWith(LIST_URL))) {
 					rep = loginPage(login, uri);
 				}
 
@@ -302,9 +303,10 @@ public class WebLibraryServer implements Runnable {
 									NanoHTTPD.MIME_PLAINTEXT, "Not Found");
 						}
 					} catch (Exception e) {
-						Instance.getInstance().getTraceHandler().error(
-								new IOException("Cannot process web request",
-										e));
+						Instance.getInstance()
+								.getTraceHandler()
+								.error(new IOException(
+										"Cannot process web request", e));
 						rep = newFixedLengthResponse(Status.INTERNAL_ERROR,
 								NanoHTTPD.MIME_PLAINTEXT, "An error occured");
 					}
@@ -413,8 +415,8 @@ public class WebLibraryServer implements Runnable {
 			wl = false;
 		}
 
-		rw = Instance.getInstance().getConfig().getBoolean(Config.SERVER_RW,
-				rw);
+		rw = Instance.getInstance().getConfig()
+				.getBoolean(Config.SERVER_RW, rw);
 		if (!subkey.isEmpty()) {
 			List<String> allowed = Instance.getInstance().getConfig()
 					.getList(Config.SERVER_ALLOWED_SUBKEYS);
@@ -448,10 +450,9 @@ public class WebLibraryServer implements Runnable {
 			uri = "/";
 		}
 
-		builder.append(
-				"<form method='POST' action='" + uri + "' class='login'>\n");
-		builder.append(
-				"<p>You must be logged into the system to see the stories.</p>");
+		builder.append("<form method='POST' action='" + uri
+				+ "' class='login'>\n");
+		builder.append("<p>You must be logged into the system to see the stories.</p>");
 		builder.append("\t<input type='text' name='login' />\n");
 		builder.append("\t<input type='password' name='password' />\n");
 		builder.append("\t<input type='submit' value='Login' />\n");
@@ -474,8 +475,8 @@ public class WebLibraryServer implements Runnable {
 			}
 
 			return newInputStreamResponse("application/json",
-					new ByteArrayInputStream(
-							new JSONArray(jsons).toString().getBytes()));
+					new ByteArrayInputStream(new JSONArray(jsons).toString()
+							.getBytes()));
 		}
 
 		return NanoHTTPD.newFixedLengthResponse(Status.BAD_REQUEST,
@@ -489,20 +490,24 @@ public class WebLibraryServer implements Runnable {
 		result = new MetaResultList(result.filter(whitelist, null, null));
 		StringBuilder builder = new StringBuilder();
 
+		
 		appendPreHtml(builder, true);
 
+		Map<String, String> params = session.getParms();
+		
 		String filter = cookies.get("filter");
+		if (params.get("clear") != null)
+			filter = null;
 		if (filter == null) {
 			filter = "";
 		}
 
-		Map<String, String> params = session.getParms();
-		String browser = params.get("browser") == null ? ""
-				: params.get("browser");
-		String browser2 = params.get("browser2") == null ? ""
-				: params.get("browser2");
-		String browser3 = params.get("browser3") == null ? ""
-				: params.get("browser3");
+		String browser = params.get("browser") == null ? "" : params
+				.get("browser");
+		String browser2 = params.get("browser2") == null ? "" : params
+				.get("browser2");
+		String browser3 = params.get("browser3") == null ? "" : params
+				.get("browser3");
 
 		String filterSource = null;
 		String filterAuthor = null;
@@ -586,31 +591,29 @@ public class WebLibraryServer implements Runnable {
 		// TODO: javascript in realtime, using visible=false + hide [submit]
 		builder.append("<div class='filter'>\n");
 		builder.append("\tFilter: \n");
-		builder.append(
-				"\t<input name='optionName'  type='hidden' value='filter' />\n");
+		builder.append("\t<input name='optionName'  type='hidden' value='filter' />\n");
 		builder.append("\t<input name='optionValue' type='text'   value='"
 				+ filter + "' place-holder='...' />\n");
-		builder.append(
-				"\t<input name='submit' type='submit' value='Filter' />\n");
+		builder.append("\t<input name='clear'  type='submit' value='x' />");
+		builder.append("\t<input name='submit' type='submit' value='Filter' />\n");
 		builder.append("</div>\n");
 		builder.append("</form>\n");
 
 		builder.append("\t<div class='books'>");
 		for (MetaData meta : result.getMetas()) {
-			if (!filter.isEmpty() && !meta.getTitle().toLowerCase()
-					.contains(filter.toLowerCase())) {
+			if (!filter.isEmpty()
+					&& !meta.getTitle().toLowerCase()
+							.contains(filter.toLowerCase())) {
 				continue;
 			}
 
 			// TODO Sub sources
-			if (filterSource != null
-					&& !filterSource.equals(meta.getSource())) {
+			if (filterSource != null && !filterSource.equals(meta.getSource())) {
 				continue;
 			}
 
 			// TODO: sub authors
-			if (filterAuthor != null
-					&& !filterAuthor.equals(meta.getAuthor())) {
+			if (filterAuthor != null && !filterAuthor.equals(meta.getAuthor())) {
 				continue;
 			}
 
@@ -626,12 +629,10 @@ public class WebLibraryServer implements Runnable {
 
 			if (lib.isCached(meta.getLuid())) {
 				// ◉ = &#9673;
-				builder.append(
-						"<span class='cache_icon cached'>&#9673;</span>");
+				builder.append("<span class='cache_icon cached'>&#9673;</span>");
 			} else {
 				// ○ = &#9675;
-				builder.append(
-						"<span class='cache_icon uncached'>&#9675;</span>");
+				builder.append("<span class='cache_icon uncached'>&#9675;</span>");
 			}
 			builder.append("<span class='luid'>");
 			builder.append(meta.getLuid());
@@ -672,8 +673,7 @@ public class WebLibraryServer implements Runnable {
 		// 1-based (0 = desc)
 		int chapter = 0;
 		if (chapterStr != null && !"cover".equals(chapterStr)
-				&& !"metadata".equals(chapterStr)
-				&& !"json".equals(chapterStr)) {
+				&& !"metadata".equals(chapterStr) && !"json".equals(chapterStr)) {
 			try {
 				chapter = Integer.parseInt(chapterStr);
 				if (chapter < 0) {
@@ -729,8 +729,8 @@ public class WebLibraryServer implements Runnable {
 							builder.append(p.getContent());
 						}
 
-						in = new ByteArrayInputStream(
-								builder.toString().getBytes("utf-8"));
+						in = new ByteArrayInputStream(builder.toString()
+								.getBytes("utf-8"));
 					} else {
 						Paragraph para = story.getChapters().get(chapter - 1)
 								.getParagraphs().get(paragraph - 1);
@@ -740,8 +740,8 @@ public class WebLibraryServer implements Runnable {
 							mimeType = "image/png";
 							in = img.newInputStream();
 						} else {
-							in = new ByteArrayInputStream(
-									para.getContent().getBytes("utf-8"));
+							in = new ByteArrayInputStream(para.getContent()
+									.getBytes("utf-8"));
 						}
 					}
 				}
@@ -860,8 +860,7 @@ public class WebLibraryServer implements Runnable {
 					desc.append("\t\t<img src='/story/" + luid + "/cover'/>\n");
 					desc.append("\t</div>\n");
 					desc.append("\t<table>\n");
-					desc.append(
-							"\t\t<tr><th>HEAD 1</th><th>HEAD 2</th></tr>\n");
+					desc.append("\t\t<tr><th>HEAD 1</th><th>HEAD 2</th></tr>\n");
 					desc.append("\t\t<tr><td>KEY 1</td><td>VAL 1</td></tr>\n");
 					desc.append("\t\t<tr><td>KEY 2</td><td>VAL 2</td></tr>\n");
 					desc.append("\t</table>\n");
@@ -871,8 +870,7 @@ public class WebLibraryServer implements Runnable {
 
 				content.append("<div class='viewer text'>\n");
 				content.append(desc);
-				content.append(
-						new TextOutput(false).convert(chap, chapter > 0));
+				content.append(new TextOutput(false).convert(chap, chapter > 0));
 				content.append("</div>\n");
 
 				if (chapter <= 1)
@@ -897,8 +895,8 @@ public class WebLibraryServer implements Runnable {
 					para = chap.getParagraphs().get(paragraph - 1);
 				} catch (IndexOutOfBoundsException e) {
 					return NanoHTTPD.newFixedLengthResponse(Status.NOT_FOUND,
-							NanoHTTPD.MIME_PLAINTEXT,
-							"Paragraph " + paragraph + " not found");
+							NanoHTTPD.MIME_PLAINTEXT, "Paragraph " + paragraph
+									+ " not found");
 				}
 
 				if (para.getType() == ParagraphType.IMAGE) {
@@ -943,7 +941,7 @@ public class WebLibraryServer implements Runnable {
 					disabledLeft, previous, //
 					disabledRight, next, //
 					disabledRight, last //
-			));
+					));
 
 			builder.append(content);
 
@@ -957,18 +955,19 @@ public class WebLibraryServer implements Runnable {
 			builder.append("	<a class='button back' href='/'>BACK</a>\n");
 
 			if (paragraph > 0) {
-				builder.append(String.format("" //
-						+ "\t<a%s class='button zoomreal'   href='%s'>REAL</a>\n"//
-						+ "\t<a%s class='button zoomwidth'  href='%s'>WIDTH</a>\n"//
-						+ "\t<a%s class='button zoomheight' href='%s'>HEIGHT</a>\n"//
-						+ "</div>\n", //
-						disabledZoomReal,
-						uri + "?optionName=zoom&optionValue=real", //
-						disabledZoomWidth,
-						uri + "?optionName=zoom&optionValue=width", //
-						disabledZoomHeight,
-						uri + "?optionName=zoom&optionValue=height" //
-				));
+				builder.append(String
+						.format("" //
+								+ "\t<a%s class='button zoomreal'   href='%s'>REAL</a>\n"//
+								+ "\t<a%s class='button zoomwidth'  href='%s'>WIDTH</a>\n"//
+								+ "\t<a%s class='button zoomheight' href='%s'>HEIGHT</a>\n"//
+								+ "</div>\n", //
+								disabledZoomReal, uri
+										+ "?optionName=zoom&optionValue=real", //
+								disabledZoomWidth, uri
+										+ "?optionName=zoom&optionValue=width", //
+								disabledZoomHeight, uri
+										+ "?optionName=zoom&optionValue=height" //
+						));
 			}
 
 			appendPostHtml(builder);
@@ -984,21 +983,23 @@ public class WebLibraryServer implements Runnable {
 
 	private Response newInputStreamResponse(String mimeType, InputStream in) {
 		if (in == null) {
-			return NanoHTTPD.newFixedLengthResponse(Status.NO_CONTENT, "",
-					null);
+			return NanoHTTPD
+					.newFixedLengthResponse(Status.NO_CONTENT, "", null);
 		}
 		return NanoHTTPD.newChunkedResponse(Status.OK, mimeType, in);
 	}
 
 	private String getContentOf(String file) {
-		InputStream in = IOUtils.openResource(WebLibraryServerIndex.class,
-				file);
+		InputStream in = IOUtils
+				.openResource(WebLibraryServerIndex.class, file);
 		if (in != null) {
 			try {
 				return IOUtils.readSmallStream(in);
 			} catch (IOException e) {
-				Instance.getInstance().getTraceHandler().error(
-						new IOException("Cannot get file: index.pre.html", e));
+				Instance.getInstance()
+						.getTraceHandler()
+						.error(new IOException(
+								"Cannot get file: index.pre.html", e));
 			}
 		}
 
@@ -1048,8 +1049,7 @@ public class WebLibraryServer implements Runnable {
 	}
 
 	// NULL if not whitelist OK or if not found
-	private Story story(String luid, List<String> whitelist)
-			throws IOException {
+	private Story story(String luid, List<String> whitelist) throws IOException {
 		synchronized (storyCache) {
 			if (storyCache.containsKey(luid)) {
 				Story story = storyCache.get(luid);
@@ -1111,8 +1111,8 @@ public class WebLibraryServer implements Runnable {
 			favicon = "icon_" + icon.replace("-", "_") + ".png";
 		}
 
-		builder.append(
-				getContentOf("index.pre.html").replace("favicon.ico", favicon));
+		builder.append(getContentOf("index.pre.html").replace("favicon.ico",
+				favicon));
 
 		if (banner) {
 			builder.append("<div class='banner'>\n");
diff --git a/src/be/nikiroo/fanfix/library/web/clear-32x32.png b/src/be/nikiroo/fanfix/library/web/clear-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdc51d0ce3e791a8e183e646e35b7f8f6a297996
GIT binary patch
literal 1848
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

literal 0
HcmV?d00001

diff --git a/src/be/nikiroo/fanfix/library/web/clear.png b/src/be/nikiroo/fanfix/library/web/clear.png
new file mode 100644
index 0000000000000000000000000000000000000000..db0509fc1834f85d2284a49b1a7c37840007f412
GIT binary patch
literal 1698
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

literal 0
HcmV?d00001

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index fb011901..e00a52ac 100644
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -63,7 +63,7 @@ h3 {
 	width: 250px;
 	display: flex;
 	margin: auto;
-	margin-top: 200px;
+	margin-top: calc(50% - 320px);
 	flex-direction: column;
 	border: 1px solid gray;
 	padding: 20px;
@@ -84,6 +84,18 @@ h3 {
 
 .filter {
 	padding: 10px;
+	height: 36px;
+}
+
+.filter > * {
+	height: 36px;
+}
+
+.filter input[name='clear'] {
+	background-image: url('/clear-32x32.png');
+	color: transparent;
+	width: 36px;
+	height: 36px;
 }
 
 .books {
@@ -96,8 +108,7 @@ h3 {
 
 .book_line .link, .book_line .title {
 	flex-grow: 100;
-	padding-right: 5px;
-	padding-left: 5px;
+	padding: 5px;
 }
 
 .book_line .link {
@@ -200,6 +211,10 @@ a.viewer.link:hover {
 	display: flex;
 }
 
+.desc .cover img {
+	width: 100px;
+}
+
 @media(min-width: 800px) {
 	 .main {
 	 	max-width: 800px;
-- 
2.27.0