From c6a1236bbdc7d91a96815f2dec7b7cbd6a35ca89 Mon Sep 17 00:00:00 2001
From: Banana <mail@bananas-playground.net>
Date: Mon, 10 May 2021 22:44:47 +0200
Subject: [PATCH] adding input char limit and some js to show it

---
 CHANGELOG                                     |  1 +
 TODO                                          |  2 --
 .../entry/field-text3-description.html        |  2 +-
 .../default/entry/field-textarea-content.html |  2 +-
 .../view/default/entry/field-textarea.html    |  2 +-
 .../default/manageentry/field-number.html     |  3 ++-
 .../view/default/manageentry/field-text.html  | 17 +++++++++++++++++
 .../view/default/manageentry/field-text3.html | 19 ++++++++++++++++++-
 .../default/manageentry/field-textarea.html   |  3 ++-
 9 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 034cf14..0693037 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -36,6 +36,7 @@
 	* After adding an entry the option to view or edit the entry is now available
 	* Added game info tool.
 	* Added new fields for a game collection
+	* input and textarea do have a maxlength now. JS used to display the remaining chars
 
 1.0 - Castle 20210106
 	* First usable version
diff --git a/TODO b/TODO
index b3ff757..3720f2c 100644
--- a/TODO
+++ b/TODO
@@ -1,5 +1,3 @@
-* input length check and display
-
 * stats overview page. amount of entries. file / cache and db storage. Version info and where to find it.
 * User and groupmanagement: Check where a user or group is used!
 * Better error handling and display while adding / update and delete
diff --git a/webclient/view/default/entry/field-text3-description.html b/webclient/view/default/entry/field-text3-description.html
index 065ab0f..b5def6a 100644
--- a/webclient/view/default/entry/field-text3-description.html
+++ b/webclient/view/default/entry/field-text3-description.html
@@ -1 +1 @@
-<p data-field-name="text3-description" class="uk-text-lead" data-field-id="<?php echo $field['identifier']; ?>"><?php echo Summoner::ifset($field, 'value'); ?></p>
+<p data-field-name="text3-description" class="uk-text-lead" data-field-id="<?php echo $field['identifier']; ?>"><?php echo nl2br(Summoner::ifset($field, 'value')); ?></p>
diff --git a/webclient/view/default/entry/field-textarea-content.html b/webclient/view/default/entry/field-textarea-content.html
index 6e5e340..75e8432 100644
--- a/webclient/view/default/entry/field-textarea-content.html
+++ b/webclient/view/default/entry/field-textarea-content.html
@@ -1 +1 @@
-<p data-field-name="textarea-content" data-field-id="<?php echo $field['identifier']; ?>" class="uk-dropcap"><?php echo Summoner::ifset($field, 'value'); ?></p>
+<p data-field-name="textarea-content" data-field-id="<?php echo $field['identifier']; ?>" class="uk-dropcap"><?php echo nl2br(Summoner::ifset($field, 'value')); ?></p>
diff --git a/webclient/view/default/entry/field-textarea.html b/webclient/view/default/entry/field-textarea.html
index 7cd22c2..49638c4 100644
--- a/webclient/view/default/entry/field-textarea.html
+++ b/webclient/view/default/entry/field-textarea.html
@@ -1 +1 @@
-<p data-field-name="textarea" data-field-id="<?php echo $field['identifier']; ?>"><span class="uk-text-muted"><?php echo $field['displayname']; ?>:</span> <?php echo Summoner::ifset($field, 'value'); ?></p>
+<p data-field-name="textarea" data-field-id="<?php echo $field['identifier']; ?>"><span class="uk-text-muted"><?php echo $field['displayname']; ?>:</span> <?php echo nl2br(Summoner::ifset($field, 'value')); ?></p>
diff --git a/webclient/view/default/manageentry/field-number.html b/webclient/view/default/manageentry/field-number.html
index 1148a10..306f0e6 100644
--- a/webclient/view/default/manageentry/field-number.html
+++ b/webclient/view/default/manageentry/field-number.html
@@ -1,7 +1,8 @@
 <div class="uk-margin">
 	<label class="uk-form-label" for="<?php echo $field['identifier']; ?>"><?php echo $field['displayname']; ?></label>
 	<div class="uk-form-controls">
-		<input class="uk-input" id="<?php echo $field['identifier']; ?>" type="number" autocomplete="off"
+		<input class="uk-input" id="<?php echo $field['identifier']; ?>" type="number"
+		       autocomplete="off" maxlength="10"
 		       name="fdata[<?php echo $field['identifier']; ?>]"
 		       value="<?php echo Summoner::ifset($TemplateData['editData'], $field['identifier']); ?>"
 		>
