From 1a7992482161320f5f63b3e03a54ef690cb725e0 Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Tue, 21 Jul 2026 20:41:57 +0200
Subject: [PATCH] implemented button to make document positions optional

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
---
 frontend/src/routes/document/Position.svelte       | 8 +++++++-
 translations/src/main/resources/de.json            | 2 ++
 translations/src/main/resources/en.json            | 2 ++
 web/src/main/resources/web/css/bloodshed-color.css | 8 ++++++++
 web/src/main/resources/web/css/bloodshed.css       | 9 +++++++++
 web/src/main/resources/web/css/default-color.css   | 8 ++++++++
 web/src/main/resources/web/css/default.css         | 9 +++++++++
 web/src/main/resources/web/css/winter-color.css    | 9 +++++++++
 web/src/main/resources/web/css/winter.css          | 9 +++++++++
 9 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/document/Position.svelte b/frontend/src/routes/document/Position.svelte
index e746422f..b195b0e3 100644
--- a/frontend/src/routes/document/Position.svelte
+++ b/frontend/src/routes/document/Position.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
+    import { t }             from '../../translations.svelte';
 
     import LineEditor        from '../../Components/LineEditor.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
@@ -23,13 +24,17 @@
     function movedown(){
         movePos(pos.number,1);
     }
+
+    async function toggleOptional(ev){
+        const ok = await submit(`${prefix}.optional`,!pos.optional);
+        if (ok) pos.optional = !pos.optional;
+    }
 </script>
 
 <style>
     .move{
         vertical-align: middle;
     }
-
     tr > *:nth-child(1){
         text-align: right;
     }
@@ -66,6 +71,7 @@
             <span onclick={moveup}>⏫</span>
             {/if}
             <span onclick={() => drop(pos.number)}>❌</span>
+            <span class="symbol" onclick={toggleOptional} title={t(pos.optional?'optional position':'fixed position')}>{pos.optional?'':''}</span>
             <span onclick={movedown}>⏬</span>
             {/if}
         </td>
diff --git a/translations/src/main/resources/de.json b/translations/src/main/resources/de.json
index 60691d5d..dfb2cefa 100644
--- a/translations/src/main/resources/de.json
+++ b/translations/src/main/resources/de.json
@@ -167,6 +167,7 @@
   "filter": "Filter",
   "filter by tags": "Nach Tags filtern",
   "first_transaction": "erste Transaktion",
+  "fixed position": "fester Posten",
   "footer": "Fuß-Text",
   "foreign_id": "externe Kennung",
   "forgot_pass"  : "Password vergessen?",
@@ -280,6 +281,7 @@
   "old_password": "altes Passwort",
   "offer": "Angebot",
   "option": "Option",
+  "optional position": "optionaler Posten",
   "options": "Optionen",
   "organization": "Organisation",
   "other party": "Gegenseite",
diff --git a/translations/src/main/resources/en.json b/translations/src/main/resources/en.json
index 2f6a7493..1f7279ec 100644
--- a/translations/src/main/resources/en.json
+++ b/translations/src/main/resources/en.json
@@ -167,6 +167,7 @@
   "filter": "filter",
   "filter by tags": "filter by tags",
   "first_transaction": "first transaction",
+  "fixed position": "fixed position",
   "footer": "footer",
   "foreign_id": "external ID",
   "forgot_pass"  : "forgot password?",
@@ -280,6 +281,7 @@
   "old_password": "old password",
   "offer": "offer",
   "option": "option",
+  "optional position": "optional position",
   "options": "options",
   "organization": "organization",
   "other party": "other party",
diff --git a/web/src/main/resources/web/css/bloodshed-color.css b/web/src/main/resources/web/css/bloodshed-color.css
index be2fc8a1..bffd5a34 100644
--- a/web/src/main/resources/web/css/bloodshed-color.css
+++ b/web/src/main/resources/web/css/bloodshed-color.css
@@ -341,6 +341,14 @@ tr:hover .taglist .tag button {
 	color: yellow;
 }
 
