From 9e87894a7c08e13bbcbc652c4d97ec1befe1e2e2 Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Sun, 22 Dec 2024 18:08:48 +0100
Subject: [PATCH] UI fixes

---
 assets/static/css/main.css                |  4 +
 assets/templates/items/form.tmpl          | 10 +--
 assets/templates/partials/types-list.tmpl |  8 +-
 assets/templates/types/fields.tmpl        | 71 ++++-------------
 assets/templates/types/form.tmpl          | 95 ++++-------------------
 internal/funcs/funcs.go                   |  5 +-
 6 files changed, 45 insertions(+), 148 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index 95a94f9..17d211b 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -511,6 +511,10 @@ th.operations, td.operations {
   padding: 4px;
 }
 
+.sidebar-block .menu-item .button {
+  display: inline-block;
+}
+
 .sidebar-menu a {
   width: 100%;
   display: block;
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index 56a537a..9ed846c 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -65,11 +65,7 @@
     </div>
 
     <p>
-      <label class="switch">
-        <input id="on_dashboard" name="On_dashboard" type="checkbox" value="1" {{if eq .item.On_dashboard 1}} checked="checked" {{end}} />
-        <span class="slider round"></span>
-      </label>
-      <label for="on_dashboard" class="label-checkbox">On dashboard</label>
+      {{ widget_checkbox "On_dashboard" "On dashboard" "1" .item.On_dashboard }}
     </p>
   </div>
 
@@ -82,13 +78,13 @@
   {{ end }}
 
   <div class="tab" id="relationsSection" style="display: none">
-    <fieldset class="w3-round-medium" style="margin-top: 10px;">
+    <fieldset  style="margin-top: 10px;">
       <legend>Related items</legend>
       <div id="relations" style="margin-top: 8px;">
         {{ template "item:relations" . }}
       </div>
      </fieldset>
-    <fieldset class="w3-round-medium" style="margin-top: 8px;">
+    <fieldset style="margin-top: 8px;">
       <legend>Add items</legend>
       <div class="row">
           <div class="col l6 m9 s10">
diff --git a/assets/templates/partials/types-list.tmpl b/assets/templates/partials/types-list.tmpl
index df2a2d9..823694d 100644
--- a/assets/templates/partials/types-list.tmpl
+++ b/assets/templates/partials/types-list.tmpl
@@ -3,13 +3,11 @@
   {{ range .typesList }}
       <div class="menu-item">
         <div class="menu-item-action">
-          <a class="button w3-hover-metro-dark-blue w3-medium" hx-on:click="bm_sidebar_click('main-sidebar')" hx-get="/item/create/{{ .Id }}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square"></i></a>
+            <a class="button" hx-on:click="bm_sidebar_click('main-sidebar')" hx-get="/item/create/{{ .Id }}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square"></i></a>
         </div>
         <div class="menu-item-title">
-            <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/items/type/{{.Id}}" hx-target="#page-content" hx-push-url="true" href="/items/type/{{.Id}}" hx-on:click="bm_sidebar_click('main-sidebar')">
-            <i class="{{.Icon}}"></i> {{.Title}}
-        </a>
-      </div>
+            <a class="button" hx-get="/items/type/{{.Id}}" hx-target="#page-content" hx-push-url="true" href="/items/type/{{.Id}}" hx-on:click="bm_sidebar_click('main-sidebar')"><i class="{{.Icon}}"></i> {{.Title}}</a>
+        </div>
       </div>
     {{ end }}
   </div>
diff --git a/assets/templates/types/fields.tmpl b/assets/templates/types/fields.tmpl
index 5379641..61d2ad6 100644
--- a/assets/templates/types/fields.tmpl
+++ b/assets/templates/types/fields.tmpl
@@ -1,83 +1,46 @@
 {{define "types:fields"}}
 {{ range .fields }}
-<div class="w3-card" style="padding: 10px; margin-top: 10px">
+<div class="card" style="padding: 10px; margin-top: 10px">
   <div id="Field-{{.Type_field_id}}">
-    <div class="w3-row">
-      <div class="w3-half">
-        {{ widget_select (print "Fields-"  .Type_field_id "-Widget_id") "Widget" .Widget_id $.widgets `class=" w3-border"` }}
+    <div class="row">
+      <div class="col half">
+        {{ widget_select (print "Fields-"  .Type_field_id "-Widget_id") "Widget" .Widget_id $.widgets `` }}
       </div>
-      <div class="w3-half">
+      <div class="half">
         <label for="Fields-{{.Type_field_id}}-Title">Title</label>
         <input type="text" id="Fields-{{.Type_field_id}}-Title" name="Fields-{{.Type_field_id}}-Title" value="{{.Title}}"/>
       </div>
     </div>
 
-    <div class="w3-row">
-      <div class="w3-half">
+    <div class="row">
+      <div class="col half">
         <label for="Fields-{{.Type_field_id}}-Valid_values">Valid values</label>
         <input type="text" id="Fields-{{.Type_field_id}}-Valid_values" name="Fields-{{.Type_field_id}}-Valid_values" value="{{.Valid_values}}"/>
       </div>
-      <div class="w3-half">
+      <div class="col half">
         {{ widget_select (print "Fields-"  .Type_field_id "-Ui_section") "Section" .Ui_section $.uisections `class=" w3-border"` }}
       </div>
     </div>
-    <div class="w3-row">
+    <div class="row">
         <p>
-          <input id="Fields-{{.Type_field_id}}-Show_on_list" name="Fields-{{.Type_field_id}}-Show_on_list" type="checkbox" value="1"{{if eq .Show_on_list 1 }}checked="checked"{{end}}/>
-          <label for="Fields-{{.Type_field_id}}-Show_on_list">Show on list</label>
+          {{ widget_checkbox "Fields-{{.Type_field_id}}-Show_on_list" "Show on list" "1" .Show_on_list }}
         </p>
         <p>
-          <input
-            id="Fields-{{.Type_field_id}}-Show_on_view"
-            name="Fields-{{.Type_field_id}}-Show_on_view"
-            class=""
-            type="checkbox"
-            value="1"
-            {{if eq .Show_on_view 1 }}
-            checked="checked"
-            {{end}}
-          />
-          <label for="Fields-{{.Type_field_id}}-Show_on_view"
-            >Show on view</label
-          >
+          {{ widget_checkbox "Fields-{{.Type_field_id}}-Show_on_view" "Show on view" "1" .Show_on_view }}
         </p>
         <p>
-          <input
-            id="Fields-{{.Type_field_id}}-Is_multiple"
-            name="Fields-{{.Type_field_id}}-Is_multiple"
-            class=""
-            type="checkbox"
-            value="1"
-            {{if eq .Is_multiple 1 }}
-            checked="checked"
-            {{end}}
-          />
-          <label for="Fields-{{.Type_field_id}}-Is_multiple"
-            >Multiple</label
-          >
-        </p>    
+          {{ widget_checkbox "Fields-{{.Type_field_id}}-Is_multiple" "Multiple" "1" .Is_multiple }}
+        </p>
     </div>
-    <input
-      type="hidden"
-      id="Fields-{{.Type_field_id}}-ToRemove"
-      name="Fields-{{.Type_field_id}}-ToRemove"
-      value=""
-    />
+    <input type="hidden" id="Fields-{{.Type_field_id}}-ToRemove" name="Fields-{{.Type_field_id}}-ToRemove" value=""/>
   </div>
-  <div class="w3-bar">
-    <button
-      id="Delete-{{.Type_field_id}}"
-      class="w3-right w3-btn w3-metro-dark-red w3-round-large"
-      type="button"
+  <div class="sbar">
+    <button id="Delete-{{.Type_field_id}}" type="button" class="delete"
       _="on click set {value: '1'} on #Fields-{{.Type_field_id}}-ToRemove then hide me then show #Undelete-{{.Type_field_id}} then add .w3-opacity-max to #Field-{{.Type_field_id}}"
     >
       <i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span>
     </button>
-    <button
-      id="Undelete-{{.Type_field_id}}"
-      style="margin-right: 5px; display: none"
-      class="w3-right w3-btn w3-metro-blue w3-round-large"
-      type="button"
+    <button id="Undelete-{{.Type_field_id}}" style="margin-right: 5px;" hidden type="button" class="delete"
       _="on click set {value: ''} on #Fields-{{.Type_field_id}}-ToRemove then hide me then show #Delete-{{.Type_field_id}} then remove .w3-opacity-max from #Field-{{.Type_field_id}}">
       <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span>
     </button>
diff --git a/assets/templates/types/form.tmpl b/assets/templates/types/form.tmpl
index 518cf90..ca550c1 100644
--- a/assets/templates/types/form.tmpl
+++ b/assets/templates/types/form.tmpl
@@ -1,52 +1,24 @@
 {{ define "page:content" }}
-<form
-  method="POST"
-  hx-post="{{.formAction}}"
-  hx-target="{{.formTarget}}"
-  autocomplete="off"
-  style="margin-bottom: 10px;"
->
-  <div class="w3-container page-container">
-  <div class="tab-bar w3-bar w3-light-gray">
-    <a
-      class="active tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
-      onclick="bm_open_tab(this, 'tab-button', 'tab', 'general')"
-    >
-      General
-    </a>
-    <a
-      class="tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
-      onclick="bm_open_tab(this, 'tab-button', 'tab', 'fields')"
-    >
-      Fields
-    </a>
+<form method="POST" hx-post="{{.formAction}}" hx-target="{{.formTarget}}" autocomplete="off" style="margin-bottom: 10px;">
+  <div class="page-container">
+  <div class="tab-bar">
+    <a class="active tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'general')">General</a>
+    <a class="tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'fields')">Fields</a>
   </div>
 
   <div class="tab" id="general" style="display: block">
-    <div class="w3-row">
-      <div class="w3-half">
+    <div class="row">
+      <div class="half">
         <p>
           <label for="type-title">Title</label>
-          <input
-            name="Title"
-            class=" w3-border"
-            id="type-title"
-            type="text"
-            value="{{.type.Title}}"
-          />
+          <input name="Title" id="type-title" type="text" value="{{.type.Title}}"/>
         </p>
         <p>
           <label for="type-icon">Icon</label>
-          <input
-            name="Icon"
-            class=" w3-border"
-            id="type-icon"
-            type="text"
-            value="{{.type.Icon}}"
-          />
+          <input name="Icon" id="type-icon" type="text" value="{{.type.Icon}}"/>
         </p>
       </div>
-      <div class="w3-half">
+      <div class="half">
         <p>
         {{ widget_checkboxes "Notebooks" "Notebooks" .type.Notebooks .notebooks `class=""` }}
         </p>
@@ -55,46 +27,15 @@
 
     <p>
       <label for="type-description">Description</label>
-      <textarea
-        name="Description"
-        class=" w3-border"
-        id="type-description"
-        type="text"
-        rows="5"
-        >{{.type.Description}}</textarea
-      >
+      <textarea name="Description" id="type-description" rows="5">{{.type.Description}}</textarea>
     </p>
 
     <p>
-      <label class="switch">
-        <input
-        id="show_summary"
-        class=""
-        name="Show_summary"
-        type="checkbox"
-        value="1"
-        {{if eq .type.Show_summary 1}}
-        checked="checked"
-        {{end}}
-      />
-        <span class="slider round"></span>
-      </label><label for="show_summary" class="label-checkbox">Show summary</label>
+      {{ widget_checkbox "Show_summary" "Show summary" "1" .type.Show_summary }}
     </p>
 
     <p>
-      <label class="switch">
-        <input
-        id="show_description"
-        class=""
-        name="Show_description"
-        type="checkbox"
-        value="1"
-        {{if eq .type.Show_description 1}}
-        checked="checked"
-        {{end}}
-      />
-        <span class="slider round"></span>
-      </label><label for="show_description" class="label-checkbox">Show description</label>
+      {{ widget_checkbox "Show_description" "Show description" "1" .type.Show_description }}
     </p>
   </div>
 
@@ -103,15 +44,7 @@
       {{ template "types:fields" (map "fields" .type.Fields "widgets" $.widgets "uisections" $.uisections)}}
     </div>
       <div class="w3-bar" style="margin-top: 10px;">
-        <a
-          class="w3-right w3-btn w3-metro-dark-blue w3-round-large"
-          hx-get="/type/field-new"
-          hx-target="#fields-list"
-          hx-swap="beforeend"
-          href="#"
-          hx-vals="js:{counter: document.getElementById(&quot;fields-list&quot;).childElementCount + 1}"
-          ><i class="bi bi-file-plus" title="Add field"></i><span class="hide-small"> Add field</span></a
-        >
+        <a class="button main" hx-get="/type/field-new" hx-target="#fields-list" hx-swap="beforeend" href="#" hx-vals="js:{counter: document.getElementById(&quot;fields-list&quot;).childElementCount + 1}"><i class="bi bi-file-plus" title="Add field"></i><span class="hide-small"> Add field</span></a>
       </div>
   </div>
 
diff --git a/internal/funcs/funcs.go b/internal/funcs/funcs.go
index b35c738..73d59e4 100644
--- a/internal/funcs/funcs.go
+++ b/internal/funcs/funcs.go
@@ -401,6 +401,9 @@ func widget_checkbox(name string, label string, value string, value_assigned any
 	var value_assigned_str string = ""
 
 	switch v := value_assigned.(type) {
+	case int:
+
+		value_assigned_str = strconv.Itoa(v)
 	case int64:
 
 		value_assigned_str = strconv.FormatInt(v, 10)
@@ -414,7 +417,7 @@ func widget_checkbox(name string, label string, value string, value_assigned any
 
 	var o string = `<label class="switch">`
 	o = o + fmt.Sprintf(`<input id="%v" name="%v" type="checkbox" value="%v" %v />`, name, name, value, checked)
-	o = o + fmt.Sprintf(`<span class="slider round"></span></label><label for=%v" class="label-checkbox">%v</label>`, name, label)
+	o = o + fmt.Sprintf(`<span class="slider round"></span></label><label for="%v" class="label-checkbox">%v</label>`, name, label)
 	return template.HTML(o)
 }