WebApp-test/index.html at main · fjramaker/WebApp-test · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Table</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h1 class="mb-4">Data Table</h1>
    <div class="mb-3">
      <!-- Upload, Download and Save Buttons -->
      <button id="uploadBtn" class="btn btn-primary">Upload</button>
      <button id="downloadBtn" class="btn btn-success ms-2">Download</button>
      <button id="saveBtn" class="btn btn-secondary ms-2">Save</button>
      <!-- Hidden file input for upload -->
      <input type="file" id="fileInput" style="display: none;" accept=".csv">
    </div>

    <div class="table-responsive">
      <table class="table table-bordered" id="dataTable">
        <thead>
          <tr>
            <th>Test Voltage</th>
            <th>Terminal Res.(NL)</th>
            <th>Speed*(NL)</th>
            <th>Current*</th>
            <th>Torque</th>
            <th>△T_winding</th>
            <th>△T_stator</th>
            <th>△T_rotor</th>
            <th>△T_ambient</th>
            <th>Induction</th>
          </tr>
        </thead>
        <tbody id="dataTableBody">
          <!-- One default row with input fields -->
          <tr>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // When Upload button is clicked, trigger the hidden file input
    document.getElementById("uploadBtn").addEventListener("click", function() {
      document.getElementById("fileInput").click();
    });

    // Handle file selection and process CSV data
    document.getElementById("fileInput").addEventListener("change", uploadData);

    // Bind Download and Save button clicks to their functions
    document.getElementById("downloadBtn").addEventListener("click", downloadData);
    document.getElementById("saveBtn").addEventListener("click", saveData);

    // Save data: collect inputs from each row and log to console (simulated save)
    function saveData() {
      let tableData = [];
      const table = document.getElementById("dataTable");
      const rows = table.querySelectorAll("tbody tr");
      rows.forEach(function(row) {
        let rowData = [];
        row.querySelectorAll("input").forEach(function(input) {
          rowData.push(input.value);
        });
        tableData.push(rowData);
      });
      console.log("Saved data:", tableData);
      alert("Data saved! Check the console for output.");
    }

    // Download data: convert table data to CSV and download the file
    function downloadData() {
      let csv = "";
      const table = document.getElementById("dataTable");
      const headers = Array.from(table.querySelectorAll("thead th"))
                           .map(th => th.textContent.trim());
      csv += headers.join(",") + "\n";

      const rows = table.querySelectorAll("tbody tr");
      rows.forEach(function(row) {
        let rowData = Array.from(row.querySelectorAll("input"))
                           .map(input => input.value);
        csv += rowData.join(",") + "\n";
      });

      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "tableData.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    // Upload data: read a CSV file and repopulate the table body with the file contents
    function uploadData(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function(e) {
        const contents = e.target.result;
        const rows = contents.split("\n").filter(row => row.trim() !== "");
        const tableBody = document.getElementById("dataTableBody");
        tableBody.innerHTML = ""; // Clear existing rows

        // Check if the first row is a header row (based on column count)
        const headerCount = document.getElementById("dataTable")
                              .querySelectorAll("thead th").length;
        let dataRows = rows;
        if (rows[0].split(",").length === headerCount) {
          dataRows = rows.slice(1); // Ignore the header row
        }

        dataRows.forEach(function(row) {
          const cols = row.split(",");
          const tr = document.createElement("tr");
          cols.forEach(function(col) {
            const td = document.createElement("td");
            const input = document.createElement("input");
            input.type = "text";
            input.value = col.trim();
            input.classList.add("form-control");
            td.appendChild(input);
            tr.appendChild(td);
          });
          tableBody.appendChild(tr);
        });
      };
      reader.readAsText(file);
    }
  </script>
</body>
</html>