first-commit

src/admin-controller/admin-add-new-item.js

@@ -0,0 +1,40 @@
+import { adminServices } from '../login/service/admin-service.js';
+import { injectItemsData } from './admin-edit-item.js';
+import { togglePanelAddNew } from '../utils/toggle-admin-panels.js';
+import { createNewWatchDataObj } from '../utils/create-new-watch-data-obj.js';
+
+const addNewItemBtn = document.querySelector('[data-add-new-item-btn]');
+const addNewInputsHolder = document.querySelector(
+  '[data-add-new-inputs-holder]'
+);
+
+addNewItemBtn.addEventListener('click', () => {
+  injectItemsKey();
+  togglePanelAddNew();
+});
+
+const injectItemsKey = () => {
+  adminServices.watchItems().then((item) => {
+    //?item[0] cause i just need the keys from only one of the elements (since each-one has the same)//
+    Object.keys(item[0]).map((itemKey) => {
+      injectItemsData(addNewInputsHolder, '', itemKey, ''); //?will inject the inputs with labels and placeholders text//
+    });
+  });
+};
+
+const $form = document.querySelector('[data-add-new-item-form]');
+$form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const itemInputs = document.querySelectorAll('[data-admin-item-inputs]');
+
+  const newWatchData = createNewWatchDataObj(itemInputs);
+
+  adminServices
+    .addNewItem(newWatchData)
+    .then((respuesta) => {
+      console.info(respuesta);
+    })
+    .catch((error) =>
+      console.error(`There was an error trying to fetch data ==> ${error}`)
+    );
+});

src/admin-controller/admin-cancel-operation.js

@@ -0,0 +1,28 @@
+import {
+  togglePanelAddNew,
+  togglePanelEdit,
+} from "../utils/toggle-admin-panels.js";
+
+export const cancelAddNew = () => {
+  const $cancelAddNew = document.querySelector("[data-add-new-cancel-btn]");
+  $cancelAddNew.addEventListener("click", () => {
+    togglePanelAddNew();
+    const $addNewInputsHolder = document.querySelector(
+      "[data-add-new-inputs-holder]"
+    );
+    $addNewInputsHolder.innerHTML = ""; //?will restart all inputs back to empty so when click -edit-item-btn on
+    //?/-admin-edit-item.js-/ doenst show up same data of first item clicked//
+  });
+};
+
+export const cancelUpdate = () => {
+  const $cancelUpdate = document.querySelector("[data-cancel-update-btn]");
+  $cancelUpdate.addEventListener("click", () => {
+    togglePanelEdit();
+    const $editInputsHolder = document.querySelector(
+      "[data-edit-inputs-holder]"
+    );
+    $editInputsHolder.innerHTML = ""; //?will restart all inputs back to empty so when click -edit-item-btn on
+    //?/-admin-edit-item.js-/ doenst show up same data of first item clicked//
+  });
+};

src/admin-controller/admin-controllers.js

@@ -0,0 +1,4 @@
+import "./admin-add-new-item.js";
+import "./admin-edit-item.js";
+import "./admin-delete-item.js";
+import "./admin-cancel-operation.js";

src/admin-controller/admin-delete-item.js

@@ -0,0 +1,31 @@
+import { adminServices } from "../login/service/admin-service.js";
+
+adminServices
+  .watchItems()
+  .then(() => {
+    listenDeleteBtn();
+  })
+  .catch((error) =>
+    console.log(`There was an error trying to fetch data ${error}`)
+  );
+
+const listenDeleteBtn = () => {
+  const $deleteBtn = document.querySelectorAll("[data-delete-item-btn]");
+  $deleteBtn.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      deleteItem(btn.id);
+    });
+  });
+};
+
+const deleteItem = (itemId) => {
+  console.log("Delete item: ", itemId);
+  adminServices
+    .deleteItem(itemId)
+    .then((response) => {
+      console.log(response);
+    })
+    .catch((error) =>
+      console.log(`There was an error trying to fetch data ${error}`)
+    );
+};

src/admin-controller/admin-edit-item.js

