masih forms

tangsel/base/static/admin/css/theme.css

@@ -16197,4 +16197,16 @@ html[dir=rtl] .toast-onload {
     [data-layout=vertical][data-header-position=fixed] .app-header {
         width: calc(100% - 270px)
     }
+}
+
+.form-control-static {
+    display: block;
+    height: 36px;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    padding: calc(var(--spacing) * 2.5);
+    border-color: var(--color-gray-200);
+    border-radius: var(--radius-md);
+    background-color: var(--color-gray-200);
+    --tw-shadow: 0 0 #0000;
 }
\ No newline at end of file

tangsel/base/static/admin/js/dashboards/dashboard.js

+document.addEventListener("DOMContentLoaded", function () {
+  setTimeout(() => {
+    if (document.getElementById("dismiss-toast")) {
+      document.getElementById("dismiss-toast").classList.add("hs-removing");
+      document.getElementById("dismiss-toast").classList.remove("show-toast");
+      setTimeout(() => {
+        document.getElementById("dismiss-toast").remove();
+      }, 300);
+    } else {
+    }
+  }, 5000);
+
+  setTimeout(() => {
+    document.getElementById("dismiss-toast").classList.add("show-toast");
+  }, 1000);
+});

tangsel/base/widgets/templates/captcha.pt

-<span tal:define="name name|field.name;
+<img
+  class="block items-center justify-center mb-1 border-1 border-gray-200 rounded-md"
+  src="${cstruct}"
+  style="height: 82px !important"
+/>
+<span class="block mb-4 font-light text-xs text-gray-400"
+  ><em
+    >Masukkan text yang ditampilkan di atas pada input Captcha di bawah ini</em
+  ></span
+>
+<block
+  tal:define="name name|field.name;
         css_class css_class|field.widget.css_class;
         oid oid|field.oid;
         style style|field.widget.style;
-        " tal:omit-tag="">
-    <img style="height:30px; width:auto; margin-bottom:5px;" src="${cstruct}">
-    <input type="text" name="${name}" value="" tal:attributes="class string: form-control ${css_class or ''};
-            style style;
-            attributes|field.widget.attributes|{};" id="${oid}" />
+        "
+  tal:omit-tag=""
+>
+  <div class="relative mb-2">
+    <input
+      type="text"
+      name="${name}"
+      value=""
+      id="${oid}"
+      placeholder="Captcha"
+      class="peer p-2.5 block w-full border-gray-200 rounded-md text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 ${css_class}"
+    />
+    <label
+      for="${oid}"
+      class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
+      id="req-${oid}"
+      >Captcha
+    </label>
     <script lang="javascript">
-        // Convert input to uppercase
-        deform.addCallback(
-            '${oid}',
-            function (oid) {
-                $("#" + oid).on('input', function (evt) {
-                    $(this).val(function (_, val) {
-                        return val.toUpperCase();
-                    });
-                });
-            });
+      // Convert input to uppercase
+      deform.addCallback(
+          '${oid}',
+          function (oid) {
+              $("#" + oid).on('input', function (evt) {
+                  $(this).val(function (_, val) {
+                      return val.toUpperCase();
+                  });
+              });
+          });
     </script>
-
-</span>
\ No newline at end of file
+  </div>
+</block>

tangsel/base/widgets/templates/file_upload.pt

@@ -7,7 +7,8 @@
     delete cstruct.get('delete')|'';
     maxsize field.widget.size|5242880;
     img ['jpg', 'jpeg', 'gif', 'png', 'svg', 'eps', 'psd'];
-    video ['avi', 'mov', 'mp4']
+    video ['avi', 'mov', 'mp4'];
+    title title|field.title;
     ">
   ${field.start_mapping()}
   <div class="thumbnail" tal:condition="ext in img or ext in video or ext=='pdf'">
@@ -28,10 +29,19 @@
   <a tal:condition="ext" class="label label-default" href="${preview_url}" target="_blank" id="a-preview-${oid}"><i
       class="fa fa-search"></i> View</a>
 
-  <input type="file" name="upload" id="${oid}" tal:attributes="style style;
-          accept accept|field.widget.accept;
-          data-filename fname;
-          attributes|field.widget.attributes|{};" />
+<div class="flex items-center justify-center w-full">
+    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-80 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+            <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+            </svg>
+            <p class="font-bold mb-2">Unggah ${title}</p>
+            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Klik untuk mengunggah</span> atau seret dan jatuhkan file</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">${img}</p>
+        </div>
+        <input id="dropzone-file" type="file" class="hidden" />
+    </label>
+</div> 
   <input tal:define="uid cstruct.get('uid')" tal:condition="uid" type="hidden" name="uid" value="${uid}" />
   ${field.end_mapping()}
   <script type="text/javascript">

