From 73ea28eab61e338cd2850bf87166eeafdae76905 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Fri, 12 Dec 2025 11:35:56 +1000 Subject: [PATCH] finished table controls --- src/components/mixins.pug | 90 +++++++++++++++++++++------------------ src/index.js | 2 +- src/styles/index.styl | 12 +++--- src/styles/main.styl | 2 - 4 files changed, 56 insertions(+), 50 deletions(-) delete mode 100644 src/styles/main.styl diff --git a/src/components/mixins.pug b/src/components/mixins.pug index ba2ddad..84574ce 100644 --- a/src/components/mixins.pug +++ b/src/components/mixins.pug @@ -4,10 +4,10 @@ mixin navbarMixin(selectedItem) .navbar each navbarUrl,navbarName in navbarItems if navbarName == selectedItem - a.navbar__link__wrapper(href=navbarUrl) + a.navbar__link-wrapper(href=navbarUrl) .navbar__item.navbar__item_selected #{navbarName} else - a.navbar__link__wrapper(href=navbarUrl) + a.navbar__link-wrapper(href=navbarUrl) .navbar__item #{navbarName} mixin infoCardsMinxin() @@ -36,7 +36,7 @@ mixin filtersMixin() .filter-group__items each filter in locationFilters input.filter-group__checkbox(type="checkbox" id=filter.id name="location" value=filter.value) - | #{filter.label} + span #{filter.label} br .filter-group @@ -46,7 +46,7 @@ mixin filtersMixin() .filter-group__items each filter in sensorTypeFilters input.filter-group__checkbox(type="checkbox" id=filter.id name="sensor_type" value=filter.value) - | #{filter.label} + span #{filter.label} br .filter-group @@ -54,14 +54,14 @@ mixin filtersMixin() b Numeric Values br .filter-group__range - | Temperature from: + span Temperature from: input.filter-group__input(type="number" name="temp_min" placeholder="20") - | to: + span to: input.filter-group__input(type="number" name="temp_max" placeholder="30") br - | Humidity from: + span Humidity from: input.filter-group__input(type="number" name="humidity_min" placeholder="40") - | to: + span to: input.filter-group__input(type="number" name="humidity_max" placeholder="60") br @@ -70,10 +70,10 @@ mixin filtersMixin() b Device Specific Filters br .filter-group__items - | Sensor Name: + span Sensor Name: input.filter-group__input(type="text" name="sensor_name") br - | Days Since Calibration (max): + span Days Since Calibration (max): input.filter-group__input(type="number" name="calibration_days" placeholder="30") br @@ -82,10 +82,10 @@ mixin filtersMixin() b Measurement Period br .filter-group__dates - | From: + span From: input.filter-group__input(type="date" name="date_from") br - | To: + span To: input.filter-group__input(type="date" name="date_to") br @@ -93,6 +93,24 @@ mixin filtersMixin() 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 sortLevel(level) + .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`) + span Reverse + br + if level === '3' + input.sort-level__submit(type="submit" value="Sort") + else + br + mixin sortingMixin() - const sortLevels = ['1', '2', '3']; details.sorting @@ -100,22 +118,23 @@ mixin sortingMixin() 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 + +sortLevel(level) + +mixin graphXOption(option) + 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 + +mixin graphYOption(option) + 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 mixin graphMixin() details.graph @@ -128,23 +147,12 @@ mixin graphMixin() 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 - + +graphXOption(option) .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 + +graphYOption(option) 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 3012f9c..a9ff478 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,3 @@ -import './styles/main.styl' +import './styles/index.styl' import './styles/details.styl' import './styles/table.styl' \ No newline at end of file diff --git a/src/styles/index.styl b/src/styles/index.styl index b48aff7..d642d35 100644 --- a/src/styles/index.styl +++ b/src/styles/index.styl @@ -1,4 +1,5 @@ -// Миксины для переиспользования +item_h=3em; + double-border() border-top double thick silver border-bottom double thick silver @@ -18,26 +19,25 @@ grid-responsive(columns) grid-template-columns columns grid-template-rows 1fr -// Основные стили .navbar double-border() font-size 0 grid-responsive(repeat(7, min-content)) justify-items start - &__link__wrapper + &__link-wrapper color black text-decoration none &__item display inline-block width max-content - height 3em - line-height 3em + height item_h + line-height item_h text-align center vertical-align middle padding 0 10px - margin 0 10px + margin @padding overflow hidden text-overflow ellipsis font-size medium diff --git a/src/styles/main.styl b/src/styles/main.styl deleted file mode 100644 index b171e46..0000000 --- a/src/styles/main.styl +++ /dev/null @@ -1,2 +0,0 @@ -// Импорт стилей для главной страницы -@import 'index.styl' \ No newline at end of file