feat dynamic route customer reporter

Pirika-Pirilala-Popolina-Peperuto · Jan 9, 2022 · 1f2f130 · 1f2f130
1 parent b257a5b
commit 1f2f130
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 131 deletions.
diff --git a/components/HandingOrders.js b/components/HandingOrders.js
@@ -1,42 +1,10 @@
 import styled from "@emotion/styled";
 import { useEffect, useState } from "react";
 import useHandingOrdersService from "../hooks/useHandingOrdersService";
-const HandingOrders = function ({ user: userId }) {
-  //const data =  getOrderData();
-  console.log(userId);
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    if(userId == undefined) return;
-    //const sqlQuery = `SELECT * FROM orders where customer_id = '${userId}'`;
-    //console.log(sqlQuery);
-    //const url = `http://220.135.101.179/query?sql=${escape(sqlQuery)}`;
-
-    // const url = 'http://220.135.101.179/query?sql=' + escape(`\
-    // SELECT products.*
-    // FROM products
-    // LEFT JOIN order_products
-    // ON order_products.product_id = products.id
-    // LEFT JOIN orders
-    // ON orders.id = order_products.order_id
-    // WHERE orders.customer_id = 'b6b60fbf-82be-44fc-9099-b72e9e26c812'`);
-
-    const url = `http://220.135.101.179/query?sql= 
-    SELECT products.* FROM products
-    INNER JOIN order_products ON order_products.product_id = products.id
-    INNER JOIN orders
-    ON orders.id = order_products.order_id
-    WHERE orders.customer_id = 'b6b60fbf-82be-44fc-9099-b72e9e26c812'
-    `
-    console.log(url)
-    fetch(url)
-      .then((response) => response.json())
-      .then(([user]) => setUser(user));
-  }, [userId]);
-
-  console.log(user);
 
