From ea0b091c8a5692101af03f2a1199eeafaac5ba87 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Fri, 12 Dec 2025 10:57:38 +1000 Subject: [PATCH] table added --- src/components/data.pug | 306 ++++++++++++++++++++++++++++++++++++++ src/components/mixins.pug | 174 ++++++++++++++++------ src/index.js | 3 +- src/pages/table.pug | 203 +++---------------------- src/styles/table.styl | 6 + 5 files changed, 461 insertions(+), 231 deletions(-) create mode 100644 src/components/data.pug create mode 100644 src/styles/table.styl diff --git a/src/components/data.pug b/src/components/data.pug new file mode 100644 index 0000000..8b09531 --- /dev/null +++ b/src/components/data.pug @@ -0,0 +1,306 @@ +block variables +- + var navbarItems = { + Home: './index.html', + Embedded: './embeded_details.html', + OpenCV: './opencv_details.html', + Photography: './photography-details.html', + Table: './table.html', + Institute: './images/institute.png' + }; + + var smallCards = [ + { + header: 'Заголовок', + text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.', + image: require('../images/16x10/3d-printer.jpeg'), + imageAlt: '3D Printer', + link: '#', + }, + { + header: 'BLHeli ESCs', + text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.', + image: require('../images/16x10/blheli-esc.jpeg'), + imageAlt: 'BLHeli ESC', + link: '#', + }, + { + header: 'Raspberry Pi Nano', + text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.', + image: require('../images/16x10/rpi-nano.jpeg'), + imageAlt: 'Raspberry Pi Nano', + link: '#', + }, + { + header: 'Smart Thermostats', + text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.', + image: require('../images/16x10/thermostat.jpeg'), + imageAlt: 'Smart Thermostat', + link: '#', + } + ]; + + var galleryImages= [ + { src: require('../images/sqarucos.png'), alt: 'ESP32'}, + { src: require('../images/sqstm32.png'), alt: 'Arduino'}, + { src: require('../images/sqesp32.png'), alt: 'STM32'} + ]; + + var locationFilters = [ + { id: 'loc_kitchen', value: 'Kitchen', label: 'Kitchen' }, + { id: 'loc_living', value: 'Living Room', label: 'Living Room' }, + { id: 'loc_balcony', value: 'Balcony', label: 'Balcony' }, + { id: 'loc_bedroom', value: 'Bedroom', label: 'Bedroom' } + ]; + + var sensorTypeFilters = [ + { id: 'type_xiaomi', value: 'Xiaomi', label: 'Xiaomi' }, + { id: 'type_bmp220', value: 'Bmp220', label: 'Bmp220' }, + { id: 'type_scd30', value: 'Scd30(Internal)', label: 'Scd30(Internal)' }, + { id: 'type_bmp280', value: 'Bmp280', label: 'Bmp280' } + ]; + + var sortOptions = [ + { value: '', label: '-- None --' }, + { value: 'SensorID', label: 'SensorID' }, + { value: 'Timestamp', label: 'Time' }, + { value: 'BatteryLevel', label: 'BatteryLevel' }, + { value: 'Temperature', label: 'Temperature' }, + { value: 'Humidity', label: 'Humidity' } + ]; + + var axisOptions = [ + { id: 'x_time', value: 'Time', label: 'Time', checked: true }, + { id: 'x_battery', value: 'BatteryLevel', label: 'BatteryLevel', checked: false }, + { id: 'x_temperature', value: 'Temperature', label: 'Temperature', checked: false }, + { id: 'x_humidity', value: 'Humidity', label: 'Humidity', checked: false } + ]; + + var valueOptions = [ + { id: 'val_temperature', value: 'AverageTemperature', label: 'Average Temperature', checked: true }, + { id: 'val_humidity', value: 'Humidity', label: 'Average Humidity', checked: false }, + { id: 'val_battery', value: 'BatteryLevel', label: 'Average BatteryLevel', checked: false } + ] + + var sensorData = [ + { + sensorId: 'TEMP-001', + location: 'Balcony', + timestamp: '2025-10-03T03:41:50Z', + temperature: 19.4, + tempDifference: -0.2, + sensorType: 'Bmp220', + batteryLevel: 95, + humidity: 38.1, + lastCalibrationDate: '2025-07-26' + }, + { + sensorId: 'TEMP-003', + location: 'Bedroom', + timestamp: '2025-10-03T03:42:46Z', + temperature: 18.2, + tempDifference: -0.1, + sensorType: 'Xiaomi', + batteryLevel: 75, + humidity: 45.5, + lastCalibrationDate: '2025-07-21' + }, + { + sensorId: 'TEMP-004', + location: 'Balcony', + timestamp: '2025-10-03T03:43:48Z', + temperature: 24.1, + tempDifference: 0.1, + sensorType: 'Xiaomi', + batteryLevel: 72, + humidity: 50.5, + lastCalibrationDate: '2025-08-30' + }, + { + sensorId: 'TEMP-001', + location: 'Balcony', + timestamp: '2025-10-03T03:44:34Z', + temperature: 19.1, + tempDifference: -0.3, + sensorType: 'Bmp220', + batteryLevel: 95, + humidity: 56.5, + lastCalibrationDate: '2025-07-26' + }, + { + sensorId: 'TEMP-006', + location: 'Kitchen', + timestamp: '2025-10-03T03:45:46Z', + temperature: 22.8, + tempDifference: 0.0, + sensorType: 'Scd30(Internal)', + batteryLevel: 80, + humidity: 41.4, + lastCalibrationDate: '2025-09-10' + }, + { + sensorId: 'TEMP-010', + location: 'Balcony', + timestamp: '2025-10-03T03:46:18Z', + temperature: 21.7, + tempDifference: 0.5, + sensorType: 'Scd30(Internal)', + batteryLevel: 79, + humidity: 59.8, + lastCalibrationDate: '2025-08-07' + }, + { + sensorId: 'TEMP-006', + location: 'Balcony', + timestamp: '2025-10-03T03:47:05Z', + temperature: 22.7, + tempDifference: -0.1, + sensorType: 'Scd30(Internal)', + batteryLevel: 80, + humidity: 36.1, + lastCalibrationDate: '2025-09-10' + }, + { + sensorId: 'TEMP-006', + location: 'Bedroom', + timestamp: '2025-10-03T03:48:13Z', + temperature: 22.9, + tempDifference: 0.2, + sensorType: 'Scd30(Internal)', + batteryLevel: 80, + humidity: 56.1, + lastCalibrationDate: '2025-09-10' + }, + { + sensorId: 'TEMP-005', + location: 'Living Room', + timestamp: '2025-10-03T03:49:03Z', + temperature: 24.4, + tempDifference: 0.4, + sensorType: 'Bmp180', + batteryLevel: 91, + humidity: 30.1, + lastCalibrationDate: '2025-08-07' + }, + { + sensorId: 'TEMP-001', + location: 'Kitchen', + timestamp: '2025-10-03T03:50:24Z', + temperature: 19.1, + tempDifference: 0.0, + sensorType: 'Bmp220', + batteryLevel: 95, + humidity: 64.8, + lastCalibrationDate: '2025-07-26' + }, + { + sensorId: 'TEMP-008', + location: 'Living Room', + timestamp: '2025-10-03T03:51:12Z', + temperature: 21.9, + tempDifference: -0.1, + sensorType: 'Scd30(Internal)', + batteryLevel: 92, + humidity: 36.0, + lastCalibrationDate: '2025-08-02' + }, + { + sensorId: 'TEMP-009', + location: 'Balcony', + timestamp: '2025-10-03T03:51:46Z', + temperature: 22.3, + tempDifference: 0.0, + sensorType: 'Xiaomi', + batteryLevel: 76, + humidity: 74.0, + lastCalibrationDate: '2025-09-17' + }, + { + sensorId: 'TEMP-003', + location: 'Kitchen', + timestamp: '2025-10-03T03:52:23Z', + temperature: 18.4, + tempDifference: 0.2, + sensorType: 'Xiaomi', + batteryLevel: 75, + humidity: 45.2, + lastCalibrationDate: '2025-07-21' + }, + { + sensorId: 'TEMP-010', + location: 'Living Room', + timestamp: '2025-10-03T03:53:44Z', + temperature: 21.8, + tempDifference: 0.1, + sensorType: 'Scd30(Internal)', + batteryLevel: 79, + humidity: 36.3, + lastCalibrationDate: '2025-08-07' + }, + { + sensorId: 'TEMP-001', + location: 'Kitchen', + timestamp: '2025-10-03T03:54:46Z', + temperature: 18.7, + tempDifference: -0.4, + sensorType: 'Bmp220', + batteryLevel: 95, + humidity: 44.3, + lastCalibrationDate: '2025-07-26' + }, + { + sensorId: 'TEMP-006', + location: 'Bedroom', + timestamp: '2025-10-03T03:55:24Z', + temperature: 23.3, + tempDifference: 0.4, + sensorType: 'Scd30(Internal)', + batteryLevel: 80, + humidity: 55.9, + lastCalibrationDate: '2025-09-10' + }, + { + sensorId: 'TEMP-002', + location: 'Kitchen', + timestamp: '2025-10-03T03:55:57Z', + temperature: 17.7, + tempDifference: -0.5, + sensorType: 'Scd30(Internal)', + batteryLevel: 93, + humidity: 70.2, + lastCalibrationDate: '2025-08-30' + }, + { + sensorId: 'TEMP-002', + location: 'Balcony', + timestamp: '2025-10-03T03:57:05Z', + temperature: 17.4, + tempDifference: -0.3, + sensorType: 'Scd30(Internal)', + batteryLevel: 93, + humidity: 66.7, + lastCalibrationDate: '2025-08-30' + }, + { + sensorId: 'TEMP-009', + location: 'Living Room', + timestamp: '2025-10-03T03:58:28Z', + temperature: 22.6, + tempDifference: 0.3, + sensorType: 'Xiaomi', + batteryLevel: 76, + humidity: 56.4, + lastCalibrationDate: '2025-09-17' + }, + { + sensorId: 'TEMP-004', + location: 'Bedroom', + timestamp: '2025-10-03T03:59:51Z', + temperature: 24.3, + tempDifference: 0.2, + sensorType: 'Xiaomi', + batteryLevel: 72, + humidity: 47.3, + lastCalibrationDate: '2025-08-30' + } + ]; diff --git a/src/components/mixins.pug b/src/components/mixins.pug index a410238..ba2ddad 100644 --- a/src/components/mixins.pug +++ b/src/components/mixins.pug @@ -1,49 +1,4 @@ -- - const navbarItems = { - Home: './index.html', - Embedded: './embeded_details.html', - OpenCV: './opencv_details.html', - Photography: './photography-details.html', - Table: './table.html', - Institute: './images/institute.png' - }; - - const smallCards = [ - { - header: 'Заголовок', - text: '3D printers are versatile tools used for creating prototypes, custom parts, and artistic designs. They work by layering materials.', - image: require('../images/16x10/3d-printer.jpeg'), - imageAlt: '3D Printer', - link: '#', - }, - { - header: 'BLHeli ESCs', - text: 'BLHeli ESCs are electronic speed controllers designed for drones, offering smooth and precise motor control.', - image: require('../images/16x10/blheli-esc.jpeg'), - imageAlt: 'BLHeli ESC', - link: '#', - }, - { - header: 'Raspberry Pi Nano', - text: 'Raspberry Pi Nano is a compact computer ideal for learning, prototyping, and IoT projects. It is highly energy-efficient.', - image: require('../images/16x10/rpi-nano.jpeg'), - imageAlt: 'Raspberry Pi Nano', - link: '#', - }, - { - header: 'Smart Thermostats', - text: 'Smart thermostats help regulate home temperatures efficiently, saving energy and enhancing comfort with automation.', - image: require('../images/16x10/thermostat.jpeg'), - imageAlt: 'Smart Thermostat', - link: '#', - } - ]; - - const galleryImages= [ - { src: require('../images/sqarucos.png'), alt: 'ESP32'}, - { src: require('../images/sqstm32.png'), alt: 'Arduino'}, - { src: require('../images/sqesp32.png'), alt: 'STM32'} - ] +include data.pug mixin navbarMixin(selectedItem) .navbar @@ -67,4 +22,129 @@ mixin infoCardsMinxin() mixin galleryMixin() each img in galleryImages - img.gallery__image(src=img.src alt=img.alt) \ No newline at end of file + img.gallery__image(src=img.src alt=img.alt) + +mixin filtersMixin() + details.filters + summary.filters__summary Filters + form.filters__form + fieldset.filters__fieldset + .filter-group + i.filter-group__label + b Location + br + .filter-group__items + each filter in locationFilters + input.filter-group__checkbox(type="checkbox" id=filter.id name="location" value=filter.value) + | #{filter.label} + br + + .filter-group + i.filter-group__label + b Sensor Type + br + .filter-group__items + each filter in sensorTypeFilters + input.filter-group__checkbox(type="checkbox" id=filter.id name="sensor_type" value=filter.value) + | #{filter.label} + br + + .filter-group + i.filter-group__label + b Numeric Values + br + .filter-group__range + | Temperature from: + input.filter-group__input(type="number" name="temp_min" placeholder="20") + | to: + input.filter-group__input(type="number" name="temp_max" placeholder="30") + br + | Humidity from: + input.filter-group__input(type="number" name="humidity_min" placeholder="40") + | to: + input.filter-group__input(type="number" name="humidity_max" placeholder="60") + br + + .filter-group + i.filter-group__label + b Device Specific Filters + br + .filter-group__items + | Sensor Name: + input.filter-group__input(type="text" name="sensor_name") + br + | Days Since Calibration (max): + input.filter-group__input(type="number" name="calibration_days" placeholder="30") + br + + .filter-group + i.filter-group__label + b Measurement Period + br + .filter-group__dates + | From: + input.filter-group__input(type="date" name="date_from") + br + | To: + input.filter-group__input(type="date" name="date_to") + br + + .filter-group__buttons + input.filter-group__button.filter-group__button--submit(type="submit" value="Apply Filters") + input.filter-group__button.filter-group__button--reset(type="reset" value="Reset Filters") + +mixin sortingMixin() + - const sortLevels = ['1', '2', '3']; + details.sorting + summary.sorting__summary Sortings + form.sorting__form + fieldset.sorting__fieldset + each level in sortLevels + .sort-level + i.sort-level__label + b Sort Level #{level} + br + label.sort-level__field-label(for=`sort${level}`) Field: + select.sort-level__select(id=`sort${level}` name=`sort${level}`) + each option in sortOptions + option(value=option.value) #{option.label} + label.sort-level__reverse-label(for=`sort${level}_reverse`) + input.sort-level__checkbox(type="checkbox" id=`sort${level}_reverse` name=`sort${level}_reverse`) + | Reverse + br + if level === '3' + input.sort-level__submit(type="submit" value="Sort") + else + br + +mixin graphMixin() + details.graph + summary.graph__summary Graph + form.graph__form + fieldset.graph__fieldset + .axis-group + i.axis-group__label + b X axis + br + .axis-group__options + each option in axisOptions + if option.checked + input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value checked) + else + input.axis-group__radio(type="radio" id=option.id name="x_axis" value=option.value) + label.axis-group__option-label(for=option.id) #{option.label} + br + + .values-group + i.values-group__label + b Values + br + .values-group__options + each option in valueOptions + if option.checked + input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value checked) + else + input.values-group__checkbox(type="checkbox" id=option.id name="values" value=option.value) + label.values-group__option-label(for=option.id) #{option.label} + br + button.values-group__button(type="submit" id="build_graph" name="build_graph") Build \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9905d3e..3012f9c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,3 @@ import './styles/main.styl' -import './styles/details.styl' \ No newline at end of file +import './styles/details.styl' +import './styles/table.styl' \ No newline at end of file diff --git a/src/pages/table.pug b/src/pages/table.pug index d3b3328..be1bf7a 100644 --- a/src/pages/table.pug +++ b/src/pages/table.pug @@ -1,188 +1,25 @@ include ../components/mixins.pug +include ../components/data.pug head - title table + title table body - +navbarMixin("Table") - - .table-controls - details.filters - summary.filters__summary Filters - form.filters__form - fieldset.filters__fieldset - .filter-group - i.filter-group__label - b Location - br - .filter-group__items - input.filter-group__checkbox(type="checkbox" id="loc_kitchen" name="location" value="Kitchen") - | Kitchen - br - input.filter-group__checkbox(type="checkbox" id="loc_living" name="location" value="Living Room") - | Living Room - br - input.filter-group__checkbox(type="checkbox" id="loc_balcony" name="location" value="Balcony") - | Balcony - br - input.filter-group__checkbox(type="checkbox" id="loc_bedroom" name="location" value="Bedroom") - | Bedroom - br - - .filter-group - i.filter-group__label - b Sensor Type - br - .filter-group__items - input.filter-group__checkbox(type="checkbox" id="type_xiaomi" name="sensor_type" value="Xiaomi") - | Xiaomi - br - input.filter-group__checkbox(type="checkbox" id="type_bmp220" name="sensor_type" value="Bmp220") - | Bmp220 - br - input.filter-group__checkbox(type="checkbox" id="type_scd30" name="sensor_type" value="Scd30(Internal)") - | Scd30(Internal) - br - input.filter-group__checkbox(type="checkbox" id="type_bmp280" name="sensor_type" value="Bmp280") - | Bmp280 - br - - .filter-group - i.filter-group__label - b Numeric Values - br - .filter-group__range - | Temperature from: - input.filter-group__input(type="number" name="temp_min" placeholder="20") - | to: - input.filter-group__input(type="number" name="temp_max" placeholder="30") - br - | Humidity from: - input.filter-group__input(type="number" name="humidity_min" placeholder="40") - | to: - input.filter-group__input(type="number" name="humidity_max" placeholder="60") - br - - .filter-group - i.filter-group__label - b Device Specific Filters - br - .filter-group__items - | Sensor Name: - input.filter-group__input(type="text" name="sensor_name") - br - | Days Since Calibration (max): - input.filter-group__input(type="number" name="calibration_days" placeholder="30") - br - - .filter-group - i.filter-group__label - b Measurement Period - br - .filter-group__dates - | From: - input.filter-group__input(type="date" name="date_from") - br - | To: - input.filter-group__input(type="date" name="date_to") - br - - .filter-group__buttons - input.filter-group__button.filter-group__button--submit(type="submit" value="Apply Filters") - input.filter-group__button.filter-group__button--reset(type="reset" value="Reset Filters") - - details.sorting - summary.sorting__summary Sortings - form.sorting__form - fieldset.sorting__fieldset - .sort-level - i.sort-level__label - b Sort Level 1 - br - label.sort-level__field-label(for="sort1") Field: - select.sort-level__select(id="sort1" name="sort1") - option(value="") -- None -- - option(value="SensorID") SensorID - option(value="Timestamp") Time - option(value="BatteryLevel") BatteryLevel - option(value="Temperature") Temperature - option(value="Humidity") Humidity - label.sort-level__reverse-label(for="sort1_reverse") - input.sort-level__checkbox(type="checkbox" id="sort1_reverse" name="sort1_reverse") - | Reverse - br - br - - .sort-level - i.sort-level__label - b Sort Level 2 - br - label.sort-level__field-label(for="sort2") Field: - select.sort-level__select(id="sort2" name="sort2") - option(value="") -- None -- - option(value="SensorID") SensorID - option(value="Timestamp") Time - option(value="BatteryLevel") BatteryLevel - option(value="Temperature") Temperature - option(value="Humidity") Humidity - label.sort-level__reverse-label(for="sort2_reverse") - input.sort-level__checkbox(type="checkbox" id="sort2_reverse" name="sort2_reverse") - | Reverse - br - br - - .sort-level - i.sort-level__label - b Sort Level 3 - br - label.sort-level__field-label(for="sort3") Field: - select.sort-level__select(id="sort3" name="sort3") - option(value="") -- None -- - option(value="SensorID") SensorID - option(value="Timestamp") Time - option(value="BatteryLevel") BatteryLevel - option(value="Temperature") Temperature - option(value="Humidity") Humidity - label.sort-level__reverse-label(for="sort3_reverse") - input.sort-level__checkbox(type="checkbox" id="sort3_reverse" name="sort3_reverse") - | Reverse - br - input.sort-level__submit(type="submit" value="Sort") - - details.graph - summary.graph__summary Graph - form.graph__form - fieldset.graph__fieldset - .axis-group - i.axis-group__label - b X axis - br - .axis-group__options - input.axis-group__radio(type="radio" id="x_time" name="x_axis" value="Time" checked) - label.axis-group__option-label(for="x_time") Time - br - input.axis-group__radio(type="radio" id="x_battery" name="x_axis" value="BatteryLevel") - label.axis-group__option-label(for="x_battery") BatteryLevel - br - input.axis-group__radio(type="radio" id="x_temperature" name="x_axis" value="Temperature") - label.axis-group__option-label(for="x_temperature") Temperature - br - input.axis-group__radio(type="radio" id="x_humidity" name="x_axis" value="Humidity") - label.axis-group__option-label(for="x_humidity") Humidity - br - - .values-group - i.values-group__label - b Values - br - .values-group__options - input.values-group__checkbox(type="checkbox" id="val_temperature" name="values" value="AverageTemperature" checked) - label.values-group__option-label(for="val_temperature") Average Temperature - br - input.values-group__checkbox(type="checkbox" id="val_humidity" name="values" value="Humidity") - label.values-group__option-label(for="val_humidity") Average Humidity - br - input.values-group__checkbox(type="checkbox" id="val_battery" name="values" value="BatteryLevel") - label.values-group__option-label(for="val_battery") Average BatteryLevel - br - button.values-group__button(type="submit" id="build_graph" name="build_graph") Build \ No newline at end of file + +navbarMixin("Table") + + .table-controls + +filtersMixin() + +sortingMixin() + +graphMixin() + + table.table + tbody.table-content + each dataItem,index in sensorData + if index == 0 + tr.table-content__table-header + each value,header in dataItem + th #{header} + tr.table-content__table-row + each value,header in dataItem + td #{value} + diff --git a/src/styles/table.styl b/src/styles/table.styl new file mode 100644 index 0000000..81003fd --- /dev/null +++ b/src/styles/table.styl @@ -0,0 +1,6 @@ +.table, .table-content *, .table-content + border: 1px solid black; + border-collapse: collapse; + +.table-content__table-row:nth-child(2n) + background: #F0FFF0; \ No newline at end of file