diff --git a/templates/index.ts b/templates/index.ts index 99e09ff9..5b0c4b3b 100644 --- a/templates/index.ts +++ b/templates/index.ts @@ -21,6 +21,8 @@ import * as login from './auth/login/ts/'; import * as register from './auth/register/ts/'; import * as panel from './panel/ts/index'; import * as addSiteKey from './panel/sitekey/add/ts'; +import {MODE} from './logger'; +import log from './logger'; import VIEWS from './views/v1/routes'; @@ -34,6 +36,8 @@ import './panel/sitekey/list/css/main.scss'; import './errors/main.scss'; +log.setMode(MODE.production); + const router = new Router(); router.register(VIEWS.panelHome, panel.index); diff --git a/templates/logger.ts b/templates/logger.ts index 499ff6f2..b82241e4 100644 --- a/templates/logger.ts +++ b/templates/logger.ts @@ -14,24 +14,44 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {mode, MODE} from './env'; /** Conditional logger singleton */ -export const log = (function() { +const log = (function() { + let mode = MODE.production; return { - /** get levels */ + /** console.error() wrapper */ debug: (data: any) => { + if (mode == MODE.none) { + return; + } if (mode == MODE.development) { console.debug(data); } }, + /** console.error() wrapper */ error: (data: any) => { console.error(data); }, + /** console.log() wrapper */ log: (data: any) => { + if (mode == MODE.none) { + return; + } + console.log(data); }, + + /** set logging mode */ + setMode: (newMode: MODE) => (mode = newMode), }; })(); + +export const enum MODE { + production, + development, + none, +} + +export default log; diff --git a/templates/panel/sitekey/add/add-level.html b/templates/panel/sitekey/add/add-level.html index 3e25af11..10404084 100644 --- a/templates/panel/sitekey/add/add-level.html +++ b/templates/panel/sitekey/add/add-level.html @@ -7,8 +7,7 @@ @@ -17,9 +16,8 @@ Difficulty diff --git a/templates/panel/sitekey/add/form.html b/templates/panel/sitekey/add/form.html index 2409b5ea..e7de9c22 100644 --- a/templates/panel/sitekey/add/form.html +++ b/templates/panel/sitekey/add/form.html @@ -10,7 +10,9 @@ name="description" id="description" required + <. if form_description.trim().len() > 0 { .> value="<.= form_description .>" + <. } .> /> diff --git a/templates/panel/sitekey/add/ts/addLevelButton.test.ts b/templates/panel/sitekey/add/ts/addLevelButton.test.ts index 1a108a2b..82e3bf1e 100644 --- a/templates/panel/sitekey/add/ts/addLevelButton.test.ts +++ b/templates/panel/sitekey/add/ts/addLevelButton.test.ts @@ -16,7 +16,7 @@ */ import getNumLevels from './levels/getNumLevels'; -import {getAddForm, addLevel} from './setupTests'; +import {getAddForm, trim, addLevel} from './setupTests'; document.body.innerHTML = getAddForm(); @@ -43,7 +43,6 @@ it('addLevelButton works', () => { expect(trim(a)).toBe(trim(finalHtml())); }); -const trim = (s: string) => s.replace(/\s/g, ''); const finalHtml = () => { return ` @@ -59,7 +58,7 @@ const finalHtml = () => { name="description" id="description" required="" - value="" + > @@ -86,7 +85,7 @@ const finalHtml = () => { class="sitekey-form__level-input" type="number" name="visitor1" - value="" + id="visitor1" > @@ -97,7 +96,7 @@ const finalHtml = () => { type="number" name="difficulty1" class="sitekey-form__level-input" - value="" + id="difficulty1" > @@ -122,7 +121,7 @@ const finalHtml = () => { class="sitekey-form__level-input" type="number" name="visitor2" - value="" + id="visitor2" > @@ -133,7 +132,7 @@ const finalHtml = () => { type="number" name="difficulty2" class="sitekey-form__level-input" - value="" + id="difficulty2" > @@ -158,7 +157,7 @@ const finalHtml = () => { class="sitekey-form__level-input" type="number" name="visitor3" - value="" + id="visitor3" > @@ -169,7 +168,7 @@ const finalHtml = () => { type="number" name="difficulty3" class="sitekey-form__level-input" - value="" + id="difficulty3" > diff --git a/templates/panel/sitekey/add/ts/addLevelButton.ts b/templates/panel/sitekey/add/ts/addLevelButton.ts index 9b7eeafd..faed1fa6 100644 --- a/templates/panel/sitekey/add/ts/addLevelButton.ts +++ b/templates/panel/sitekey/add/ts/addLevelButton.ts @@ -23,6 +23,8 @@ import { } from './removeLevelButton'; import CONST from './const'; +import log from '../../../../logger'; + /** * Gets executed when 'Add' Button is clicked to add levels @@ -36,16 +38,15 @@ const addLevel = (e: Event) => { const onScreenLevel = getNumLevels(); const isValid = validateLevel(onScreenLevel); - console.log(`[addLevelButton] isValid: ${isValid}`); + log.debug(`[addLevelButton] isValid: ${isValid}`); if (!isValid) { - return console.error('Aborting level addition'); + return log.error('Aborting level addition'); } eventTarget.remove(); PARENT.innerHTML = getRemoveButtonHTML(onScreenLevel); PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`; //FIELDSET.innerHTML += getRemoveButtonHTML(numLevels); - addRemoveLevelButtonEventListener(onScreenLevel); //PARENT.remove(); @@ -53,6 +54,7 @@ const addLevel = (e: Event) => { FIELDSET.insertAdjacentHTML('afterend', newLevelHTML); UpdateLevel.register(onScreenLevel); + addRemoveLevelButtonEventListener(onScreenLevel); addLevelButtonAddEventListener(); }; @@ -69,7 +71,7 @@ const addLevelButtonAddEventListener = () => { * Check if './add-level.html` to see if this is up to date */ const getHtml = (level: number) => { - console.debug(`[generating HTML getHtml]level: ${level}`); + log.debug(`[generating HTML getHtml]level: ${level}`); const HTML = `
@@ -82,7 +84,6 @@ const getHtml = (level: number) => { class="sitekey-form__level-input" type="number" name="visitor${level}" - value="" id="visitor${level}" /> @@ -93,7 +94,6 @@ const getHtml = (level: number) => { type="number" name="difficulty${level}" class="sitekey-form__level-input" - value="" id="difficulty${level}" /> diff --git a/templates/panel/sitekey/add/ts/levels/getLevelFields.ts b/templates/panel/sitekey/add/ts/levels/getLevelFields.ts index 4158ccf1..e6d502a3 100644 --- a/templates/panel/sitekey/add/ts/levels/getLevelFields.ts +++ b/templates/panel/sitekey/add/ts/levels/getLevelFields.ts @@ -18,9 +18,11 @@ import {Level} from './index'; import CONST from '../const'; +import log from '../../../../../logger'; + /** Fetches level from DOM using the ID passesd and validates */ const getLevelFields = (id: number) => { - console.log(`[getLevelFields]: id: ${id}`); + log.debug(`[getLevelFields]: id: ${id}`); const visitorID = CONST.VISITOR_WITHOUT_LEVEL + id.toString(); const difficultyID = CONST.DIFFICULTY_WITHOUT_LEVEL + id.toString(); @@ -45,7 +47,7 @@ const getLevelFields = (id: number) => { visitor_threshold, }; - console.debug( + log.debug( `[getLevelFields.ts] visitor: ${visitor_threshold} difficulty: ${difficulty_factor}`, ); diff --git a/templates/panel/sitekey/add/ts/levels/getNumLevels.ts b/templates/panel/sitekey/add/ts/levels/getNumLevels.ts index 9fe69610..9f271643 100644 --- a/templates/panel/sitekey/add/ts/levels/getNumLevels.ts +++ b/templates/panel/sitekey/add/ts/levels/getNumLevels.ts @@ -17,13 +17,15 @@ import CONST from '../const'; +import log from '../../../../../logger'; + /** returns number of level input fields currently in DOM */ const getNumLevels = () => { let numLevels = 0; document .querySelectorAll(`.${CONST.LEVEL_CONTAINER_CLASS}`) .forEach(_ => numLevels++); - console.debug(`[getNumLevels]: numLevels: ${numLevels}`); + log.debug(`[getNumLevels]: numLevels: ${numLevels}`); return numLevels; }; diff --git a/templates/panel/sitekey/add/ts/levels/index.ts b/templates/panel/sitekey/add/ts/levels/index.ts index 109ec133..34b23891 100644 --- a/templates/panel/sitekey/add/ts/levels/index.ts +++ b/templates/panel/sitekey/add/ts/levels/index.ts @@ -15,6 +15,8 @@ * along with this program. If not, see . */ +import log from '../../../../../logger'; + /** Datatype represenging an mCaptcha level */ export type Level = { difficulty_factor: number; @@ -30,7 +32,7 @@ class Levels { } add = (newLevel: Level) => { - console.debug(`[levels/index.ts] levels lenght: ${this.levels.length}`); + log.debug(`[levels/index.ts] levels lenght: ${this.levels.length}`); if (newLevel.difficulty_factor <= 0) { throw new Error('Difficulty must be greater than zero'); } @@ -44,7 +46,6 @@ class Levels { return true; } - let msg; let count = 1; this.levels.forEach(level => { @@ -90,25 +91,25 @@ export const LEVELS = (function() { } } levels.levels = tmpLevel.levels; - console.log(`post update:`); + log.debug(`post update:`); LEVELS.print(); return true; } catch (e) { - console.log(e); + log.debug(e); return false; } }, print: () => levels.levels.forEach(level => - console.debug( + log.debug( `difficulty_factor: ${level.difficulty_factor} visitor ${level.visitor_threshold}`, ), ), /** remove level */ remove: (id: number) => { - console.debug(`[LEVELS] received order to remove ${id} element`); + log.debug(`[LEVELS] received order to remove ${id} element`); const tmpLevel = new Levels(); @@ -118,9 +119,9 @@ export const LEVELS = (function() { if (id != i) { tmpLevel.add(levels.levels[i]); } else { - console.debug(`[LEVELS] removing ${i} element`); + log.debug(`[LEVELS] removing ${i} element`); const rmElement = levels.levels[i]; - console.debug( + log.debug( `[LEVELS] removing element: difficulty_factor: ${rmElement.difficulty_factor} visitor_threshold: ${rmElement.visitor_threshold}`, @@ -128,11 +129,11 @@ export const LEVELS = (function() { } } levels.levels = tmpLevel.levels; - console.debug('Post remove:'); + log.debug('Post remove:'); LEVELS.print(); return true; } catch (e) { - console.log(e); + log.debug(e); return false; } }, diff --git a/templates/panel/sitekey/add/ts/removeLevelButton.ts b/templates/panel/sitekey/add/ts/removeLevelButton.ts deleted file mode 100644 index f62cc11f..00000000 --- a/templates/panel/sitekey/add/ts/removeLevelButton.ts +++ /dev/null @@ -1,160 +0,0 @@ -/* - * Copyright (C) 2021 Aravinth Manivannan - * - * 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 . - */ -import {LEVELS} from './levels/index'; -import getNumLevels from './levels/getNumLevels'; -import CONST from './const'; - -const REMOVE_LEVEL_BUTTON = 'sitekey-form__level-remove-level-button'; - -/** - * Gets executed when 'Remove' Button is clicked to remove levels - */ -const removeLevel = (e: Event) => { - const eventTarget = e.target; - const PARENT = eventTarget.parentElement; - const FIELDSET = PARENT.parentElement; - - const levelNum = parseInt( - eventTarget.id.slice(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL.length), - ); - - if (Number.isNaN(levelNum)) { - const msg = - '[removeLevelButton.ts] error in parsing level number from remove button ID'; - //console.error(msg); - throw new Error(msg); - } - updateLevelNumbersOnDOM(levelNum); - - LEVELS.remove(levelNum); - FIELDSET.remove(); -}; - -/** update level number on fieldset legends and their ids too */ -const updateLevelNumbersOnDOM = (id: number) => { - const numLevels = getNumLevels(); - if (id + 1 == numLevels) { - // this is the first elemet so have to remove fist element - // and downgrade the add thingy - - } - - // since I'm doing id+1, I have to remove id after I'm done - // with inclreasing level numbers - for (let i = id+1; i <= numLevels; i++) { - const newLevel = i-1; - - const levelGroup = document.querySelector( - `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${i}`, - ); - - if (levelGroup === null) { - const msg = `[removeLevelButton.ts]: - error when trying to fetch level group field set ${i}. got null`; - //console.error(msg); - throw new Error(msg); - } - - // rename legend - levelGroup.getElementsByTagName( - 'legend', - )[0].innerText = `Level ${newLevel}`; - - // rename labels - const labels = >( - levelGroup.querySelectorAll(`.${CONST.LABEL_CLASS}`) - ); - //console.log(labels); - labels.forEach(label => { - //console.log(`${label.htmlFor}`); - if (label.htmlFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) { - label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`; - } - - if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { - label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`; - } - }); - - // rename inputs - const inputs = >( - levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`) - ); - //console.log(inputs); - inputs.forEach(input => { - if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) { - //console.log(`${input.id}`); - //console.log('changing visitor_threshold input'); - input.id = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`; - } - - if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { - //console.log('changing difficulty input'); - input.id = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`; - } - }); - - levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`; - - /* TODO - * change field set ID - * change legend inner Text - * change visitor lable for value - * change visitor input id - * change difficulty for value - * change difficulty input id - */ - } -}; - -/** adds onclick event listener */ -export const addRemoveLevelButtonEventListener = (level: number) => { - const removeButton = ( - document.querySelector( - `#${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`, - ) - ); - removeButton.addEventListener('click', removeLevel); -}; - -/** adds onclick event listener to all remove buttons */ -export const addRemoveLevelButtonEventListenerAll = () => { - const removeButtons = document.querySelectorAll(`.${REMOVE_LEVEL_BUTTON}`); - removeButtons.forEach(button => - button.addEventListener('click', removeLevel), - ); -}; - -/** - * Generate Remove button HTML. On-click handler should be added - * seprately - */ -export const getRemoveButtonHTML = (level: number) => { - //console.debug(`[generating HTML getHtml]level: ${level}`); - const HTML = ` - ${CONST.REMOVE_LEVEL_LABEL_TEXT} - -
-`; - return HTML; -}; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/index.ts b/templates/panel/sitekey/add/ts/removeLevelButton/index.ts new file mode 100644 index 00000000..0e4cf8d9 --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/index.ts @@ -0,0 +1,84 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ +import {LEVELS} from '../levels/index'; +import updateLevelNumbersOnDOM from './updateDom'; +import CONST from '../const'; + +import log from '../../../../../logger'; + +const REMOVE_LEVEL_BUTTON = 'sitekey-form__level-remove-level-button'; + +/** + * Gets executed when 'Remove' Button is clicked to remove levels + */ +const removeLevel = (e: Event) => { + const eventTarget = e.target; + const PARENT = eventTarget.parentElement; + const FIELDSET = PARENT.parentElement; + + const levelNum = parseInt( + eventTarget.id.slice(CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL.length), + ); + + if (Number.isNaN(levelNum)) { + const msg = + '[removeLevelButton.ts] error in parsing level number from remove button ID'; + //log.error(msg); + throw new Error(msg); + } + updateLevelNumbersOnDOM(levelNum); + + LEVELS.remove(levelNum); + FIELDSET.remove(); +}; + +/** adds onclick event listener */ +export const addRemoveLevelButtonEventListener = (level: number) => { + const removeButton = document.getElementById( + `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`, + ); + + removeButton.addEventListener('click', removeLevel); +}; + +/** adds onclick event listener to all remove buttons */ +export const addRemoveLevelButtonEventListenerAll = () => { + const removeButtons = document.querySelectorAll(`.${REMOVE_LEVEL_BUTTON}`); + removeButtons.forEach(button => + button.addEventListener('click', removeLevel), + ); +}; + +/** + * Generate Remove button HTML. On-click handler should be added + * seprately + */ +export const getRemoveButtonHTML = (level: number) => { + log.log(`[generating HTML getHtml]level: ${level}`); + const HTML = ` + ${CONST.REMOVE_LEVEL_LABEL_TEXT} + + +`; + return HTML; +}; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts b/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts new file mode 100644 index 00000000..61654932 --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts @@ -0,0 +1,92 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +import getNumLevels from '../levels/getNumLevels'; +import { + getAddForm, + getRemoveButtonHTMLForm, + trim, + addLevel, +} from '../setupTests'; +import CONST from '../const'; + +import log from '../../../../../logger'; +import {MODE} from '../../../../../logger'; + +document.body.innerHTML = getAddForm(); + +const setUp = () => { + expect(getNumLevels()).toBe(1); + // add a level + addLevel(2, 2); + expect(getNumLevels()).toBe(2); + + // add second level + addLevel(4, 4); + expect(getNumLevels()).toBe(3); + + // add thrid level + addLevel(5, 5); + expect(getNumLevels()).toBe(4); +}; + +log.setMode(MODE.none); + +it('addLevelButton works', () => { + setUp(); + + // for (let i = 1; i < 4; i++) { + // const l1 = ( + // document.getElementById( + // `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`, + // ) + // ); + // + // const expecting = 4 - i; + // const currentLevels = getNumLevels(); + // log.log( + // `current iteration: ${i}. expecting val: ${expecting} got: ${currentLevels}`, + // ); + // + // l1.click(); + // expect(currentLevels).toBe(expecting); + // + // + // } + + let a = document.body.innerHTML; + expect(trim(a)).toBe(trim(getRemoveButtonHTMLForm())); + + const l1 = ( + document.getElementById(`${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${1}`) + ); + + const expecting = 4 - 1; + const currentLevels = getNumLevels(); + log.log( + `current iteration: ${1}. expecting val: ${expecting} got: ${currentLevels}`, + ); + + l1.click(); + + a = document.body.innerHTML; + //console.log(a); + // expect(currentLevels).toBe(expecting); + //document.body.innerHTML; + // expect(trim(a)).toBe(trim(getRemoveButtonHTMLForm())); + // +}); diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts new file mode 100644 index 00000000..1d263a4d --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts @@ -0,0 +1,79 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ +import getNumLevels from '../../levels/getNumLevels'; +import CONST from '../../const'; +import log from '../../../../../../logger'; + +import updateLabel from './updateLabel'; +import updateInputs from './updateInputs'; + +/** + * update level number on fieldset legends and their ids too + * @param {number} id - level number that was ordered to remove. + * All updates are made relative to id + * */ +const updateLevelNumbersOnDOM = (id: number) => { + const numLevels = getNumLevels(); + if (id == numLevels) { + throw new Error( + "Can't remove the very fist element, it has to be first added to DOM", + ); + } + + // since I'm doing id+1, I have to remove id after I'm done + // with inclreasing level numbers + for (let i = id + 1; i <= numLevels; i++) { + const newLevel = i - 1; + + const levelGroup = document.querySelector( + `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${i}`, + ); + + if (levelGroup === null) { + const msg = `[removeLevelButton.ts]: + error when trying to fetch level group field set ${i}. got null`; + log.error(msg); + throw new Error(msg); + } + + // rename legend + levelGroup.getElementsByTagName( + 'legend', + )[0].innerText = `Level ${newLevel}`; + + // rename labels + updateLabel(levelGroup, newLevel); + + // rename inputs + updateInputs(levelGroup, newLevel); + + // TODO change remove button ID as well + + levelGroup.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${newLevel}`; + + /* TODO + * change field set ID + * change legend inner Text + * change visitor lable for value + * change visitor input id + * change difficulty for value + * change difficulty input id + */ + } +}; + +export default updateLevelNumbersOnDOM; diff --git a/templates/env.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/setupTests.ts similarity index 62% rename from templates/env.ts rename to templates/panel/sitekey/add/ts/removeLevelButton/updateDom/setupTests.ts index a40ade11..2e06293c 100644 --- a/templates/env.ts +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/setupTests.ts @@ -15,9 +15,22 @@ * along with this program. If not, see . */ -export enum MODE { - production, - development, -} +import getNumLevels from '../../levels/getNumLevels'; +import {getAddForm, addLevel} from '../../setupTests'; -export const mode = MODE.development; +document.body.innerHTML = getAddForm(); + +export const setupAddlevels = () => { + expect(getNumLevels()).toBe(1); + // add a level + addLevel(2, 2); + expect(getNumLevels()).toBe(2); + + // add second level + addLevel(4, 4); + expect(getNumLevels()).toBe(3); + + // add thrid level + addLevel(5, 5); + expect(getNumLevels()).toBe(4); +}; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts new file mode 100644 index 00000000..53f4e490 --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts @@ -0,0 +1,242 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +import getNumLevels from '../../levels/getNumLevels'; +import {getAddForm, trim} from '../../setupTests'; +import updateInputs from './updateInputs'; +import CONST from '../../const'; + +import log from '../../../../../../logger'; +import {MODE} from '../../../../../../logger'; + +import {setupAddlevels} from './setupTests'; + +document.body.innerHTML = getAddForm(); + +log.setMode(MODE.none); + +it('addLevelButton works', () => { + setupAddlevels(); + // removing level 2 + const level = 2; + const levelGroup = document.querySelector( + `#${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`, + ); + + const newLevel = 20; + + updateInputs(levelGroup, newLevel); + + const inputs = >( + levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`) + ); + inputs.forEach(input => { + if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) { + expect(input.id).toBe(`${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`); + console.log("checking visitor"); + } else { + // if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { + console.log("checking difficulty"); + expect(input.id).toBe(`${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`); + } + }); + + expect(trim(document.body.innerHTML)).toBe(trim(update())); +}); + +/** get initial form to test remove button functionality */ +export const update = () => { + return ` +
+

+ Add Sitekey +

+ + + + +
+ + Level 1 + + + + + +
+
+ + Level 2 + + + + + +
+
+ + Level 3 + + + + + +
+ +
+ + Level 4 + + + + + +
+ + +
+`; +}; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts new file mode 100644 index 00000000..bf79bd9e --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ +import CONST from '../../const'; +import log from '../../../../../../logger'; + +const updateInput = (levelGroup: Element, newLevel: number) => { + const inputs = >( + levelGroup.querySelectorAll(`.${CONST.LEVEL_INPUT_CLASS}`) + ); + log.log(inputs); + inputs.forEach(input => { + if (input.id.includes(CONST.VISITOR_WITHOUT_LEVEL)) { + log.log(`${input.id}`); + log.log('changing visitor_threshold input'); + const id = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`; + input.id = id; + input.name = id; + } + + if (input.id.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { + log.log('changing difficulty input'); + const id = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`; + input.id = id; + input.name = id; + } + }); +}; + +export default updateInput; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts new file mode 100644 index 00000000..f0bfa90b --- /dev/null +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateLabel.ts @@ -0,0 +1,38 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ +import CONST from '../../const'; +import log from '../../../../../../logger'; + +const updateLabel = (levelGroup: Element, newLevel: number) => { + // rename labels + const labels = >( + levelGroup.querySelectorAll(`.${CONST.LABEL_CLASS}`) + ); + log.log(labels); + labels.forEach(label => { + log.log(`${label.htmlFor}`); + if (label.htmlFor.includes(CONST.VISITOR_WITHOUT_LEVEL)) { + label.htmlFor = `${CONST.VISITOR_WITHOUT_LEVEL}${newLevel}`; + } + + if (label.htmlFor.includes(CONST.DIFFICULTY_WITHOUT_LEVEL)) { + label.htmlFor = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${newLevel}`; + } + }); +}; + +export default updateLabel; diff --git a/templates/panel/sitekey/add/ts/setupTests.ts b/templates/panel/sitekey/add/ts/setupTests.ts index 53f69db9..7fa8586d 100644 --- a/templates/panel/sitekey/add/ts/setupTests.ts +++ b/templates/panel/sitekey/add/ts/setupTests.ts @@ -19,6 +19,9 @@ import {Level} from './levels/index'; import CONST from './const'; import addLevelButtonAddEventListener from './addLevelButton'; +/** get rid of all whitespaces, useful when comparing DOM states */ +export const trim = (s: string) => s.replace(/\s/g, ''); + export const level1: Level = { difficulty_factor: 200, visitor_threshold: 500, @@ -49,7 +52,10 @@ export const addLevel = (visitor: number, diff: number) => { }; /** Fill add level form without clicking add button */ -export const fillAddLevel = (visitor: number|string, diff: number|string) => { +export const fillAddLevel = ( + visitor: number | string, + diff: number | string, +) => { addLevelButtonAddEventListener(); const level = getNumLevels(); @@ -106,7 +112,7 @@ export const getAddForm = () => ` name="description" id="description" required="" - value="" + /> @@ -133,7 +139,7 @@ export const getAddForm = () => ` class="sitekey-form__level-input" type="number" name="visitor1" - value="" + id="visitor1" /> @@ -144,7 +150,7 @@ export const getAddForm = () => ` type="number" name="difficulty1" class="sitekey-form__level-input" - value="" + id="difficulty1" /> @@ -163,3 +169,186 @@ export const getAddForm = () => ` `; + +/** get initial form to test remove button functionality */ +export const getRemoveButtonHTMLForm = () => { + return ` +
+

+ Add Sitekey +

+ + + + +
+ + Level 1 + + + + + +
+
+ + Level 2 + + + + + +
+
+ + Level 3 + + + + + +
+ +
+ + Level 4 + + + + + +
+ + +
+`; +}; diff --git a/templates/panel/sitekey/add/ts/t.html b/templates/panel/sitekey/add/ts/t.html new file mode 100644 index 00000000..ef35c36e --- /dev/null +++ b/templates/panel/sitekey/add/ts/t.html @@ -0,0 +1,248 @@ +
+

+ Add Sitekey +

+ + + + +
+ + Level 1 + + + + + +
+
+ + Level 2 + + + + + +
+
+ + Level 3 + + + + + +
+
+ + Level 4 + + + + + +
+
+ + Level 5 + + + + + +
+
+ + Level 6 + + + + + +
+ + +