Merge pull request #148 from GerFr/145-create-new-bug-fix

finished comments
GerFr · Jun 10, 2024 · 2882460 · 2882460
2 parents e24c2f2 + 5e3c91e
commit 2882460
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 90 deletions.
diff --git a/articles.html b/articles.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-  <title>Starshop</title>
+  <title>Articles - Starshop</title>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -14,7 +14,7 @@
 
   <!-- icons -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-  <link rel="icon" href="assets/icons/stars.png">
+  <link rel="icon" href="assets/icons/cart.png">
 
   <!-- javascript -->
   <script src="js/handlebars.min-v4.7.8.js"></script>
@@ -136,9 +136,10 @@ <h2 class="display-3">Star Collection</h2>
           <a href="#nav" class="btn btn-dark border text-muted"><i class="bi bi-arrow-bar-up"></i></a>
         </div>
 
-        <a id="createBtn" href="#" class="btn btn-primary m-2 d-none" data-bs-toggle="modal"
+          <a id="createBtn" href="#" class="btn btn-primary mt-2 mx-2 d-none" data-bs-toggle="modal"
           data-bs-target="#createModal"><i class="bi bi-plus-square"></i></a>
 
+
         <form class="d-flex needs-validation mt-2" id="searchForm" novalidate>
           <div class="input-group ms-2" required>
             <input id="query" class="form-control" type="text" placeholder="Search" aria-label="Search"
@@ -322,7 +323,7 @@ <h2>Create new Item</h2>
 
                 <div class="form-floating mb-4 mt-4">
                   <textarea class="form-control" id="GeneralInformation" style="height: 140px;" required></textarea>
-                  <label for="GeneralInformation">General information:</label>
+                  <label for="GeneralInformation">Information:</label>
                   <div class="invalid-feedback">Please enter General Information</div>
                 </div>
 

diff --git a/checkout.html b/checkout.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-  <title>Checkout</title>
+  <title>Checkout - Starshop</title>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

diff --git a/confirmation.html b/confirmation.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    <title>Confirmation</title>
+    <title>Confirmation - Starshop</title>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

