typescript migration

templates/panel/add-site-key/addLevelButton.ts

@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import VALIDATE_LEVELS from './levels';
+import isBlankString from '../../utils/isBlankString';
+
+const LABEL_CONTAINER_CLASS = 'sitekey-form__add-level-flex-container';
+const LABEL_CLASS = 'sitekey-form__label';
+export const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
+
+export const INPUT_ID_WITHOUT_LEVEL = 'level';
+const INPUT_CLASS = 'sitekey-form__input--add-level';
+
+const ADD_LEVEL_BUTTON_INNER_TEXT = 'Add Level';
+const ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
+
+export const getNumLevels = () => {
+  let numLevels = 0;
+  document.querySelectorAll(`.${LABEL_CLASS}`).forEach(_ => numLevels++);
+  return numLevels;
+};
+
+const validateLevel = (numLevels: number) => {
+  numLevels = numLevels - 1;
+  let inputID = INPUT_ID_WITHOUT_LEVEL + numLevels.toString();
+  let filed = LABEL_INNER_TEXT_WITHOUT_LEVEL + numLevels;
+  let inputElement = <HTMLInputElement>document.getElementById(inputID);
+  let val = inputElement.value;
+  let e = null;
+  isBlankString(e, val, filed);
+  let isValid = VALIDATE_LEVELS.add(parseInt(val));
+  return isValid;
+};
+
+const addLevelButtonEventHandler = (e: Event) => {
+  let  eventTarget = <HTMLElement>e.target;
+//  if (!eventTarget) {
+//    return;
+//  }
+  const PREV_LEVEL_CONTAINER = <HTMLElement>eventTarget.parentElement;
+  let numLevels: string|number = getNumLevels();
+  let isValid = validateLevel(numLevels);
+  console.log(`[addLevelButton] isValid: ${isValid}`);
+
+  if (!isValid) {
+    return console.log('Aborting level addition');
+  }
+
+  eventTarget.remove();
+
+  numLevels = numLevels.toString();
+
+  let labelContainer = document.createElement('div');
+  labelContainer.className = LABEL_CONTAINER_CLASS;
+
+  let inputID = INPUT_ID_WITHOUT_LEVEL + numLevels;
+  let label = document.createElement('label');
+  label.className = LABEL_CLASS;
+  label.htmlFor = inputID;
+  label.innerText = LABEL_INNER_TEXT_WITHOUT_LEVEL + numLevels;
+
+  labelContainer.appendChild(label);
+
+  PREV_LEVEL_CONTAINER.insertAdjacentElement('afterend', labelContainer);
+
+  let inputContainer = document.createElement('div');
+  inputContainer.className = LABEL_CONTAINER_CLASS;
+
+  let input = document.createElement('input');
+  input.id = inputID;
+  input.name = inputID;
+  input.type = 'text';
+  input.className = INPUT_CLASS;
+
+  inputContainer.appendChild(input);
+
+  let button = document.createElement('button');
+  button.className = ADD_LEVEL_BUTTON;
+  button.innerText = ADD_LEVEL_BUTTON_INNER_TEXT;
+
+  inputContainer.appendChild(button);
+
+  labelContainer.insertAdjacentElement('afterend', inputContainer);
+
+  addLevelButtonAddEventListener();
+};
+
+export const addLevelButtonAddEventListener = () => {
+  let addLevelButton = <HTMLElement>document.querySelector(`.${ADD_LEVEL_BUTTON}`);
+  addLevelButton.addEventListener('click', addLevelButtonEventHandler);
+};
+
+/*
+ <div class="sitekey-form__add-level-flex-container">
+<label class="sitekey-form__label" for="level2">Level 2</label>
+</div>
+
+<div class="sitekey-form__add-level-flex-container">
+<input
+  class="sitekey-form__input--add-level"
+  type="text"
+  name="level2"
+  id="level2"
+  value=""
+/>
+<button class="sitekey-form__add-level-button">Add Level</button>
+</div>
+*/