typescript migration

templates/panel/add-site-key/add-level.html

@@ -6,9 +6,11 @@
   <input
     class="sitekey-form__input--add-level"
     type="number"
-    id="level2"
     id="level<.= level .>"
     name="level<.= level .>"
+	<. if level == 1 { .>
+	<.= "required" .>
+	<. } .>
     value=""
   />
   <button class="sitekey-form__add-level-button">Add Level</button>

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

@@ -14,21 +14,53 @@
  * 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 ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
 const LABEL_CLASS = 'sitekey-form__label';
-const INPUT_ID_WITHOUT_LEVEL = 'level';
-const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
+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';
 
-const addLevelButtonEventHandler = e => {
-  const PREV_LEVEL_CONTAINER = e.target.parentElement;
-  e.target.remove();
-
+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');
@@ -63,12 +95,11 @@ const addLevelButtonEventHandler = e => {
 
   labelContainer.insertAdjacentElement('afterend', inputContainer);
 
-
   addLevelButtonAddEventListener();
 };
 
 export const addLevelButtonAddEventListener = () => {
-  let addLevelButton = document.querySelector(`.${ADD_LEVEL_BUTTON}`);
+  let addLevelButton = <HTMLElement>document.querySelector(`.${ADD_LEVEL_BUTTON}`);
   addLevelButton.addEventListener('click', addLevelButtonEventHandler);
 };
 

templates/panel/add-site-key/form.html

@@ -10,6 +10,7 @@
     type="text"
     name="description"
     id="description"
+	required
     value="<.= form_description .>"
   />
 

templates/panel/add-site-key/form.js

@@ -1,31 +0,0 @@
-/*
- * 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/>.
- */
-
-const SITE_KEY_FORM_CLASS = 'sitekey-form';
-const FORM = document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
-
-export const addSubmitEventListener = () => {
-  FORM.addEventListener('submit', submit, true);
-};
-
-const submit = async () => {
-  alert('submited');
-  // get values
-  // check validate levels
-  // submit
-  // handle erros
-}

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

@@ -0,0 +1,57 @@
+/*
+ * 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/>.
+ */
+
+const SITE_KEY_FORM_CLASS = 'sitekey-form';
+const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
+
+import * as addLevelButton from './addLevelButton';
+import isBlankString from '../../utils/isBlankString';
+
+export const addSubmitEventListener = () => {
+  FORM.addEventListener('submit', submit, true);
+};
+
+const validateLevels = (e: Event) => {
+  let numLevels = addLevelButton.getNumLevels();
+  // check if levels are unique and are in increasing order;
+  // also if they are positive
+  // also if level input field is accompanied by a "Add Level" button,
+  // it shouldn't be used for validation
+  for (let levelNum = 1; levelNum < numLevels; levelNum++) {
+    let inputID = addLevelButton.INPUT_ID_WITHOUT_LEVEL + levelNum;
+    let inputElement = <HTMLInputElement>document.getElementById(inputID);
+    let val = inputElement.value;
+    let filed = addLevelButton.LABEL_INNER_TEXT_WITHOUT_LEVEL + levelNum;
+    isBlankString(e, val, filed);
+  }
+}
+
+const validateDescription = (e: Event) => {
+    let inputElement = <HTMLInputElement>document.getElementById("description");
+    let val = inputElement.value;
+    let filed = "Description";
+    isBlankString(e, val, filed);
+}
+
+const submit = async (e: Event) => {
+  validateDescription(e);
+  validateLevels(e);
+  // get values
+  // check validate levels
+  // submit
+  // handle erros
+};

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

@@ -0,0 +1,61 @@
+/*
+ * 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/>.
+ */
+
+const VALIDATE_LEVELS = (function() {
+  const levels: Array<number> = [];
+
+  const checkAscendingOrder = (newLevel: number) => {
+    if (levels.length == 0) {
+      return true;
+    }
+
+    let isValid = true;
+    levels.find(level => {
+      if (level > newLevel) {
+        alert(
+          `Level: ${newLevel} has to greater than previous levels ${level}`,
+        );
+        isValid = false;
+        return true;
+      }
+      return false;
+    });
+
+    return isValid;
+  };
+  return {
+    add: function(newLevel: number) {
+      console.log(`[levels.js]levels: ${levels} newLevel: ${newLevel}`);
+      if (levels.find(level => level == newLevel)) {
+        alert(`Level: ${newLevel} has to be unique`);
+        return false;
+      }
+
+      let isValid = checkAscendingOrder(newLevel);
+      if (isValid) {
+        levels.push(newLevel);
+        return true;
+      }
+
+      console.log(
+        `Ascending arder failure. Levels: ${levels}, levels length: ${levels.length}`,
+      );
+      return false;
+    },
+  }; })();
+
+export default VALIDATE_LEVELS;