File size: 6,668 Bytes
4c9b9f7
 
 
 
 
d9e9c09
ddf3c5a
d9e9c09
 
ddf3c5a
 
ee39f4f
21c83f2
 
a5da0ae
21c83f2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0d40735
 
 
 
 
 
 
 
 
 
 
 
 
 
21c83f2
 
4c9b9f7
 
d9e9c09
 
 
 
 
 
 
 
 
 
 
350a56c
 
d9e9c09
 
 
cc58ba6
2ee4c4d
 
89f4a55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
af77883
 
 
 
 
89f4a55
 
 
 
af77883
350a56c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4c9b9f7
 
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/ico" href="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.ico">
    <title>Таблица данных</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<style>

.container {
    width: 100%;
    max-width: 100%;
}
/* Шапка */
.header {
    width: 100%;
    padding: 0px 0; /* Убраны отступы справа и слева */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}
/* Кнопки и лейбл в шапке */
.header .buttons, 
.header .label {
    margin: 0; /* Полностью убраны отступы */
}
button, #filter-clear, #download-json, #take-for-yourself {
    color: white;
    background-color: #4CAF50;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    margin: 5px;
    transition: background-color 0.3s ease;
}
button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
    background-color: #388E3C;
}

</style>
</head>
<body>

<!-- Навигационная панель -->
<nav class="navbar navbar-light bg-light w-100">
    <div class="container">
        <a class="navbar-brand" href="/online">
            <img src="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
            MackorLab
        </a>
        <form class="form-inline">
            <button id="st_onl" class="btn btn-outline-success" type="button">Онлайн</button>
            <button id="st_set" class="btn btn-outline-success" type="button">Настройки</button>
            <button id="st_plot" class="btn btn-outline-success" type="button">Графики</button>
            <button id="st_table" class="btn btn-success" type="button">Таблица</button>
        </form>
    </div>
</nav>
<button id="download-xlsx">Download XLSX</button>
<div id="data-table"></div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        fetch("/get_all_data")
            .then(response => response.json())
            .then(data => {
                const table = new Tabulator("#data-table", {
                    layout: "fitColumns",
                    pagination: "local",  // Включаем локальную пагинацию
                    paginationSize: 50,    // Количество строк на странице
                    paginationSizeSelector: [50, 100, 200], // Выбор количества строк
                    columns: [
                        { title: "ID", field: "id", sorter: "number" },
                        { title: "Неделя", field: "wek", sorter: "number" },
                        { title: "День", field: "dey", sorter: "number" },
                        { title: "Время системы", field: "time_system", sorter: "string" },
                        { title: "Уровень pH", field: "ph", sorter: "number" },
                        { title: "Уровень EC", field: "ec", sorter: "number" },
                        { title: "Темп. раствора", field: "tS", sorter: "number" },
                        { title: "Темп. воздуха", field: "tA", sorter: "number" },
                        { title: "Влажность воздуха", field: "hDm", sorter: "number" },
                        { title: "Об. вентилятора", field: "sVen", sorter: "number" },
                        { title: "pH (нас)", field: "nPh", sorter: "number" },
                        { title: "EC (нас)", field: "nEC", sorter: "number" },
                        { title: "Свет ВКЛ (нас)", field: "nLon", sorter: "string" },
                        { title: "Свет ОТКЛ (нас)", field: "nLoff", sorter: "string" },
                        { title: "Темп. воздуха (нас)", field: "nTa", sorter: "number" },
                        { title: "Насос A (нас)", field: "onA", sorter: "number" },
                        { title: "Насос B (нас)", field: "onB", sorter: "number" },
                        { title: "Насос C (нас)", field: "onC", sorter: "number" },
                        { title: "Дата записи", field: "date_time", sorter: "datetime" }
                    ],
                    data: data.map(item => ({
                        ...item,
                        time_system: `${item.v_hid}:${item.v_min}` // Объединяем v_hid и v_min через двоеточие
                    }))
                });

                // Добавляем обработчик для кнопки скачивания XLSX
                document.getElementById("download-xlsx").addEventListener("click", function () {
                    table.download("xlsx", "table_data.xlsx", { sheetName: "Данные" });
                });
            })
            .catch(error => console.error("Ошибка загрузки данных:", error));
    });
</script>

  
<script>
    document.getElementById("st_onl").addEventListener("click", function() {
        var baseUrl = window.location.origin;
        var targetUrl = baseUrl + "/online";
        window.location.href = targetUrl;
    });
</script>
<script>
    document.getElementById("st_set").addEventListener("click", function() {
        var baseUrl = window.location.origin;
        var targetUrl = baseUrl + "/settings";
        window.location.href = targetUrl;
    });
</script>
<script>
    document.getElementById("st_plot").addEventListener("click", function() {
        var baseUrl = window.location.origin;
        var targetUrl = baseUrl + "/plot_week";
        window.location.href = targetUrl;
    });
</script>
<script>
    document.getElementById("st_table").addEventListener("click", function() {
        var baseUrl = window.location.origin;
        var targetUrl = baseUrl + "/table";
        window.location.href = targetUrl;
    });
</script>

</body>
</html>