implemented button to make document positions optional

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

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>

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?",
@@ -279,6 +280,7 @@
   "oidc_Login"       : "Anmeldung mit OIDC",
   "old_password": "altes Passwort",
   "option": "Option",
+  "optional position": "optionaler Posten",
   "options": "Optionen",
   "organization": "Organisation",
   "other party": "Gegenseite",

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?",
@@ -279,6 +280,7 @@
   "oidc_Login"       : "Login via OIDC",
   "old_password": "old password",
   "option": "option",
+  "optional position": "optional position",
   "options": "options",
   "organization": "organization",
   "other party": "other party",

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;

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;

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;

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;

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;

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;