tangsel/base/widgets/templates/form.pt

 <form
-  tal:define="
+  tal:define="style style|field.widget.style;
+        css_class css_class|string:${field.widget.css_class or field.css_class or ''};
         item_template item_template|field.widget.item_template;
         autocomplete autocomplete|field.autocomplete;
         title title|field.title;
@@ -12,6 +13,8 @@
         action action|field.action or None;
         method method|field.method;"
   tal:attributes="autocomplete autocomplete;
+                style style;
+                class css_class;
         action action;
         attributes|field.widget.attributes|{};"
   id="${formid}"
@@ -25,57 +28,66 @@
   <div class="grid grid-cols-12 gap-y-6 md:gap-6">
     <input type="hidden" name="_charset_" />
     <input type="hidden" name="__formid__" value="${formid}" />
-    <div class="alert alert-danger" tal:condition="field.error">
-      <div class="error-msg-lbl" i18n:translate="">
-        There was a problem with your submission
-      </div>
-      <div class="error-msg-detail" i18n:translate="">
-        Errors have been highlighted below
+    <div
+      tal:condition="field.error"
+      id="dismiss-toast"
+      class="toast-onload bg-lighterror border border-lighterror text-sm text-erroremphasis rounded-md dark:bg-darkerror dark:border-darkerror dark:text-error hs-removing:translate-x-3 hs-removing:opacity-0 transition duration-300"
+      role="alert"
+    >
+      <div class="flex gap-2 p-3">
+        <i class="ti ti-alert-circle text-red text-3xl"></i>
+        <div>
+          <span class="font-semibold"
+            >Terdapat kesalahan pada pengisian form!
+          </span>
+          <p class="text-xs text-red">${field.errormsg}</p>
+        </div>
+        <div class="ms-auto">
+          <button type="button" data-hs-remove-element="#dismiss-toast">
+            <i class="ti ti-x text-lg text-red opacity-70 leading-none"></i>
+          </button>
+        </div>
       </div>
-      <p class="error-msg">${field.errormsg}</p>
     </div>
-    <p class="section first" tal:condition="description">${description}</p>
     <div
       tal:repeat="child field"
       tal:replace="structure child.render_template(item_template)"
     />
 
-    <div class="row">
-      <div class="form-group deform-form-buttons">
-        <tal:loop tal:repeat="button buttons">
-          <button
-            tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';"
-            tal:attributes="disabled button.disabled if button.disabled else None;
+    <div class="col-span-12 md:col-span-4 md:col-start-2 gap-6">
+      <tal:loop tal:repeat="button buttons">
+        <button
+          tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default'; btn_class button.name == 'cancel' and 'btn-light-error' or '';"
+          tal:attributes="disabled button.disabled if button.disabled else None;
                                     attributes|button.attributes|{};"
-            id="${formid+button.name}"
-            name="${button.name}"
-            type="${button.type}"
-            class="btn ${button.css_class or btn_disposition}"
-            value="${button.value}"
-            tal:condition="button.type != 'link'"
-          >
-            <span
-              tal:condition="button.icon"
-              class="glyphicon glyphicon-${button.icon}"
-            ></span>
-            ${button.title}
-          </button>
-          <a
-            tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
+          id="${formid+button.name}"
+          name="${button.name}"
+          type="${button.type}"
+          class="btn btn-md me-3 ${btn_class}"
+          value="${button.value}"
+          tal:condition="button.type != 'link'"
+        >
+          <span
+            tal:condition="button.icon"
+            class="glyphicon glyphicon-${button.icon}"
+          ></span>
+          ${button.title}
+        </button>
+        <a
+          tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
                                     btn_href button.value|''"
-            class="btn ${button.css_class or btn_disposition}"
-            id="${field.formid + button.name}"
-            href="${btn_href}"
-            tal:condition="button.type == 'link'"
-          >
-            <span
-              tal:condition="button.icon"
-              class="glyphicon glyphicon-${button.icon}"
-            ></span>
-            ${button.title}
-          </a>
-        </tal:loop>
-      </div>
+          class="btn ${button.css_class or btn_disposition}"
+          id="${field.formid + button.name}"
+          href="${btn_href}"
+          tal:condition="button.type == 'link'"
+        >
+          <span
+            tal:condition="button.icon"
+            class="glyphicon glyphicon-${button.icon}"
+          ></span>
+          ${button.title}
+        </a>
+      </tal:loop>
     </div>
   </div>
 