@@ -0,0 +1,67 @@
+import { adminServices } from '../login/service/admin-service.js';
+import { togglePanelEdit } from '../utils/toggle-admin-panels.js';
+import { adminEditInputTemplates } from '../components/markup-templates/admin-edit-panel-template.js';
+import { createNewWatchDataObj } from '../utils/create-new-watch-data-obj.js';
+
+const $editInputsHolder = document.querySelector('[data-edit-inputs-holder]');
+
+export const itemToUpdate = () => {
+  const $editItemBtn = document.querySelectorAll('[data-edit-item-btn]');
+  $editItemBtn.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      getItemData(btn.id); //?passes btn's id clicked for comparison against element's id - see line 22-//
+      togglePanelEdit();
+      updateItems();
+    });
+  });
+};
+
+export const getItemData = (btnId) => {
+  adminServices
+    .watchItems()
+    .then((items) => {
+      items.forEach((item) => {
+        if (item.id === btnId) {
+          const inputValue = [];
+          Object.keys(item).map((itemKey) => {
+            Object.values(item).forEach((itemVal) => {
+              inputValue.push(itemVal); //?stores each individual itemVal temporarily//
+            });
+            injectItemsData(
+              $editInputsHolder,
+              item.id,
+              itemKey,
+              inputValue.shift()
+            ); //?the itemVal temporarily stored gets use here -when shift-//
+          });
+        }
+      });
+    })
+    .catch((error) =>
+      console.error(`There was an error trying to fetch data ==> ${error}`)
+    );
+};
+
+export const injectItemsData = (holder, itemId, itemKey, inputValue) => {
+  holder.innerHTML += adminEditInputTemplates(itemId, itemKey, inputValue);
+};
+
+export const updateItems = () => {
+  const $form = document.querySelector('[data-edit-item-form]');
+  $form.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    const itemInputs = document.querySelectorAll('[data-admin-item-inputs]');
+
+    const newWatchData = createNewWatchDataObj(itemInputs);
+
+    adminServices
+      .updateWatchData(newWatchData)
+      .then((response) => {
+        console.info('Updated', response);
+      })
+      .catch((error) =>
+        console.error(`There was an error trying to fetch data ==> ${error}`)
+      );
+  });
+};

src/admin-controller/validate-login.js

@@ -0,0 +1,44 @@
+import { clientServices } from "../login/service/client-service.js";
+
+const loginForm = document.querySelector(".modal-content");
+const inputUsername = document.querySelector("[data-username]");
+const inputUserPassword = document.querySelector("[data-user-password]");
+
+loginForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  dataToValidate();
+});
+
+const dataToValidate = () => {
+  const inputUn = inputUsername.value;
+  const inputPw = inputUserPassword.value;
+  clientServices.userList().then((users) => {
+    users.forEach((user) => {
+      //! this statement will --prevent-- <validateLogin> to run on every -user-. And it will only send the matched one//
+      if (user.username === inputUn && user.password === inputPw) {
+        const username = user.username; //store only the matched value
+        const userPassword = user.password; //store only the matched value
+        validateLogin(inputUn, inputPw, username, userPassword);
+      } else {
+        styleValidation(false); //dont clear inputs
+      }
+    });
+  });
+};
+
+const validateLogin = (inputUn, inputPw, userUn, userPw) => {
+  if (inputUn === userUn && inputPw === userPw) {
+    console.log("acces granted");
+    window.location.href = "../admin.html";
+    styleValidation(true); //clear inputs
+  }
+};
+
+const styleValidation = (boolean) => {
+  if (boolean) {
+    inputUsername.value = "";
+    inputUserPassword.value = "";
+  }
+  inputUsername.classList.toggle("input--invalid");
+  inputUserPassword.classList.toggle("input--invalid");
+};

src/assets/media/glider-roller-components-scripts-links.txt

@@ -0,0 +1,26 @@
+roller btn:
+        <div class="roller__btn--holder">
+          <i
+            aria-label="previous"
+            class="roller__btn previous fa-solid fa-chevron-left btn"
+            data-roller-btn-previous
+          ></i>
+          <i
+            aria-label="next"
+            class="roller__btn next fa-solid fa-chevron-right btn"
+            data-roller-btn-next
+          ></i>
+        </div>
+
+______
+
+glider css min:
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/glider.css"
+    />
+
+glider js:
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/glider.js"></script>

src/assets/media/media-links.txt