diff --git a/webclient/view/default/manageentry/field-text.html b/webclient/view/default/manageentry/field-text.html
index 0c91894..da37bd5 100644
--- a/webclient/view/default/manageentry/field-text.html
+++ b/webclient/view/default/manageentry/field-text.html
@@ -4,7 +4,9 @@
 		<input class="uk-input" id="<?php echo $field['identifier']; ?>" type="text" autocomplete="off"
 		   name="fdata[<?php echo $field['identifier']; ?>]"
 		   value="<?php echo Summoner::ifset($TemplateData['editData'], $field['identifier']); ?>"
+	       maxlength="128"
 		>
+		<small id="<?php echo $field['identifier']; ?>_counter" class="uk-float-right"><?php echo 128-strlen(Summoner::ifset($TemplateData['editData'], $field['identifier'])); ?></small>
 		<?php if(Summoner::ifset($field,'bulkedit')) { ?>
 		<select class="uk-select" name="fdata[additionalEditOption][<?php echo $field['identifier']; ?>]">
 			<option value="">Select bulk edit option</option>
@@ -15,3 +17,18 @@
 		<?php } ?>
 	</div>
 </div>
+
+<script type="text/javascript">
+	{
+	const inputElement = document.getElementById("<?php echo $field['identifier']; ?>");
+	const inputCounter = document.getElementById("<?php echo $field['identifier']; ?>_counter");
+
+	inputElement.addEventListener("input", event => {
+		const target = event.currentTarget;
+		const maxLength = target.getAttribute("maxlength");
+		const currentLength = target.value.length;
+
+		inputCounter.innerHTML = `${maxLength - currentLength}`;
+	});
+	}
+</script>
diff --git a/webclient/view/default/manageentry/field-text3.html b/webclient/view/default/manageentry/field-text3.html
index d7dcba1..268d615 100644
--- a/webclient/view/default/manageentry/field-text3.html
+++ b/webclient/view/default/manageentry/field-text3.html
@@ -2,8 +2,10 @@
 	<label class="uk-form-label" for="<?php echo $field['identifier']; ?>"><?php echo $field['displayname']; ?></label>
 	<div class="uk-form-controls">
 		<textarea class="uk-textarea" autocomplete="off"
-				  id="<?php echo $field['identifier']; ?>" rows="3"
+				  id="<?php echo $field['identifier']; ?>"
+				  rows="3" maxlength="255"
 				  name="fdata[<?php echo $field['identifier']; ?>]"><?php echo Summoner::ifset($TemplateData['editData'], $field['identifier']); ?></textarea>
+		<small id="<?php echo $field['identifier']; ?>_counter" class="uk-float-right"><?php echo 255-strlen(Summoner::ifset($TemplateData['editData'], $field['identifier'])); ?></small>
 		<?php if(Summoner::ifset($field,'bulkedit')) { ?>
 		<select class="uk-select" name="fdata[additionalEditOption][<?php echo $field['identifier']; ?>]">
 			<option value="">Select bulk edit option</option>
@@ -14,3 +16,18 @@
 		<?php } ?>
 	</div>
 </div>
+
+<script type="text/javascript">
+	{
+	const textarea = document.getElementById("<?php echo $field['identifier']; ?>");
+	const textareaCounter = document.getElementById("<?php echo $field['identifier']; ?>_counter");
+
+	textarea.addEventListener("input", event => {
+		const target = event.currentTarget;
+		const maxLength = target.getAttribute("maxlength");
+		const currentLength = target.value.length;
+
+		textareaCounter.innerHTML = `${maxLength - currentLength}`;
+	});
+	}
+</script>
diff --git a/webclient/view/default/manageentry/field-textarea.html b/webclient/view/default/manageentry/field-textarea.html
index 07189a4..afba135 100644
--- a/webclient/view/default/manageentry/field-textarea.html
+++ b/webclient/view/default/manageentry/field-textarea.html
@@ -2,7 +2,8 @@
 	<label class="uk-form-label" for="<?php echo $field['identifier']; ?>"><?php echo $field['displayname']; ?></label>
 	<div class="uk-form-controls">
 		<textarea class="uk-textarea" autocomplete="off"
-			id="<?php echo $field['identifier']; ?>" rows="6"
+			id="<?php echo $field['identifier']; ?>"
+	        rows="8"
 			name="fdata[<?php echo $field['identifier']; ?>]"><?php echo Summoner::ifset($TemplateData['editData'], $field['identifier']); ?></textarea>
 		<?php if(Summoner::ifset($field,'bulkedit')) { ?>
 		<select class="uk-select" name="fdata[additionalEditOption][<?php echo $field['identifier']; ?>]">
-- 
2.39.5