tangsel/base/widgets/templates/mapping_item.pt

-<div
+<block
   tal:define="error_class error_class|field.widget.error_class;
                  description description|field.description;
                  title title|field.title;
@@ -14,24 +14,16 @@
   tal:omit-tag="structural"
   i18n:domain="deform"
 >
-  <!-- <div class="row">
-    <div class="col-md-12 col-lg-12 col-sm-12"> -->
-  <div tal:condition="not field.children" class="relative mb-2">
+  <span tal:condition="not field.children">
+    <span tal:replace="structure field.serialize(cstruct).strip()" />
+
     <div
-      tal:define="input_prepend field.widget.input_prepend | None;
-                   input_append field.widget.input_append  | None"
-      tal:omit-tag="not (input_prepend or input_append)"
+      tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
+      class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3"
     >
-      <span tal:condition="input_prepend">${input_prepend}</span>
-      <span tal:replace="structure field.serialize(cstruct).strip()" />
-      <span tal:condition="input_append">${input_append}</span>
-      <label
-        for="${oid}"
-        class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
-        tal:condition="not structural"
-        id="req-${oid}"
-        >${title}
-      </label>
+      <i
+        class="ti ti-alert-circle text-lg leading-tight font-medium text-error"
+      ></i>
     </div>
 
     <p
@@ -41,6 +33,7 @@
       tal:attributes="id repeat.msg.index==0 and errstr or
      ('%s-%s' % (errstr, repeat.msg.index))"
       tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
+      class="text-sm text-error mt-2"
     >
       ${msg}
     </p>
@@ -48,8 +41,9 @@
     <p tal:condition="field.description and not field.widget.hidden">
       ${field.description}
     </p>
-  </div>
-  <div tal:condition="field.children">
+  </span>
+
+  <span tal:condition="field.children">
     <div
       tal:define="input_prepend field.widget.input_prepend | None;
             input_append field.widget.input_append  | None"
@@ -74,7 +68,5 @@
     <p tal:condition="field.description and not field.widget.hidden">
       ${field.description}
     </p>
-  </div>
-</div>
-<!-- </div>
-</div> -->
+  </span>
+</block>

tangsel/base/widgets/templates/textinput.pt

@@ -9,15 +9,23 @@
         "
   tal:omit-tag=""
 >
-  <input
-    type="text"
-    id="${oid}"
-    class="peer p-2.5 block w-full border-gray-200 rounded-md text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2"
-    placeholder="${title}"
-  />
-  <script tal:condition="mask" type="text/javascript">
-    deform.addCallback("${oid}", function (oid) {
-      $("#" + oid).mask("${mask}", { placeholder: "${mask_placeholder}" });
-    });
-  </script>
+  <div class="relative mb-2">
+    <input
+      type="text"
+      id="${oid}"
+      class="peer p-2.5 block w-full border-gray-200 rounded-md text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 bg-slate-200"
+      placeholder="${title}"
+    />
+    <label
+      for="${oid}"
+      class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
+      id="req-${oid}"
+      >${title}
+    </label>
+    <script tal:condition="mask" type="text/javascript">
+      deform.addCallback("${oid}", function (oid) {
+        $("#" + oid).mask("${mask}", { placeholder: "${mask_placeholder}" });
+      });
+    </script>
+  </div>
 </div>

tangsel/detable/templates/detable.pt

-<div tal:define="style style|field.widget.style;
+<div
+  tal:define="style style|field.widget.style;
     css_class css_class|string:${field.widget.css_class or field.css_class or 'jarviswidget jarviswidget-color-blueLight'};
     item_template item_template|field.widget.item_template;
     title title|field.title;
@@ -27,10 +28,18 @@
     filter_scripts filter_scripts|field.filter_scripts;
     filter_form filter_form|field.filter_form;
     edit_buttons edit_buttons|field.edit_buttons;
-    " tal:attributes="style style; class css_class; attributes|field.widget.attributes|{};" i18n:domain="detable">
+    "
+  tal:attributes="style style; class css_class; attributes|field.widget.attributes|{};"
+  i18n:domain="detable"
+>
   <header role="heading" class="txt-color-grayDark">
     <h2 tal:condition="title"><i class="fa fa-fw fa-table"></i>${title}</h2>