@@ -0,0 +1,71 @@
+VIDEOS:
+
+HOME=PAGE: https://content.rolex.com/dam/new-watches-2022/new-watches/deepsea-challenge/homepage/hss/part-2/new-rolex-deepsea-homepage-cover-02.mp4
+
+
+WATCHES COLLECTION SECTION VIDEO: https://content.rolex.com/dam/watches/hubs/all-watches/videos/hub-collection-watches-cover.mp4
+
+SEA-DWELLER: https://content.rolex.com/dam/watches/family-pages/sea-dweller/video/cover/professional-watches-sea-dweller-cover-video.mp4
+
+AIR-KING: https://content.rolex.com/dam/watches/family-pages/air-king/video/cover/professional-watches-new-air-king-2022-video.mp4
+
+GMT-MASTER-II: https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/video/cover/professional-watches-gmt-master-ii-cover-video.mp4
+
+DAY-DATE: https://content.rolex.com/dam/watches/family-pages/day-date/2022/cover/classic-watches-day-date-2022-cover-video.mp4
+
+DAYTONA: https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/video/cover/professional-watches-cosmograph-daytona-cover-video.mp4
+
+SKY-DWELLER: https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/videos/cover/new-sky-dweller-cover.mp4
+
+MILGAUSS: https://content.rolex.com/dam/watches/family-pages/milgauss/video/cover/professional-watches-milgauss-cover-video.mp4
+
+CELINE: https://content.rolex.com/dam/watches/family-pages/cellini/video/cover/classic-watches-cellini-moonphase-video.mp4
+
+
+ROLLER-IMG:
+
+SEA-DWELLER: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0005_m126603-0001-sea-dweller.jpg?imwidth=1080%202x
+
+AIR-KING: https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-air-king-family-m126900-0001.jpg?imwidth=1080%202x
+
+GMT-MASTER-II: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0004_m126711chnr-0002-gmt-master-ii.jpg?imwidth=1080%202x
+
+DAY-DATE: https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2022/homepage/roller-family/homepage-new-watches-2022-roller-watches-day-date-family-m228236-0012.jpg?imwidth=1080%202x
+
+DAYTONA: https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2021/homepage/roller/all-watches/watches_0012_m116519ln-0038-cosmograph-daytona.jpg?imwidth=1080%202x
+
+SKY-DWELLER: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0000_m326238-0009-sky-dweller.jpg?imwidth=1080%202x
+
+MILGAUSS: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0012_m116400gv-0002-milgauss.jpg?imwidth=1080%202x
+
+CELINE: https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=550,%20https://content.rolex.com/dam/new-watches-2020/homepage/roller/all-watches/watches_0014_m50535-0002-cellini-moonphase.jpg?imwidth=1080%202x
+
+
+EACH-WATCH-PAGE:
+
+SEA-DWELLER: https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/sea-dweller/family-page-sea-dweller-deepsea-beauty_m136660_0003.jpg?imwidth=1668%202x
+
+AIR=KING: https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/family-pages/air-king/family-page-air-king-beauty_m126900-0001_004.jpg?imwidth=1668%202x
+
+GMT-MASTER-II: https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/gmt-master-ii/professional-watches-gmt-master-ii_m126710blro-0001_1801ac_003.jpg?imwidth=1668%202x
+
+DAY-DATE: https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2022/new-watches/day-date-40/new-watches-2022-day-date-40-banner-ambiance.jpg?imwidth=1668%202x
+
+DAYTONA: https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cosmograph-daytona/professional-watches-cosmograph-daytona-beauty_m116500ln-0001_1601ac_004.jpg?imwidth=1668%202x
+
+SKY-DWELLER: https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1350,%20https://content.rolex.com/dam/new-watches-2020/new-sky-dweller/new-sky-dweller-oyster-case.jpg?imwidth=1668%202x
+
+MILGAUSS: https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/milgauss/family-page-milgauss-beauty_m116400GV-0002_bs_003.jpg?imwidth=1668%202x
+
+CELINE: https://content.rolex.com/dam/watches/family-pages/cellini/video/classic-watches-cellini-video-autoplay-fallback.jpg?imwidth=1350,%20https://content.rolex.com/dam/watches/family-pages/cellini/video/classic-watches-cellini-video-autoplay-fallback.jpg?imwidth=1668%202x
+
+
+
+
+
+
+
+
+
+
+

src/assets/styles/admin-page.css

@@ -0,0 +1,23 @@
+/*resets*/
+@import "resets/normalize.css";
+
+/*variables*/
+@import "variables/colors.css";
+@import "variables/fonts.css";
+
+/*animations*/
+@import "animations/animations.css";
+
+/*base*/
+@import "base/base.css";
+
+/*page-sections*/
+@import "page-sections/admin-page-styles/admin-navbar.css";
+@import "page-sections/admin-page-styles/add-new-item-btn.css";
+@import "page-sections/admin-page-styles/admin-items-section.css";
+@import "page-sections/admin-page-styles/admin-edit-modal.css";
+@import "page-sections/admin-page-styles/admin-footer.css";
+
+/*config*/
+@import "config/breakpoints/admin-items-breakpoints.css";
+@import "config/breakpoints/admin-edit-modal-breakpoints.css";

src/assets/styles/animations/animations.css

@@ -0,0 +1,23 @@
+/* BELOW - animation on all elements with class = arrow-holder/arrow*/
+@keyframes arrowAnimation {
+  0% {
+    top: 100px;
+    opacity: 1;
+  }
+  100% {
+    top: 200px;
+    opacity: 0;
+  }
+}
+/* ABOVE - animation on all elements with class = arrow-holder/arrow*/
+
+/* Add Zoom Animation */
+@-webkit-keyframes animatezoom {
+  from {-webkit-transform: scale(0)} 
+  to {-webkit-transform: scale(1)}
+}
+
+@keyframes animatezoom {
+  from {transform: scale(0)} 
+  to {transform: scale(1)}
+}