+.positions tr:nth-child(2n){
+	border-bottom-color: red;
+}
+
+.positions tbody tr:last-child{
+	border-top-color: red;
+}
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: black;
diff --git a/web/src/main/resources/web/css/bloodshed.css b/web/src/main/resources/web/css/bloodshed.css
index ecdb96ef..aee5975f 100644
--- a/web/src/main/resources/web/css/bloodshed.css
+++ b/web/src/main/resources/web/css/bloodshed.css
@@ -390,6 +390,7 @@ span.timetracking {
 
 table{
     min-width: 30vw;
+    border-collapse: collapse;
 }
 
 .start_end{
@@ -485,6 +486,14 @@ select.autocomplete{
 	width: calc(100% - 50px);
 }
 
+.positions tr:nth-child(2n){
+	border-bottom: 1px solid;
+}
+
+.positions tbody tr:last-child{
+	border-top: 3px solid;
+}
+
 @media screen and (min-width: 900px) {
 	#app nav > button.symbol{
 		display: none;
diff --git a/web/src/main/resources/web/css/default-color.css b/web/src/main/resources/web/css/default-color.css
index 9e9551d2..5331e0a2 100644
--- a/web/src/main/resources/web/css/default-color.css
+++ b/web/src/main/resources/web/css/default-color.css
@@ -337,6 +337,14 @@ code,
 	color: black;
 }
 
+.positions tr:nth-child(2n){
+	border-bottom-color: gold;
+}
+
+.positions tbody tr:last-child{
+	border-top-color: gold;
+}
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: black;
diff --git a/web/src/main/resources/web/css/default.css b/web/src/main/resources/web/css/default.css
index 8086f099..2c8bcc52 100644
--- a/web/src/main/resources/web/css/default.css
+++ b/web/src/main/resources/web/css/default.css
@@ -484,6 +484,7 @@ span.timetracking {
 
 table{
     min-width: 30vw;
+    border-collapse: collapse;
 }
 
 .start_end{
@@ -589,6 +590,14 @@ select.autocomplete{
 	width: calc(100% - 50px);
 }
 
+.positions tr:nth-child(2n){
+	border-bottom: 1px solid;
+}
+
+.positions tbody tr:last-child{
+	border-top: 3px solid;
+}
+
 @media screen and (min-width: 900px) {
 	#app nav > button.symbol{
 		display: none;
diff --git a/web/src/main/resources/web/css/winter-color.css b/web/src/main/resources/web/css/winter-color.css
index 40056b25..5f39db02 100644
--- a/web/src/main/resources/web/css/winter-color.css
+++ b/web/src/main/resources/web/css/winter-color.css
@@ -288,6 +288,15 @@ tr:hover .taglist .tag button {
 	background: cyan;
 }
 
+.positions tr:nth-child(2n){
+	border-bottom-color: blue;
+}
+
+.positions tbody tr:last-child{
+	border-top-color: blue;
+}
+
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: white;
diff --git a/web/src/main/resources/web/css/winter.css b/web/src/main/resources/web/css/winter.css
index 6ecba7df..d26d1af4 100644
--- a/web/src/main/resources/web/css/winter.css
+++ b/web/src/main/resources/web/css/winter.css
@@ -483,6 +483,7 @@ span.timetracking {
 
 table{
     min-width: 30vw;
+    border-collapse: collapse;
 }
 
 .start_end{
@@ -578,6 +579,14 @@ select.autocomplete{
 	width: calc(100% - 50px);
 }
 
+.positions tr:nth-child(2n){
+	border-bottom: 1px solid;
+}
+
+.positions tbody tr:last-child{
+	border-top: 3px solid;
+}
+
 @media screen and (min-width: 900px) {
 	#app nav > button.symbol{
 		display: none;