-    <div class="alert alert-danger " role="alert" id="emptyID" style="opacity:0.7;display: none;">
+    <div
+      class="alert alert-danger"
+      role="alert"
+      id="emptyID"
+      style="opacity: 0.7; display: none"
+    >
       <strong>Pilih data terlebih dahulu!!</strong>
       <!--?      <button type="button" class="close" data-dismiss="alert" aria-label="Close">-->
       <!--?        <span aria-hidden="true">&times;</span>-->
@@ -55,9 +64,8 @@
             </div>
           </div> -->
           <script>
-
             $(document).ready(function () {
-              $(document).on("click", '.${tableid}checkAll', function () {
+              $(document).on("click", ".${tableid}checkAll", function () {
                 if (this.checked) {
                   $(".${tableid}_check").prop("checked", true);
                 } else {
@@ -67,21 +75,25 @@
             });
           </script>
         </div>
-        <table id="${tableid}" class="table table-bordered table-hover table-condensed dataTable no-footer">
+        <table
+          id="${tableid}"
+          class="table table-bordered table-hover table-condensed dataTable no-footer"
+        >
           <thead>
-            <tr>
+            <tr></tr>
             <tr>
               <tal:block tal:repeat="child field">
-
-                <tal:block tal:condition="python:not hasattr(child, 'visible') or getattr(child, 'visible')==True">
+                <tal:block
+                  tal:condition="python:not hasattr(child, 'visible') or getattr(child, 'visible')==True"
+                >
                   <th
-                    tal:condition="python:hasattr(child, 'action') and not getattr(child.condition)==False and False or True">
-                    ${child.title} </th>
-
+                    tal:condition="python:hasattr(child, 'action') and not getattr(child.condition)==False and False or True"
+                  >
+                    ${child.title}
+                  </th>
                 </tal:block>
               </tal:block>
             </tr>
-
           </thead>
           <tbody></tbody>
         </table>
@@ -146,9 +158,9 @@
       let ${tableid}Columns = ${ structure: columns };
 
       function render_checkbox(value) {
-        if (value === true) 
+        if (value === true)
           return '<i class="fas fa-check-square" aria-hidden="true">';
-        if (value === false) 
+        if (value === false)
           return '<i class="fas fa-minus-square" aria-hidden="true">';
         return value;
       }
@@ -169,7 +181,7 @@
             }
             return render_checkbox(false);
           }
-          //} 
+          //}
           //else if (${tableid}Columns[co].wg_select === true) {
           //  ${tableid}Columns[co].render = function (value) {
           //    if (value != null)
@@ -261,7 +273,7 @@
             });
         }
       });
-    
+
       let tb = tb_array.join(' ');
       $("div.toolbar").html(tb);
       $("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
@@ -322,7 +334,7 @@
                 splitted.length = splitted.length - 1;
                 col_id = splitted.join("-");
                 max_val = $("#" + col_id + '-max').val()
-              } 
+              }
               else {
                 max_val = this.value;
                 splitted.length = splitted.length - 1;
@@ -379,7 +391,7 @@
           if (value !== undefined && value != null)
           if ($(this).val() === value) $(this).attr("checked", true);
           else $(this).attr("checked", false);
-        } 
+        }
         else {
           value = localStorage.getItem(col_id);
           if (value !== undefined && value !== null)
@@ -393,4 +405,4 @@
       ${structure:filter_scripts}
     });
   </script>
-</div>
\ No newline at end of file
+</div>

tangsel/pbb/esppt/views/templates/form.pt

 <html metal:use-macro="load: ./base.pt">
-<div metal:fill-slot="content">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h3 class="panel-title"><i class="fa fa-fw fa-plus"></i>&nbsp;${request.title}</h3>
+  <div metal:fill-slot="content">
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <div tal:content="structure form"></div>
+      </div>
     </div>
-    <div class="panel-body">
-      <div tal:content="structure form"></div>
-    </div>
-
   </div>
-</div>
-<script metal:fill-slot="scripts">
-  $(document).ready(function () {
-    ${ structure: scripts }
-  });
-</script>
-
-</html>
\ No newline at end of file
+  <!-- <script
+    type="text/javascript"
+    src="${home}/static/admin/js/datatables/dataTables.tailwindcss.js"
+  ></script>
+  <script>
+    new DataTable("#example", {
+      scrollX: true,
+    });
+  </script> -->
+  <script metal:fill-slot="scripts">
+    $(document).ready(function () {
+      ${ structure: scripts }
+    });
+  </script>
+</html>

