Config

public/scripts/config.js

@@ -0,0 +1,36 @@
+  btnAddConfig.onclick = function () {
+    let url = document.querySelector("#url").value;
+    let dataLayer = document.querySelector("#dataLayer").value;
+    let schema_name = document.querySelector("#schema_name").value;
+
+
+    document.querySelector("#url").value = "";
+    document.querySelector("#dataLayer").value = "";
+    document.querySelector("#schema_name").value = "";
+
+    if (url === "" || dataLayer === "" || schema_name === "") {
+      alert("Please enter a valid Name");
+      return;
+    }
+
+     validator = {
+        validator: [
+          {
+            url: url,
+            schema_name: [schema_name],
+            dataLayer: dataLayer,
+            browserClose: true,
+            time: 0
+          },
+        ]
+      };
+
+    updateValidatorExample(JSON.stringify(validator, undefined, 2));
+
+
+  };
+  btnRemoveConfig.onclick = function(){
+    validateExample = document.getElementById("schemaExample")
+    validateExample.parentNode.removeChild(validateExample)
+    updateValidatorExample(JSON.stringify(validator, undefined, 2));
+}

public/scripts/events.js

@@ -1,108 +1,106 @@
 const removeEventInSchema = function (eventName, eventIndex) {
-
-    schema.array.items.splice(eventIndex, 1);
-
+  schema.array.items.splice(eventIndex, 1);
 };
 
 btnAddEvent.onclick = function () {
-    let eventName = document.querySelector('#eventName').value;
-    let newEvent = new Option(eventName, eventName);
-
-    document.querySelector('#eventName').value = '';
-
-    if (eventName === '') {
-        alert('Please enter a valid Name');
-        return;
-    }
-
-    let eventObjt = {
-        "type": "object",
-        "properties": {
-            "event": {
-                "type": "string",
-                "enum": [eventName]
-            }
-        },
-        "required": ["event"]
-    }
-    schema.array.items.push(eventObjt);
-    eventList.add(newEvent);
-
-    updateSchemaExample(JSON.stringify(schema, undefined, 2));
-
-}
-
-eventList.addEventListener('change', () => {
-    btnRemoveEvent.hidden = false;
-    btnEditEvent.hidden = false;
-    btnAddProperty.hidden = false;
-
-    propertyName.disabled = false;
-    propertyType.disabled = false;
-    propertyRequired.disabled = false;
-    propertyValue.disabled = false;
+  let eventName = document.querySelector("#eventName").value;
+  let newEvent = new Option(eventName, eventName);
+
+  document.querySelector("#eventName").value = "";
+
+  if (eventName === "") {
+    alert("Please enter a valid Name");
+    return;
+  }
+
+  let eventObjt = {
+    type: "object",
+    properties: {
+      event: {
+        type: "string",
+        enum: [eventName],
+      },
+    },
+    required: ["event"],
+  };
+  schema.array.items.push(eventObjt);
+  eventList.add(newEvent);
+
+  updateSchemaExample(JSON.stringify(schema, undefined, 2));
+};
+
+eventList.addEventListener("change", () => {
+  btnRemoveEvent.hidden = false;
+  btnEditEvent.hidden = false;
+  btnAddProperty.hidden = false;
+
+  propertyName.disabled = false;
+  propertyType.disabled = false;
+  propertyRequired.disabled = false;
+  propertyValue.disabled = false;
 });
 
 btnRemoveEvent.onclick = function () {
+  removeEventInSchema(eventList.value, eventList.selectedIndex - 1);
+  eventList.remove(eventList.selectedIndex);
 
-    removeEventInSchema(eventList.value, eventList.selectedIndex - 1);
-    eventList.remove(eventList.selectedIndex);
-
-    if (eventList.length === 1) {
-        eventList[0].selected = true;
-        propertyType[0].selected = true;
-        propertyRequired[0].selected = true;
+  if (eventList.length === 1) {
+    eventList[0].selected = true;
+    propertyType[0].selected = true;
+    propertyRequired[0].selected = true;
 
-        btnRemoveEvent.hidden = true;
-        btnEditEvent.hidden = true;
-        btnAddProperty.hidden = true;
+    btnRemoveEvent.hidden = true;
+    btnEditEvent.hidden = true;
+    btnAddProperty.hidden = true;
 
-        propertyName.disabled = true;
-        propertyType.disabled = true;
-        propertyRequired.disabled = true;
-        propertyValue.disabled = true;
+    propertyName.disabled = true;
+    propertyType.disabled = true;
+    propertyRequired.disabled = true;
+    propertyValue.disabled = true;
 
-        propertyName.value = '';
-        propertyValue.value = '';
-    };
+    propertyName.value = "";
+    propertyValue.value = "";
+  }
 
-    updateSchemaExample(JSON.stringify(schema, undefined, 2));
-}
+  updateSchemaExample(JSON.stringify(schema, undefined, 2));
+};
 
 //Funções do popup
