github.com/navikt/knorten@v0.0.0-20240419132333-1333f46ed8b6/templates/admin/chart.tmpl (about)

     1  {{ define "admin/chart" }}
     2      {{ template "head" . }}
     3      <article class="bg-white rounded-md p-4 flex flex-col gap-2">
     4          <h2>Rediger globale {{ .chart }} verdier</h2>
     5          {{ with .errors }}
     6              {{ . }}
     7          {{ end }}
     8          <form action="" method="POST">
     9              <fieldset>
    10                  <div id="values"></div>
    11                  <div>
    12                      <button type="button"
    13                              class="mb-4 navds-button navds-button--secondary navds-button--small"
    14                              onClick="addNewElement()"
    15                      >
    16                          <span class="navds-label">Nytt felt</span>
    17                      </button>
    18                  </div>
    19              </fieldset>
    20              <div class="pure-controls">
    21                  <button type="submit"
    22                          class="navds-button navds-button--primary bg-surface-action"
    23                  >
    24                      <span class="navds-label">Lagre</span>
    25                  </button>
    26              </div>
    27          </form>
    28      </article>
    29  
    30      <script>
    31          let inputCounter = 0
    32  
    33          function deleteRow(event) {
    34              const valuesDiv = document.getElementById("values");
    35              valuesDiv.removeChild(event.target.parentElement.parentElement.parentElement)
    36          }
    37  
    38          function addNewElement() {
    39              const valuesDiv = document.getElementById("values");
    40              valuesDiv.insertAdjacentHTML("beforeend",
    41                  `<div class="mb-4 flex flex-col gap-2">
    42                      <input
    43                          class="navds-text-field__input navds-body-short navds-body-medium" 
    44                          type="text"
    45                          name="key.${inputCounter}"
    46                          id="key.${inputCounter}"
    47                          placeholder="key"
    48                      />
    49                      <div class="flex items-center gap-2">
    50                          <input
    51                              class="navds-text-field__input navds-body-short navds-body-medium"
    52                              type="text"
    53                              name="value.${inputCounter}"
    54                              id="value.${inputCounter}"
    55                              placeholder="value"
    56                          />
    57                          <div class="navds-checkbox navds-checkbox--small">
    58                              <input
    59                                  type="checkbox"
    60                                  name="value.${inputCounter}"
    61                                  id="value.${inputCounter}"
    62                                  class="navds-checkbox__input"
    63                              />
    64                              <label
    65                                  class="navds-checkbox__label"
    66                                  for="encrypt.${inputCounter}"
    67                              >
    68                                  <span class="navds-checkbox__content">
    69                                      Encrypt
    70                                  </span>
    71                              </label>
    72                          </div>
    73                          <button type="button" onclick="deleteRow(event)" class="navds-button navds-button--secondary">
    74                                  <span class="navds-label">Slett</span>
    75                          </button>
    76                      </div>
    77                  </div>`
    78              );
    79              inputCounter += 1;
    80          }
    81  
    82          function addElement(key, value, encrypted) {
    83              const valuesDiv = document.getElementById("values")
    84              const keyValueDiv = document.createElement("div");
    85              keyValueDiv.setAttribute("class", "mb-4")
    86  
    87              const label = document.createElement("label");
    88              label.setAttribute("class", "navds-form-field__label navds-label")
    89              label.innerText = key;
    90              keyValueDiv.appendChild(label);
    91  
    92              const valueDiv = document.createElement("div");
    93              valueDiv.setAttribute("class", "flex gap-2");
    94  
    95              var valueInput = document.createElement("input");
    96              valueInput.setAttribute("class", "navds-text-field__input navds-body-short navds-body-medium");
    97              valueInput.setAttribute("type", "text");
    98              valueInput.setAttribute("name", key);
    99              valueInput.setAttribute("id", key);
   100              valueInput.setAttribute("value", value);
   101              valueDiv.appendChild(valueInput);
   102  
   103              const encryptDiv = document.createElement("div");
   104              encryptDiv.setAttribute("class", "navds-checkbox flex gap-2 m-auto navds-checkbox--small");
   105              
   106              const encryptCheckbox = document.createElement("input");
   107              encryptCheckbox.setAttribute("class", "navds-checkbox__content cursor-pointer");
   108              encryptCheckbox.setAttribute("name", key);
   109              if (encrypted) {
   110                  encryptCheckbox.setAttribute("checked", "checked");
   111              }
   112              encryptCheckbox.setAttribute("id", key);
   113              encryptCheckbox.setAttribute("type", "checkbox");
   114              encryptCheckbox.setAttribute("label", "Encrypt");
   115  
   116              const encryptLabel = document.createElement("label");
   117              encryptLabel.setAttribute("class", "navds-form-field__label navds-label");
   118              encryptLabel.setAttribute("for", key);
   119  
   120              const encryptSpan = document.createElement("span");
   121              encryptSpan.setAttribute("class", "navds-checkbox__content font-normal");
   122              encryptSpan.innerText = "Encrypt";
   123              encryptLabel.appendChild(encryptSpan);
   124  
   125              encryptDiv.appendChild(encryptCheckbox);
   126              encryptDiv.appendChild(encryptLabel);
   127  
   128              const delButton = document.createElement("button");
   129              delButton.setAttribute("class", "navds-button navds-button--secondary");
   130              delButton.setAttribute("type", "button");
   131              delButton.setAttribute("onclick", "deleteRow(event)");
   132              const delLabel = document.createElement("span");
   133              delLabel.setAttribute("class", "navds-label");
   134              delLabel.innerText = "Slett";
   135              delButton.appendChild(delLabel);
   136  
   137              valueDiv.appendChild(encryptDiv);
   138              valueDiv.appendChild(delButton);
   139              keyValueDiv.appendChild(valueDiv);
   140              valuesDiv.appendChild(keyValueDiv);
   141          }
   142  
   143          {{ range .values }}
   144          addElement("{{ .Key }}", "{{ .Value }}", {{ .Encrypted }})
   145          {{ end }}
   146      </script>
   147      {{ template "footer" }}
   148  {{ end }}