dom manipulations uses elements

templates/panel/css/main.scss

@@ -23,7 +23,6 @@
 
 .panel-main {
   @include main;
-  margin-left: 14%;
 }
 
 .inner-container {

templates/panel/header/index.html

@@ -1,3 +1,3 @@
 <header>
-  <. include!("./sidebar/index.html"); .>
+  <. include!("./taskbar/index.html"); .> 
 </header>

templates/panel/header/taskbar/main.scss

@@ -15,9 +15,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../reset';
-@import '../../vars';
-@import '../../components/button';
+@import '../../../reset';
+@import '../../../vars';
+@import '../../../components/button';
 
 .taskbar {
   display: flex;

templates/panel/index.html

@@ -1,7 +1,7 @@
 <. include!("../components/headers.html"); .>
+<. include!("./navbar/index.html"); .>
 <. include!("./header/index.html"); .>
 <main class="panel-main">
-  <. include!("./taskbar/index.html"); .> 
   <. include!("./help-banner/index.html"); .>
   <div class="inner-container">
 

templates/panel/navbar/main.scss

@@ -15,16 +15,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../reset';
-@import '../../../vars';
+@import '../../reset';
+@import '../../vars';
 
 .secondary-menu {
-  position: fixed;
-  width: 14%;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  right: 0;
+ // position: fixed;
+ // width: 14%;
+ // left: 0;
+ // bottom: 0;
+ // top: 0;
+ // right: 0;
+
   height: 100%;
   overflow: auto;
 

templates/panel/sitekey/add/css/main.scss

@@ -26,7 +26,7 @@
   width: 90%;
   justify-content: center;
   align-items: center;
-  box-sizing: content-box;
+//  box-sizing: content-box;
   background-color: $white;
   margin: auto;
   padding-bottom: 30px;

templates/panel/sitekey/add/index.html

@@ -1,9 +1,9 @@
-<. include!("../../../components/headers.html"); .> <. include!("../../header/index.html");
-.>
+<. include!("../../../components/headers.html"); .> 
+<. include!("../../navbar/index.html"); .>
+<. include!("../../header/index.html"); .>
 
 <main class="panel-main">
-  <. include!("../../taskbar/index.html"); .> <.
-  include!("../../help-banner/index.html"); .>
+  <. include!("../../help-banner/index.html"); .>
   <!-- Main content container -->
   <div class="inner-container">
     <!-- Main menu/ important actions roaster -->

templates/panel/sitekey/add/ts/addLevelButton.ts

@@ -25,7 +25,6 @@ import CONST from './const';
 
 import log from '../../../../logger';
 
-
 /**
  * Gets executed when 'Add' Button is clicked to add levels
  * Used to validate levels per m_captcha::defense::Defense's
@@ -43,19 +42,24 @@ const addLevel = (e: Event) => {
     return log.error('Aborting level addition');
   }
 
-  eventTarget.remove();
-  PARENT.innerHTML = getRemoveButtonHTML(onScreenLevel);
-  PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
+  // eventTarget.remove();
+  FIELDSET.replaceChild(getRemoveButtonHTML(onScreenLevel), PARENT);
+
+  //  PARENT.appendChild(  PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
   //FIELDSET.innerHTML += getRemoveButtonHTML(numLevels);
 
   //PARENT.remove();
 
-  const newLevelHTML = getHtml(onScreenLevel + 1);
-  FIELDSET.insertAdjacentHTML('afterend', newLevelHTML);
+  const newLevelElement = getHtml(onScreenLevel + 1);
+  FIELDSET.insertAdjacentElement('afterend', newLevelElement);
   UpdateLevel.register(onScreenLevel);
 
   addRemoveLevelButtonEventListener(onScreenLevel);
   addLevelButtonAddEventListener();
+  const main = document.querySelector('body');
+  const style = main.style.display;
+  main.style.display = 'none';
+  main.style.display = style;
 };
 
 /** adds onclick event listener */
@@ -73,43 +77,64 @@ const addLevelButtonAddEventListener = () => {
 const getHtml = (level: number) => {
   log.debug(`[generating HTML getHtml]level: ${level}`);
 
-  const HTML = `
-<fieldset class="sitekey__level-container" id="level-group-${level}">
-  <legend class="sitekey__level-title">
-	  Level ${level}
-  </legend>
-  <label class="sitekey-form__level-label" for="visitor${level}"
-    >Visitor
-    <input
-      class="sitekey-form__level-input"
-      type="number"
-      name="visitor${level}"
-      id="visitor${level}"
-    />
-  </label>
+  const fieldset = document.createElement('fieldset'); //  new HTMLFieldSetElement();
+  fieldset.className = CONST.LEVEL_CONTAINER_CLASS;
+  fieldset.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`;
 
-  <label class="sitekey-form__level-label" for="difficulty${level}">
-    Difficulty
-    <input
-      type="number"
-      name="difficulty${level}"
-      class="sitekey-form__level-input"
-      id="difficulty${level}"
-    />
-  </label>
-  <label class="sitekey-form__level-label--hidden" for="add">
-	  Add level
-  <input
-    class="sitekey-form__level-add-level-button"
-    type="button"
-    name="add"
-    id="add"
-    value="Add"
-  />
-  </label>
-</fieldset>
-`;
-  return HTML;
+  const legend = document.createElement('legend'); // new HTMLLegendElement();
+  legend.className = CONST.LEGEND_CLASS;
+  const legendText = document.createTextNode(`Level ${level}`);
+  legend.appendChild(legendText);
+
+  fieldset.appendChild(legend);
+
+  const vistitorLabel = document.createElement('label'); //document.createElement('label');
+  vistitorLabel.className = CONST.LABEL_CLASS;
+  const visitorText = document.createTextNode('Visitor');
+  vistitorLabel.appendChild(visitorText);
+  const visitor = document.createElement('input'); //document.createElement('input');
+  const visitorId = `${CONST.VISITOR_WITHOUT_LEVEL}${level}`;
+  visitor.className = CONST.LEVEL_INPUT_CLASS;
+  visitor.type = 'number';
+  visitor.name = visitorId;
+  visitor.id = visitorId;
+  vistitorLabel.htmlFor = visitorId;
+  vistitorLabel.appendChild(visitor);
+
+  fieldset.appendChild(vistitorLabel);
+
+  const difficultyLabel = document.createElement('label');
+  difficultyLabel.className = CONST.LABEL_CLASS;
+  const difficultyText = document.createTextNode('Difficulty');
+  difficultyLabel.appendChild(difficultyText);
+  const difficulty = document.createElement('input');
+  const difficultyID = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${level}`;
+  difficulty.type = 'number';
+  difficulty.name = difficultyID;
+  difficulty.className = CONST.LEVEL_INPUT_CLASS;
+  difficulty.id = difficultyID;
+  difficultyLabel.htmlFor = difficultyID;
+  difficultyLabel.appendChild(difficulty);
+
+  fieldset.appendChild(difficultyLabel);
+
+  const addLevelLabel = document.createElement('label');
+  addLevelLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
+  const addLevel = document.createElement('input');
+  addLevel.className = CONST.ADD_LEVEL_BUTTON;
+  addLevel.type = 'button';
+  const addLevelButtonID = 'add';
+  addLevel.name = addLevelButtonID;
+  addLevel.id = addLevelButtonID;
+  addLevelLabel.htmlFor = addLevelButtonID;
+  const addText = document.createTextNode('Add level');
+  addLevelLabel.appendChild(addText);
+  addLevel.value = 'Add';
+  addLevelLabel.appendChild(addLevel);
+
+  fieldset.appendChild(addLevelLabel);
+
+  return fieldset;
 };
 
 export default addLevelButtonAddEventListener;

templates/panel/sitekey/add/ts/removeLevelButton/index.ts

@@ -69,16 +69,21 @@ export const addRemoveLevelButtonEventListenerAll = () => {
  */
 export const getRemoveButtonHTML = (level: number) => {
   log.log(`[generating HTML getHtml]level: ${level}`);
-  const HTML = `
-  ${CONST.REMOVE_LEVEL_LABEL_TEXT}
-  <input
-    class="${CONST.REMOVE_LEVEL_BUTTON_CLASS}"
-    type="button"
-    name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
-    id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
-    value="x"
-  />
-</fieldset>
-`;
-  return HTML;
+
+  const btn = document.createElement('input');
+  btn.className = CONST.REMOVE_LEVEL_BUTTON_CLASS;
+  btn.type = 'button';
+  const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`;
+  btn.name = id;
+  btn.id = id;
+  btn.value = 'x';
+
+  const removeLabel = document.createElement('label');
+  removeLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
+  const removeLabelText = document.createTextNode('RemoveLevel');
+  removeLabel.appendChild(removeLabelText);
+  removeLabel.appendChild(btn);
+  removeLabel.htmlFor = id;
+
+  return removeLabel;
 };

templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts

@@ -46,7 +46,7 @@ const setUp = () => {
 
 log.setMode(MODE.none);
 
-it('addLevelButton works', () => {
+it('removeLevelButton works', () => {
   setUp();
 
   for (let i = 1; i < 4; i++) {

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts

@@ -53,9 +53,11 @@ const updateLevelNumbersOnDOM = (id: number) => {
     }
 
     // rename legend
+    const legendText = document.createTextNode(`Level ${newLevel}`);
     levelGroup.getElementsByTagName(
       'legend',
-    )[0].innerText = `Level ${newLevel}`;
+    )[0].appendChild(legendText);
+
 
     // rename labels
     updateLabels(levelGroup, newLevel);

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts

@@ -15,7 +15,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import getNumLevels from '../../levels/getNumLevels';
 import {getAddForm, trim} from '../../setupTests';
 import updateInputs from './updateInputs';
 import CONST from '../../const';
@@ -29,7 +28,7 @@ document.body.innerHTML = getAddForm();
 
 log.setMode(MODE.none);
 
-it('addLevelButton works', () => {
+it('updateInputs works', () => {
   setupAddlevels();
   // removing level  2
   const level = 2;

templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts

@@ -36,7 +36,9 @@ const updateInput = (levelGroup: Element, newLevel: number) => {
       input.id = id;
       input.name = id;
     } else {
-      throw new Error('Did you add an extra input to DOM?');
+      if (input.id != 'add') {
+        throw new Error(`Did you add an extra input to DOM? ${input.id} ${input.className} ${input.name}`);
+      }
     }
   });
 };

templates/panel/sitekey/list/index.html

@@ -1,9 +1,8 @@
-<. include!("../../../components/headers.html"); .> <.
-include!("../../header/index.html"); .>
-
+<. include!("../../../components/headers.html"); .> 
+<. include!("../../navbar/index.html"); .>
+<. include!("../../header/index.html"); .>
 <main class="panel-main">
-  <. include!("../../taskbar/index.html"); .> <.
-  include!("../../help-banner/index.html"); .>
+  <.include!("../../help-banner/index.html"); .>
   <!-- Main content container -->
   <div class="inner-container">
     <!-- Main menu/ important actions roaster -->

templates/panel/sitekey/view/index.html

@@ -1,8 +1,7 @@
-<. include!("../../../components/headers.html"); .> <.
-include!("../../header/index.html"); .>
-
+<. include!("../../../components/headers.html"); .> 
+<. include!("../../navbar/index.html"); .>
+<. include!("../../header/index.html"); .>
 <main class="panel-main">
-  <. include!("../../taskbar/index.html"); .> <.
   include!("../../help-banner/index.html"); .>
   <!-- Main content container -->
   <div class="inner-container">