after mentoring

push new repository after mentoring
Kampus-Merdeka-Software-Engineering · Jun 5, 2024 · a30e184 · a30e184
1 parent 90caaa0
commit a30e184
Show file tree

Hide file tree

Showing 5 changed files with 351 additions and 77 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -418,6 +418,92 @@ footer{
   font-weight: 400;
   margin: 0px 5px;
 }
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #e1dede;
+}
+
+header {
+  background-color: var(--blue);
+  color: #fff;
+  padding: 1rem;
+  text-align: center;  
+
+
+}
+/* .container {
+  margin: 2rem auto;
+  max-width: 1200px;
+  background-color: #fff;
+  padding: 2rem;
+} */
+
+.filters {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+  gap: 10px;
+}
+
+.filters select, .filters input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.stats {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+
+  background-color: var(--blue);
+  color: #fff;
+  padding: 1rem;
+  text-align: center;
+  width: 45%;
+}
+
+
+.content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.product-list {
+  grid-column: span 2;
+}
+
+.product-list table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.product-list th, .product-list td {
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: left;
+}
+
+.transaction-type, .total-revenue, .sales-category, .sales {
+  background-color: white;
+  padding: 20px;
+  border-radius: 4px;
+
+}
+
+footer{
+  background-color: #dddce3;
+  color: #0a0332;
+  text-align: center;
+
+
+}
 
 /* ====================== Responsive Design ========================== */
 @media (max-width: 991px) {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -81,55 +81,166 @@ function transactionCategory(datas) {
   return result;
 }
 
+function validateData(datas){
+  let validatedData = []
+  for (let i = 0; i < datas.length; i++) {
+      datas[i]["RCoil"] = toString(datas[i]["RCoil"])
+      datas[i]["RPrice"] = toString(datas[i]["RPrice"])
+      datas[i]["RQty"] = toString(datas[i]["RQty"])
+      datas[i]["MCoil"] = toString(datas[i]["MCoil"])
+      datas[i]["MPrice"] = toString(datas[i]["MPrice"])
+      datas[i]["MQty"] = toString(datas[i]["MQty"])
+      datas[i]["LineTotal"] = toString(datas[i]["LineTotal"])
+      datas[i]["TransTotal"] = toString(datas[i]["TransTotal"])
+      validatedData.push(datas[i])
+  }
+  return datas
+}
+
 // function buildBarChart(data, title, id) 
 
 // function buildDataTables(data, id)
 
 function fetchData(filtered = null) {
-  if (filtered != null) {
-    fetch("./assets/json/sales_vendingmachine.json").
-    then(response => response.json()).
-    then(datas => {
-      // average revenue
-      avgRevenue = avgRevenue(datas);
-      console.log(avgRevenue);
-
-      // prepare bar chart for transaction type -> transTotal
-      totalByTypeData = transactionTotalbyType(datas);
-      console.log(totalByTypeData);
-      // prepare bar chart for transaction monthly
-      monthlyData = transactionMonthly(datas);
-      console.log(monthlyData);
-
-      // prepare bar chart total sales by category
-      categoryData = transactionCategory(datas);
-      console.log(categoryData);
+  fetch("./assets/json/sales_vendingmachine.json").
+  then(response => response.json()).
+  then(datas => {
+
+    if (filtered != null) {
+    // function to update the data with filter
+    }
+
+    // average revenue
+    avgRevenue = avgRevenue(datas);
+    console.log(avgRevenue);
+
+    // prepare bar chart for transaction type -> transTotal
+    totalByTypeData = transactionTotalbyType(datas);
+    console.log(totalByTypeData);
+
+    // prepare bar chart for transaction monthly
+    monthlyData = transactionMonthly(datas);
+    console.log(monthlyData);
+
+    // prepare bar chart total sales by category
+    categoryData = transactionCategory(datas);
+    console.log(categoryData);
+
+    const table = new DataTable("#example", {
+      stateSave: true,
+      stateLoadParams: function (settings, data) {
+        data.search.search = "";
+      },
+      responsive: true,
+      columns: [
+        { data: "Status" },
+        { data: "Device_ID" },
+        { data: "Location" },
+        { data: "Machine" },
+        { data: "Product" },
+        { data: "Category" },
+        { data: "Transaction" },
+        { data: "TransDate" },
+        { data: "Type" },
+        { data: "RCoil" },
+        { data: "RPrice" },
+        { data: "RQty" },
+        { data: "MCoil" },
+        { data: "MPrice" },
+        { data: "MQty" },
+        { data: "LineTotal" },
+        { data: "TransTotal" },
+        { data: "Prcd_Date" },
+      ],
     });
-  }else{
-    fetch("./assets/json/sales_vendingmachine.json").
-    then(response => response.json()).
-    then(datas => {
-      // average revenue
-      avgRevenue = avgRevenue(datas);
-      console.log(avgRevenue);
-
-      // prepare bar chart for transaction type -> transTotal
-      totalByTypeData = transactionTotalbyType(datas);
-      console.log(totalByTypeData);
-      // prepare bar chart for transaction monthly
-      monthlyData = transactionMonthly(datas);
-      console.log(monthlyData);
-
-      // prepare bar chart total sales by category
-      categoryData = transactionCategory(datas);
-      console.log(categoryData);
+
+    datas.forEach((item) => {
+      table.row.add({
+        Status: item.Status,
+        Device_ID: item.Device_ID,
+        Location: item.Location,
+        Machine: item.Machine,
+        Product: item.Product,
+        Category: item.Category,
+        Transaction: item.Transaction,
+        TransDate: item.TransDate,
+        Type: item.Type,
+        RCoil: item.RCoil,
+        RPrice: item.RPrice,
+        RQty: item.RQty,
+        MCoil: item.MCoil,
+        MPrice: item.MPrice,
+        MQty: item.MQty,
+        LineTotal: item.LineTotal,
+        TransTotal: item.TransTotal,
+        Prcd_Date: item.Prcd_Date,
+      }).draw();
     });
-  }
+  });
 }
 
 // onchange event for select
 // filtered by product
 
 document.addEventListener("DOMContentLoaded", function () {
-  fetchData();
+  fetchData(null);
 });
+
+// Untuk Table
+// document.addEventListener("DOMContentLoaded", () => {
+//   const table = new DataTable("#example", {
+//     stateSave: true,
+//     stateLoadParams: function (settings, data) {
+//       data.search.search = "";
+//     },
+//     responsive: true,
+//     columns: [
+//       { data: "Status" },
+//       { data: "Device_ID" },
+//       { data: "Location" },
+//       { data: "Machine" },
+//       { data: "Product" },
+//       { data: "Category" },
+//       { data: "Transaction" },
+//       { data: "TransDate" },
+//       { data: "Type" },
+//       { data: "RCoil" },
+//       { data: "RPrice" },
+//       { data: "RQty" },
+//       { data: "MCoil" },
+//       { data: "MPrice" },
+//       { data: "MQty" },
+//       { data: "LineTotal" },
+//       { data: "TransTotal" },
+//       { data: "Prcd_Date" },
+//     ],
+//   });
+
+//   fetch("assets/json/sales_vendingmachine.json")
+//   .then((res) => res.json())
+//   .then((data) => {
+//     data.forEach((item) => {
+//       table.row.add({
+//         Status: item.Status,
+//         Device_ID: item.Device_ID,
+//         Location: item.Location,
+//         Machine: item.Machine,
+//         Product: item.Product,
+//         Category: item.Category,
+//         Transaction: item.Transaction,
+//         TransDate: item.TransDate,
+//         Type: item.Type,
+//         RCoil: item.RCoil,
+//         RPrice: item.RPrice,
+//         RQty: item.RQty,
+//         MCoil: item.MCoil,
+//         MPrice: item.MPrice,
+//         MQty: item.MQty,
+//         LineTotal: item.LineTotal,
+//         TransTotal: item.TransTotal,
+//         Prcd_Date: item.Prcd_Date,
+//       }).draw();
+//     });
+//   })
+//   .catch((error) => console.error("Error fetching data:", error));
+// });