OperatingRate/OperatingRate.html at main · trent3281/OperatingRate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充電樁計算</title>
</head>

<body>
    <h1>充電樁計算</h1>
    <hr>

    <h3><label for="place-number">輸入場域編號:</label></h3>
    <input type="text" id="place-number">
    <p>目前有01、04、007、010 (03資料不完整無法查詢)</p>
    <br>

    <h3><label for="charger-number">輸入充電樁編號:</label></h3>
    <input type="text" id="charger-number">
    <br>

    <h3><label for="start-date">選擇計算日期:</label></h3>
    <label for="start-date">開始:</label>
    <input type="date" id="start-date" name="start-date">
    <label for="end-date">結束:</label>
    <input type="date" id="end-date" name="end-date">
    <br><br>
    <input type="button" value="計算" onclick="main()">
    <hr>
    <br>
    <br>

    <!-- 預設隱藏，根據數據顯示 -->
    <div id="result">
        <h3>充電樁使用總時數: <span id="total-hours"></span> hr</h3>
        <h3>稼動率: <span id="operating-rate"></span> %</h3>
    </div>
    <div id="no-data" style="display: none;">
        <h3>找不到資料</h3>
        <p>請確認場域編號與對應充電樁編號正確</p>
    </div>

    <script>
        async function main() {
            const placeNumber = document.getElementById('place-number').value;
            const chargerNumber = document.getElementById('charger-number').value;
            const startDate = document.getElementById('start-date').value;
            const endDate = document.getElementById('end-date').value;

            if (!placeNumber || !chargerNumber || !startDate || !endDate) {
                alert("請輸入場域編號、充電樁編號、計算日期");
                return;
            }

            console.log("Sending request with placeNumber:", placeNumber, "chargerNumber:", chargerNumber, "startDate:", startDate, "and endDate:", endDate);

            try {
                const response = await fetch('http://localhost:3000/fetch-data', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ placeNumber, startDate, endDate, chargerNumber })
                });

                console.log("Response status:", response.status);

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const result = await response.json();
                console.log("Response JSON:", result);

                if (result.totalHours !== undefined && result.operatingRate !== undefined) {
                    // 如果有數據，顯示結果，隱藏"找不到資料"
                    document.getElementById('total-hours').textContent = result.totalHours;
                    document.getElementById('operating-rate').textContent = result.operatingRate;
                    document.getElementById('result').style.display = 'block';
                    document.getElementById('no-data').style.display = 'none';
                } else {
                    // 如果沒有數據，顯示"找不到資料"，隱藏結果
                    document.getElementById('result').style.display = 'none';
                    document.getElementById('no-data').style.display = 'block';
                }
            } catch (error) {
                console.error('Error fetching data:', error);
                document.getElementById('result').style.display = 'none';
                document.getElementById('no-data').style.display = 'block';
            }
        }
    </script>

</body>

</html>