tangsel/pbb/esppt/views/templates/home.pt

@@ -3,7 +3,7 @@
     <div class="card bg-lightprimary dark:bg-darkprimary mb-0 overflow-hidden">
       <div class="card-body pb-12 pt-8">
         <div class="grid grid-cols-12">
-          <div class="lg:col-span-7 md:col-span-6 sm:col-span-12 col-span-12">
+          <div class="lg:col-span-8 md:col-span-6 sm:col-span-12 col-span-12">
             <div class="flex gap-3 items-center mb-7">
               <div class="rounded-full overflow-hidden">
                 <img
@@ -21,7 +21,7 @@
             </div>
             <div class="gap-6 items-center grid grid-cols-12">
               <div
-                class="pe-6 md:border-e md:border-[#adb0bb] md:border-opacity-10 dark:md:border-darkborder col-span-12 md:col-span-6 lg:col-span-7"
+                class="pe-6 md:border-e md:border-[#adb0bb] md:border-opacity-10 dark:md:border-darkborder col-span-12 md:col-span-6 lg:col-span-8"
               >
                 <h3 class="flex items-start mb-0 text-xl">Fitur Modul:</h3>
                 <ul class="list-group mt-4">
@@ -52,7 +52,7 @@
                 </ul>
               </div>
 
-              <div class="col-span-12 md:col-span-6 lg:col-span-5">
+              <div class="col-span-12 md:col-span-6 lg:col-span-4">
                 <div class="lg:col-span-4 md:col-span-6 col-span-12">
                   <a href="${home}/pbb/esppt/unduh/add">
                     <div class="card animate-card overflow-hidden">
@@ -74,7 +74,7 @@
               </div>
             </div>
           </div>
-          <div class="lg:col-span-5 md:col-span-6 sm:col-span-12 col-span-12">
+          <div class="lg:col-span-4 md:col-span-6 sm:col-span-12 col-span-12">
             <div
               class="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8"
             >

tangsel/pbb/esppt/views/unduh.py