-const popup = document.querySelector('.popup-wrapper')
-const close = document.querySelector('.popup-close')
+const popup = document.querySelector(".popup-wrapper");
+const close = document.querySelector(".popup-close");
 
 btnEditEvent.onclick = function () {
-popup.style.display = 'block'
-}
-
-close.onclick = function() {
-    popup.style.display = 'none'
-}
+  popup.style.display = "block";
+};
 
+close.onclick = function () {
+  popup.style.display = "none";
+};
 
 //Funções de edit de evento
-const addEdit = document.querySelector('#buttonAddEventPopup')
-const cancelEdit = document.querySelector('#buttonCancelEventPopup')
+const addEdit = document.querySelector("#buttonAddEventPopup");
+const cancelEdit = document.querySelector("#buttonCancelEventPopup");
 
-addEdit.onclick = function(){
-
-    let eventNameEdit = document.querySelector('#eventNamePopup').value;       
-    let selectEvents = document.querySelectorAll('#eventSelected')[0]
+addEdit.onclick = function () {
+  let eventNameEdit = document.querySelector("#eventNamePopup").value;
+  let selectEvents = document.querySelectorAll("#eventSelected")[0];
 
-    selectEvents.children[selectEvents.selectedIndex].value = eventNameEdit
-    selectEvents.children[selectEvents.selectedIndex].innerText = eventNameEdit
+  selectEvents.children[selectEvents.selectedIndex].value = eventNameEdit; //returns the value of events selection list
+  selectEvents.children[selectEvents.selectedIndex].innerText = eventNameEdit;
 
-    schema.array.items[selectEvents.selectedIndex-1].properties.event.enum = [eventNameEdit]
+  schema.array.items[selectEvents.selectedIndex - 1].properties.event.enum = [
+    eventNameEdit,
+  ]; //returns the name to be changed
 
-    updateSchemaExample(JSON.stringify(schema, undefined, 2));
-    document.querySelector('#eventNamePopup').value = ""
-    popup.style.display = 'none'
-}
+  updateSchemaExample(JSON.stringify(schema, undefined, 2));
 
+  //clear the fields and close the popup after edits
+  document.querySelector("#eventNamePopup").value = "";
+  popup.style.display = "none";
+};
 
-cancelEdit.onclick = function() {
-    document.querySelector('#eventNamePopup').value = ""
-    popup.style.display = 'none'
-}
+cancelEdit.onclick = function () {
+  //function to cancel editing
+  document.querySelector("#eventNamePopup").value = "";
+  popup.style.display = "none";
+};

public/scripts/main.js

@@ -19,6 +19,16 @@ const propertyValidation = document.querySelector('#newPropertyValidation');
 const propertyRequired = document.querySelector('#newPropertyRequired');
 const propertyValue = document.querySelector('#newPropertyValue');
 
+
+/* Obj button */
+
+const btnAddObject = document.querySelector('#buttonAddObj')
+
+/* Add config button */
+
+const btnAddConfig = document.querySelector('#buttonAddConfig')
+const btnRemoveConfig = document.querySelector('#buttonRemoveConfig')
+
 /* Filtro para trazer somente o elemento que está marcado */
 const propertyPlace = Array.from(document.querySelectorAll("#newPropertyPlace")).filter((item) => { return item.checked })[0];
 
@@ -34,6 +44,18 @@ let schema = {
   }
 };
 
+let validator =
+  {
+    "validator": [
+      {
+        "url": "",
+        "schema_name": [""],
+        "dataLayer": "",
+        "browserClose": true,
+        "time": 0
+      }
+    ]
+  }
 /**
  * Updates the schema into the website.
  * @param {string} schema - The new schema to be updated.
@@ -42,3 +64,12 @@ let schema = {
 const updateSchemaExample = function (schema) {
   schemaParagraphy.textContent = schema;
 }
+
+/**
+ * Updates the schema into the website.
+ * @param {string} validator - The new schema to be updated.
+ * @return {string} Returns the new schema.
+ */
+const updateValidatorExample = function (validator) {
+  schemaParagraphy.textContent = validator;
+}