-  const { orders } = useHandingOrdersService();
+const HandingOrders = function ({ user: userId }) {
+  const orders =  useHandingOrdersService(userId);
+
   const rows = orders.map(renderOrderRows);
 
   return (
@@ -49,6 +17,7 @@ const HandingOrders = function ({ user: userId }) {
             <th>商品名稱</th>
             <th>商品數量</th>
             <th>商品價錢</th>
+            <th>商品備註</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>
@@ -59,11 +28,12 @@ const HandingOrders = function ({ user: userId }) {
 
 const renderOrderRows = function (order) {
   return (
-    <tr key = {order.no} >
-      <td>{order.no}</td>
+    <tr key = {order.id} >
+      <td>{order.id}</td>
       <td>{order.name}</td>
-      <td>{order.quantity}</td>
+      <td>1</td>
       <td>{order.price}</td>
+      <td>{order.remark}</td>
     </tr>
   );
 };
@@ -80,9 +50,14 @@ const OrdersTable = styled.table`
 
   }
 
-  td:nth-of-type(1),
+  td:nth-of-type(1){
+    width: 250px;
+    
+  }
+
   td:nth-of-type(3),
-  td:nth-of-type(4) {
+  td:nth-of-type(4),
+  td:nth-of-type(5) {
     width: 100px;
     
   }
@@ -96,7 +71,9 @@ const OrdersTable = styled.table`
   td:nth-of-type(3),
   td:nth-of-type(4),
   th:nth-of-type(3),
-  th:nth-of-type(4) {
+  th:nth-of-type(4),
+  th:nth-of-type(5),
+  td:nth-of-type(5) {
     text-align: right;
   }
 

diff --git a/components/MainIncomes.js b/components/MainIncomes.js
@@ -3,27 +3,45 @@ import Image from "next/image";
 import Chart from "./chart";
 import 'chart.js/auto';
 import { Line, Pie } from "react-chartjs-2";
+import useMainIncomesService from "../hooks/useMainIncomesService";
 
-const MainIncomes = function () {
-  return <MainIncomesPic></MainIncomesPic>;
+const MainIncomes = function ({user: userId} ) {
+
+  return <MainIncomesPic userId = {userId}></MainIncomesPic>;
 };
 
-const MainIncomesPic = function () {
+const MainIncomesPic = function ({userId}) {
+  //console.log(userId);
+  var orders = useMainIncomesService(userId)
+  console.log(orders);
+  if(orders.length >= 3) orders = orders.slice(0,3);
+  console.log(orders);
+
+  var labels = orders.map(order => order.name);
+  var labels = labels.slice(0, orders.length);
+
+  var colors = ["#FF6384", "#36A2EB", "#FFCE56"];
+  var colors = colors.slice(0, orders.length);
+
+  var price = orders.map(order => order.price);
+  //console.log(price)
+
+  //console.log(labels);
   const data = {
-    labels: ["Red", "Blue", "Yellow"],
+    labels: labels,
     datasets: [
       {
-        data: [300, 50, 100],
-        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
-        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
+        data: price,
+        backgroundColor: colors,
+        hoverBackgroundColor: colors,
       },
     ],
   };
 
 
   return (
     <Chart>
-      <h2>pie chart</h2>
+      <h2>購買金額圓餅圖</h2>
       <Pie data={data} width={400} height={400} />
     </Chart>
   );

diff --git a/components/PeriodIncomes.js b/components/PeriodIncomes.js
@@ -2,33 +2,32 @@ import styled from "@emotion/styled";
 import Chart from "./chart";
 import 'chart.js/auto';
 import { Line, Pie } from "react-chartjs-2";
-
-const PeriodIncomes = function () {
-  return <LineChart></LineChart>;
+import usePeriodIncomesService from "../hooks/usePeriodIncomesService";
+const PeriodIncomes = function ({user: userId}) {
+  return <LineChart userId = {userId}></LineChart>;
 };
 
+const LineChart = function({userId}){
+  const orders = usePeriodIncomesService(userId)
+  //console.log(orders)
+
+  var labels = orders.map(order => order.date);
+  var prices =  orders.map(order => order.price);
 
-const data = {
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
-  datasets: [
-    {
-      label: "First dataset",
-      data: [33, 53, 85, 41, 44, 65],
-      fill: true,
-      backgroundColor: "rgba(75,192,192,0.2)",
-      borderColor: "rgba(75,192,192,1)"
-    },
-    {
-      label: "Second dataset",
-      data: [33, 25, 35, 51, 54, 76],
-      fill: false,
-      borderColor: "#742774"
-    }
-  ]
-};
 
+  const data = {
+    labels: labels,
+    datasets: [
+      {
+        label: "每日消費圖",
+        data: prices,
+        fill: true,
+        backgroundColor: "rgba(75,192,192,0.2)",
+        borderColor: "rgba(75,192,192,1)"
+      }
+    ]
+  };
 
-const LineChart = function(){
   return (
     <Chart>
       <h2>line chart</h2>

diff --git a/hooks/useHandingOrdersService.js b/hooks/useHandingOrdersService.js
@@ -1,31 +1,63 @@
-const useHandingOrdersService = function () {
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
 
-  const orders = [];
-  orders.push({
-      no: "1234",
-      name: "david",
-      quantity: 2,
-      price: 87
-  })
-  orders.push({
-    no: "123",
-    name: "david",
-    quantity: 2,
-    price: 87
-})
-orders.push({
-    no: "12",
-    name: "david",
-    quantity: 2,
-    price: 87
-})
-orders.push({
-    no: "1",
-    name: "david",
-    quantity: 2,
-    price: 87
-})
-  return { orders };
+const useHandingOrdersService = function (userId) {
+  const [orders, setOrders] = useState([]);
+  useEffect(() => {
+      if(userId == undefined) return;
+      //const sqlQuery = `SELECT * FROM orders where customer_id = '${userId}'`;
+      //console.log(sqlQuery);
+      //const url = `http://220.135.101.179/query?sql=${escape(sqlQuery)}`;
+
+      // const url = 'http://220.135.101.179/query?sql=' + escape(`\
+      // SELECT products.*
+      // FROM products
+      // LEFT JOIN order_products
+      // ON order_products.product_id = products.id
+      // LEFT JOIN orders
+      // ON orders.id = order_products.order_id
+      // WHERE orders.customer_id = 'b6b60fbf-82be-44fc-9099-b72e9e26c812'`);
+
+      const url = `http://220.135.101.179/query?sql= 
+      SELECT * FROM products
+      INNER JOIN order_products ON order_products.product_id = products.id
+      INNER JOIN orders
+      ON orders.id = order_products.order_id
+      WHERE orders.customer_id = '${userId}'
+      ORDER BY created_at
+      `                                                                     
+      //console.log(url)
+      fetch(url)
+        .then((response) => response.json())
+        .then((orders) => setOrders(orders));
+    }, [userId]);
+  return(orders)
+//   const orders = [];
+//   orders.push({
+//       no: "1234",
+//       name: "david",
+//       quantity: 2,
+//       price: 87
+//   })
+//   orders.push({
+//     no: "123",
+//     name: "david",
+//     quantity: 2,
+//     price: 87
+// })
+// orders.push({
+//     no: "12",
+//     name: "david",
+//     quantity: 2,
+//     price: 87
+// })
+// orders.push({
+//     no: "1",
+//     name: "david",
+//     quantity: 2,
+//     price: 87
+// })
+  // return { orders };
 };
 
 export default useHandingOrdersService;
diff --git a/hooks/useMainIncomesService.js b/hooks/useMainIncomesService.js
@@ -1,32 +1,66 @@
-const useMainIncomeService = function () {
-    const orders = [];
-    orders.push({
-        no: "1234",
-        name: "david",
-        quantity: 2,
-        price: 87
-    })
-    orders.push({
-      no: "1234",
-      name: "david",
-      quantity: 2,
-      price: 87
-  })
-  orders.push({
-      no: "1234",
-      name: "david",
-      quantity: 2,
-      price: 87
-  })
-  orders.push({
-      no: "1234",
-      name: "david",
-      quantity: 2,
-      price: 87
-  })
-    return { orders };
-  };
+import { useEffect, useState } from "react";
+
+const useMainIncomeService = function (userId) {
+    const [orders, setOrders] = useState([]);
+    useEffect(() => {
+        if(userId == undefined) return;
+        //const sqlQuery = `SELECT * FROM orders where customer_id = '${userId}'`;
+        //console.log(sqlQuery);
+        //const url = `http://220.135.101.179/query?sql=${escape(sqlQuery)}`;
+
+        // const url = 'http://220.135.101.179/query?sql=' + escape(`\
+        // SELECT products.*
+        // FROM products
+        // LEFT JOIN order_products
+        // ON order_products.product_id = products.id
+        // LEFT JOIN orders
+        // ON orders.id = order_products.order_id
+        // WHERE orders.customer_id = 'b6b60fbf-82be-44fc-9099-b72e9e26c812'`);
+
+        const url = `http://220.135.101.179/query?sql= 
+        SELECT products.name as name, sum(price) as price FROM products
+        INNER JOIN order_products ON order_products.product_id = products.id
+        INNER JOIN orders
+        ON orders.id = order_products.order_id
+        WHERE orders.customer_id = '${userId}'
+        GROUP BY products.id
+        ORDER BY price DESC
+
+        `
+        //console.log(url)
+        fetch(url)
+          .then((response) => response.json())
+          .then((orders) => setOrders(orders));
+      }, [userId]);
+    return(orders)
+//     const orders = [];
+//     orders.push({
+//         no: "1234",
+//         name: "david",
+//         quantity: 2,
+//         price: 87
+//     })
+//     orders.push({
+//       no: "1234",
+//       name: "david",
+//       quantity: 2,
+//       price: 87
+//   })
+//   orders.push({
+//       no: "1234",
+//       name: "david",
+//       quantity: 2,
+//       price: 87
+//   })
+//   orders.push({
+//       no: "1234",
+//       name: "david",
+//       quantity: 2,
+//       price: 87
+//   })
+//     return { orders };
+};
 
-  export default useHandingOrdersService;
+  export default useMainIncomeService;