@@ -91,7 +91,7 @@ class ListSchema(colander.Schema):
 
     idcard = colander.SchemaNode(
         FileData(),
-        widget=widget.FileUploadWidget(mem_tmp_store, css_class="col-span-12"),
+        widget=widget.FileUploadWidget(mem_tmp_store, css_class="col-span-12 md:col-start-2 md:col-span-5", no_label="true"),
         title="Identitas",
         validator=image_validator,
         visible=False
@@ -108,7 +108,7 @@ class AddSchema(ListSchema):
         request = kw.get("request")
         schema['captcha'] = colander.SchemaNode(
             colander.String(),
-            widget=widget_os.CaptchaWidget(
+            widget=widget_os.CaptchaWidget(css_class="col-span-12 md:col-span-5 ",
                 request=request,
                 url=request.static_url(BASE_CLASS.captcha_files)),
             oid="captcha", title="Captcha")

tangsel/pbb/monitoring/views/templates/mapping_item.pt

-<div tal:define="error_class error_class|field.widget.error_class;
+<div
+  tal:define="error_class error_class|field.widget.error_class;
     description description|field.description;
     field_title field_title|field.title;
     oid oid|field.oid;
@@ -8,78 +9,106 @@
     required required|field.required;
     field_readonly field_readonly|field.widget.readonly;
     form_readonly readonly|readonly"
-
-    class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
-    title="${description}"
-    id="item-${oid}"
-     tal:omit-tag="structural"
-     i18n:domain="deform">
+  class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
+  title="${description}"
+  id="item-${oid}"
+  tal:omit-tag="structural"
+  i18n:domain="deform"
+>
   <div class="row">
     <div class="col-md-12 col-lg-12 col-sm-12">
-      <label for="${oid}"
-             class="control-label col-sm-3 col-md-2 col-lg-2 ${required and 'required' or ''}"
-           tal:condition="not structural"
-             id="req-${oid}"
-      >${field_title}
+      <label
+        for="${oid}"
+        class="control-label col-sm-3 col-md-2 col-lg-2 ${required and 'required' or ''}"
+        tal:condition="not structural"
+        id="req-${oid}"
+        >${field_title}
       </label>
-      <div class="col-sm-9 col-md-10 col-lg-10" tal:condition="not field.children">
-        <div tal:define="input_prepend field.widget.input_prepend | None;
+      <div
+        class="col-sm-9 col-md-10 col-lg-10"
+        tal:condition="not field.children"
+      >
+        <div
+          tal:define="input_prepend field.widget.input_prepend | None;
             input_append field.widget.input_append  | None"
-             tal:omit-tag="not (input_prepend or input_append)"
-            class="input-group">
-          <span class="input-group-addon"
-               tal:condition="input_prepend">${input_prepend}</span>
-          <span tal:condition="python:readonly or field_readonly"
-               tal:replace="structure field.serialize(readonly=True).strip()"/>
-          <span tal:condition="python: not readonly and not field_readonly"
-               tal:replace="structure field.serialize().strip()"/>
-          <span class="input-group-addon"
-               tal:condition="input_append">${input_append}</span>
+          tal:omit-tag="not (input_prepend or input_append)"
+          class="input-group"
+        >
+          <span class="input-group-addon" tal:condition="input_prepend"
+            >${input_prepend}</span
+          >
+          <span
+            tal:condition="python:readonly or field_readonly"
+            tal:replace="structure field.serialize(readonly=True).strip()"
+          />
+          <span
+            tal:condition="python: not readonly and not field_readonly"
+            tal:replace="structure field.serialize().strip()"
+          />
+          <span class="input-group-addon" tal:condition="input_append"
+            >${input_append}</span
+          >
         </div>
 
-        <p class="help-block"
-             tal:define="errstr 'error-%s' % field.oid"
-             tal:repeat="msg field.error.messages()"
-             i18n:translate=""
-             tal:attributes="id repeat.msg.index==0 and errstr or
+        <p
+          class="help-block"
+          tal:define="errstr 'error-%s' % field.oid"
+          tal:repeat="msg field.error.messages()"
+          i18n:translate=""
+          tal:attributes="id repeat.msg.index==0 and errstr or
                 ('%s-%s' % (errstr, repeat.msg.index))"
-             tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
-            ${msg}
+          tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
+        >
+          ${msg}
         </p>
 
-        <p tal:condition="field.description and not field.widget.hidden"
-            class="help-block">
-            ${field.description}
+        <p
+          tal:condition="field.description and not field.widget.hidden"
+          class="help-block"
+        >
+          ${field.description}
         </p>
       </div>
       <div class="col-sm-12 col-md-12 col-lg-12" tal:condition="field.children">
-        <div tal:define="input_prepend field.widget.input_prepend | None;
+        <div
+          tal:define="input_prepend field.widget.input_prepend | None;
             input_append field.widget.input_append  | None"
-             tal:omit-tag="not (input_prepend or input_append)"
-            class="input-group">
-     <span class="input-group-addon"
-          tal:condition="input_prepend">${input_prepend}</span>
-          <span tal:condition="python:readonly or field_readonly"
-               tal:replace="structure field.serialize(readonly=True).strip()"/>
-          <span tal:condition="python: not readonly and not field_readonly"
-               tal:replace="structure field.serialize().strip()"/>
-          <span class="input-group-addon"
-               tal:condition="input_append">${input_append}</span>
+          tal:omit-tag="not (input_prepend or input_append)"
+          class="input-group"
+        >
+          <span class="input-group-addon" tal:condition="input_prepend"
+            >${input_prepend}</span
+          >
+          <span
+            tal:condition="python:readonly or field_readonly"
+            tal:replace="structure field.serialize(readonly=True).strip()"
+          />
+          <span
+            tal:condition="python: not readonly and not field_readonly"
+            tal:replace="structure field.serialize().strip()"
+          />
+          <span class="input-group-addon" tal:condition="input_append"
+            >${input_append}</span
+          >
         </div>
 
-        <p class="help-block"
-             tal:define="errstr 'error-%s' % field.oid"
-             tal:repeat="msg field.error.messages()"
-             i18n:translate=""
-             tal:attributes="id repeat.msg.index==0 and errstr or
+        <p
+          class="help-block"
+          tal:define="errstr 'error-%s' % field.oid"
+          tal:repeat="msg field.error.messages()"
+          i18n:translate=""
+          tal:attributes="id repeat.msg.index==0 and errstr or
                 ('%s-%s' % (errstr, repeat.msg.index))"
-             tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
-            ${msg}
+          tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'"
+        >
+          ${msg}
         </p>
 
-        <p tal:condition="field.description and not field.widget.hidden"
-            class="help-block">
-            ${field.description}
+        <p
+          tal:condition="field.description and not field.widget.hidden"
+          class="help-block"
+        >
+          ${field.description}
         </p>
       </div>
     </div>