diff --git a/css/custom.css b/css/custom.css
@@ -7,7 +7,7 @@
 
 .cart-image-checkout {
     width: 30%;
-    height: 30%;
+    /* height: 30%; */
 }
 
 .parallax {

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    <title>Landing</title>
+    <title>Starshop</title>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -18,21 +18,57 @@
     <script src="js/vanilla.js"></script>
     <script src="js/filter.js"></script>
     <script>
+            /**
+             * Calculates the number of items in the data and finds the maximum and minimum values of the "Distance" property.
+             * @param {Array<Object>} data - An array of objects to process.
+             * @returns {Object} An object containing the length of the data array, the maximum "Distance" value, and the minimum "Distance" value.
+             */
+             function numItems(data) {
+                length = data.length
+                var maxValue = -Infinity
+                var minValue = Infinity
+                var maxValuePrice = -Infinity
+                var minValuePrice = Infinity
+                for (let i = 0; i < length; i++) {
+                    const item = data[i]
+                    if (item.hasOwnProperty("Distance")) {
+                        maxValue = Math.max(maxValue, item["Distance"])
+                        minValue = Math.min(minValue, item["Distance"])
+                    }
+                }
+                for (let i = 0; i < length; i++) {
+                    const item = data[i]
+                    if (item.hasOwnProperty("Price")) {
+                        maxValuePrice = Math.max(maxValuePrice, item["Price"])
+                        minValuePrice = Math.min(minValuePrice, item["Price"])
+                    }
+                }
+                var returnDict = { "length": length, "max": maxValue, "min": minValue, "maxPrice": maxValuePrice, "minPrice": minValuePrice }
+                return returnDict
+            }
+
         function init() {
             render({}, '[type="text/x-handlebars-navbar"]')
             render({}, '[type="text/x-handlebars-footer"]')
-            render(colors.slice(0, 7), '[type="text/x-handlebars-colors"]')
-            /**
-         * Is Run when body is fully loaded
-         * Renders the navbar and footer.
-         * Attaches an event listener to the "bestellen" button for handling support submission, uses function toSession.
-         */
-
+            render(colors, '[type="text/x-handlebars-colors"]')
             render({}, '[type="text/x-handlebars-navbar"]')
             render({}, '[type="text/x-handlebars-footer"]')
-
             $on($('#bestellen'), 'click', toSession)
 
+
+            var data = localStorage.getItem("data")
+            if (data !== null) {
+                var dict = JSON.parse(data)
+                render(numItems(dict), '[type="text/x-handlebars-template"]')
+            } else {
+                fetch('data/hygfull.json')
+                    .then(response => response.json())
+                    .then(data => {
+                        localStorage.setItem("data", JSON.stringify(data))
+                        render(numItems(data), '[type="text/x-handlebars-template"]')
+                    })
+                    .catch(error => console.error('Error fetching JSON file:', error))
+            }
         }
 
         /**
@@ -72,42 +108,9 @@
 </head>
 
 <body>
-
     <body onload="init()">
         <script>
-            /**
-             * Calculates the number of items in the data and finds the maximum and minimum values of the "Distance" property.
-             * @param {Array<Object>} data - An array of objects to process.
-             * @returns {Object} An object containing the length of the data array, the maximum "Distance" value, and the minimum "Distance" value.
-             */
-            const numItems = (data) => {
-                length = data.length
-                let maxValue = -Infinity
-                let minValue = Infinity
-                let maxValuePrice = -Infinity
-                let minValuePrice = Infinity
-                for (let i = 0; i < length; i++) {
-                    const item = data[i]
-                    if (item.hasOwnProperty("Distance")) {
-                        maxValue = Math.max(maxValue, item["Distance"])
-                        minValue = Math.min(minValue, item["Distance"])
-                    }
-                }
-                for (let i = 0; i < length; i++) {
-                    const item = data[i]
-                    if (item.hasOwnProperty("Price")) {
-                        maxValuePrice = Math.max(maxValuePrice, item["Price"])
-                        minValuePrice = Math.min(minValuePrice, item["Price"])
-                    }
-                }
-                let returnDict = { "length": length, "max": maxValue, "min": minValue, "maxPrice": maxValuePrice, "minPrice": minValuePrice }
-                return returnDict
-            }
-            // fetching the json data file
-            fetch('data/hygfull.json')
-                .then(response => response.json())
-                .then(data => render(numItems(data), '[type="text/x-handlebars-template"]'))
-                .catch(error => console.error('Error fetching JSON file:', error));
+
         </script>
         <script id="template" type="text/x-handlebars-navbar">
             {{> navbar }}
@@ -228,11 +231,11 @@ <h2 class="display-5">Our Mission</h2>
                     Our luxurious packages provide a celestial experience unlike any other, complete with a large
                     dataset and certificate of authenticity.
                 </p>
-                
+
             </div>
-            
+
             <div class="container-lg pb-4  justify-content-center">
-              <div class="border-top border-2 my-3"></div>
+                <div class="border-top border-2 my-3"></div>
                 <div class="row justify-contents-center">
                     <div class="col-md-8">
                         <div class="text-center">

diff --git a/js/admin.js b/js/admin.js
@@ -4,7 +4,6 @@
  * @returns {Array} - An array with the first element being an array of star IDs and the second being the full data array.
  */
 function getStarIdArr() {
-    // if data json item is not found in local storage, it is fetched locally and set
     if (localStorage.getItem("data") === null) {
         fetch('data/hygfull.json')
             .then(response => response.json())
@@ -14,7 +13,6 @@ function getStarIdArr() {
             })
             .catch(error => console.error('Error fetching JSON file:', error));
     }
-    // the complete star data (as a dictionary) aswell as all the StarIDs (as an array) are initiated for further use in the admin functions
     const data = JSON.parse(localStorage.getItem("data"));
     const StarIDarr = [];
     for (let i = 0; i < data.length; i++) {
@@ -29,38 +27,29 @@ function getStarIdArr() {
  * @param {number} ID - The ID of the star to be edited.
  */
 function IndexEdit(ID) {
-    // stores data and StarId array in local variables
     var temp = getStarIdArr()
     const StarIDarr = temp[0]
     const data = temp[1]
-    // adds eventlistener to the edit form used for editing an existing Star Item 
     var form = document.getElementById('editForm_' + ID);
     form.addEventListener('submit', event => {
-        // checks if form is vlaidated, if no, the form is not submitted, if yes the form gets submitted
         if (!form.checkValidity()) {
             event.preventDefault()
             event.stopPropagation()
         }
         else {
-            // gets all the required values out of the form using loop over the item key list
-            // for this to work, the key names have to be present in the individual Form IDs
             var StarIndex = StarIDarr.indexOf(ID)
             const stringList = ["HD", "ProperName", "Spectrum", "ColorIndex", "GeneralInformation", "Color"];
             for (const key in data[StarIndex]) {
-                // StarId is skipped because it is an uneditable value 
                 if (key == "StarID") {
                     continue
                 }
-                // filters out all the values that have to be saved as Strings 
                 if (stringList.includes(key)) {
                     data[StarIndex][key] = document.getElementById(key + "_" + ID).value
                 }
-                // filter for all the remaining Values that have to be added to the data as a number
                 else {
                     data[StarIndex][key] = Number(document.getElementById(key + "_" + ID).value)
                 }
             }
-            // data is saved and the location is reloaded so that the updated data can be shown
             localStorage.setItem("data", JSON.stringify(data))
             location.reload()
         }
@@ -73,42 +62,33 @@ function IndexEdit(ID) {
  * Handles the submission and validation of a create form for a new star entry.
  */
 function create() {
-    // stores data and StarId array in local variables
     var temp = getStarIdArr()
     const StarIDarr = temp[0]
     const data = temp[1]
-    // adds eventlistener to the create form used for creating a new Star Item 
     const form = document.getElementById('createForm')
     form.addEventListener('submit', event => {
-        // checks if form is vlaidated, if no, the form is not submitted, if yes the form gets submitted
         if (!form.checkValidity()) {
             event.preventDefault()
             event.stopPropagation()
         }
         else {
             const IdInput = document.getElementById('StarID');
             const stringList = ["HD", "ProperName", "Spectrum", "ColorIndex", "GeneralInformation", "Color"];
-            // Checks if the new ID already exists and throws an error message in that case
             if (StarIDarr.includes(Number(IdInput.value))) {
                 alert("ERROR:\nDuplicate StarId");
                 setTimeout(function () { location.reload(); }, 0)
             }
             else {
-                // gets all the required values out of the form using loop over the item key list
-                // for this to work, the key names have to be present in the individual Form IDs
                 var NewStar = {}
                 for (const key in data[0]) {
                     if (stringList.includes(key)) {
-                        // filters out all the values that have to be saved as Strings 
                         NewStar[key] = document.getElementById(key).value
                     }
                     else {
-                        // filter for all the remaining Values that have to be added to the data as a number
                         NewStar[key] = Number(document.getElementById(key).value)
                     }
                 }
                 data.push(NewStar)
-                // data is saved and the location is reloaded so that the updated data can be shown
                 localStorage.setItem("data", JSON.stringify(data))
                 location.reload()
             }
@@ -122,14 +102,11 @@ function create() {
  * @param {number} ID - The ID of the star to be deleted.
  */
 function deleteIdIndex(ID) {
-    // stores data and StarId array in local variables
     var temp = getStarIdArr()
     const StarIDarr = temp[0]
     const data = temp[1]
-    // removes Item based on its ID usin the index of the ID on StarIDarr
     const StarIndex = StarIDarr.indexOf(ID)
     data.splice(StarIndex, 1)
-    // data is saved and the location is reloaded so that the updated data can be shown
     localStorage.setItem("data", JSON.stringify(data))
     location.reload()
 }

diff --git a/js/pagination.js b/js/pagination.js
@@ -1,36 +1,43 @@
-
+/**
+ * jump to page 1 
+ */
 function goToStartPage() {
     const params = new URLSearchParams(window.location.search)
     params.set("page", 1)
     history.replaceState({}, "", `${window.location.pathname}?${params}`)
     location.reload()
 }
+/**
+ * jump to page given in parameter
+ * @param {*} page 
+ */
 function goToEndPage(page) {
     const params = new URLSearchParams(window.location.search)
     params.set("page", page)
     history.replaceState({}, "", `${window.location.pathname}?${params}`)
     location.reload()
 }
-
+/**
+ * logic for activating and deactivating pagination buttons
+ * @param {*} page last possible page
+ * @param {*} max last possible page
+ */
 function paginationCheck(page, max) {
     if (page <= 1) {
         document.getElementById('decrement').classList.add('d-none')
         document.getElementById('increment').classList.remove('d-none')
-        document.getElementById('centralpage').classList.add('d-none')
         document.getElementById('startPage').classList.add('d-none')
         document.getElementById('endPage').classList.remove('d-none')
     }
     if (page > 1 && page < max) {
         document.getElementById('decrement').classList.remove('d-none')
         document.getElementById('increment').classList.remove('d-none')
-        document.getElementById('centralpage').classList.remove('d-none')
         document.getElementById('startPage').classList.remove('d-none')
         document.getElementById('endPage').classList.remove('d-none')
     }
     if (page >= max && max != 1) {
         document.getElementById('decrement').classList.remove('d-none')
         document.getElementById('increment').classList.add('d-none')
-        document.getElementById('centralpage').classList.add('d-none')
         document.getElementById('startPage').classList.remove('d-none')
         document.getElementById('endPage').classList.add('d-none')
     }
@@ -39,7 +46,9 @@ function paginationCheck(page, max) {
         document.getElementById('endPage').classList.add('d-none')
     }
 }
-
+/**
+ * decrements page by one 
+ */
 function decrement() {
     const params = new URLSearchParams(window.location.search)
     var page = Number(params.get("page"))
@@ -50,7 +59,9 @@ function decrement() {
         window.location.reload()
     }
 }
-
+/**
+ * increments page by one 
+ */
 function increment() {
     const dataString = localStorage.getItem("data")
     const dataLenght = JSON.parse(dataString).length
@@ -70,7 +81,12 @@ function increment() {
         window.location.reload()
     }
 }
-
+/**
+ * returns start and end Index of items for current page and sets page in URL
+ * @param {*} page current page
+ * @param {*} pageLength amount of items on page
+ * @returns {object} [start, end, pageNum]
+ */
 function getPageNumbers(page, pageLength) {
     var start
     var end