From 9e9f3bb581c62d14ba907fd93c6f0b5128694e91 Mon Sep 17 00:00:00 2001 From: "Billy.Zheng" Date: Sun, 12 May 2024 13:00:42 +0800 Subject: [PATCH] Use toolcool-range-slider to select range. --- package.json | 3 ++- src/actions/universities/index.cr | 6 +++--- src/components/universities/main.cr | 24 +++++++++++++++--------- src/js/app.js | 26 +++++++++++--------------- yarn.lock | 5 +++++ 5 files changed, 36 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 6304d3e..a8d130c 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "@rails/ujs": "^7.1.0", "htmx.org": "^1.9.12", "iosselect": "^1.1.5", - "modern-normalize": "^2.0.0" + "modern-normalize": "^2.0.0", + "toolcool-range-slider": "^4.0.28" }, "scripts": { "heroku-postbuild": "yarn prod", diff --git a/src/actions/universities/index.cr b/src/actions/universities/index.cr index b99226b..2638f0e 100644 --- a/src/actions/universities/index.cr +++ b/src/actions/universities/index.cr @@ -16,8 +16,8 @@ class Universities::Index < BrowserAction click_on = query_params["click_on"]?.presence batch_level = query_params["batch_level"]?.presence filter_by_column = query_params["filter_by_column"]?.presence - min_value = query_params["min_value"]?.presence - max_value = query_params["max_value"]?.presence + min_value = query_params["range_min_value"]?.presence + max_value = query_params["range_max_value"]?.presence page = query_params["page"]?.presence query = UniversityQuery.new @@ -204,7 +204,7 @@ class Universities::Index < BrowserAction all_name_inputs = [ "q", "is_985", "is_211", "is_good", "order_by", "batch_level", "filter_by_column", - "min_value", "max_value", + "range_min_value", "range_max_value", ] if request.headers["HX-Trigger"]? diff --git a/src/components/universities/main.cr b/src/components/universities/main.cr index 526cbb1..40daaaa 100644 --- a/src/components/universities/main.cr +++ b/src/components/universities/main.cr @@ -76,16 +76,22 @@ class Universities::Main < BaseComponent end private def render_range_input - div class: "col m8", style: "margin-right: 25px" do - para class: "range-field" do - span "#{context.request.query_params["min_value"]?}", id: "min_value" - input(type: "range", min: range_min.to_s, max: range_max.to_s, id: "range_min", name: "min_value", value: context.request.query_params["min_value"]?.to_s) - end - - para class: "range-field" do - span "#{context.request.query_params["max_value"]?}", id: "max_value" - input(type: "range", min: range_min.to_s, max: range_max.to_s, id: "range_max", name: "max_value", value: context.request.query_params["max_value"]?.to_s) + para class: "range-field col m8", style: "margin-right: 120px; margin-left: 30px;" do + span "#{context.request.query_params["range_min_value"]?}", id: "span_range_min" + tag( + "tc-range-slider", + "slider-width": "800px", + id: "range_slider", + min: range_min.to_s, + max: range_max.to_s, + value1: context.request.query_params["range_min_value"]?.to_s, + value2: context.request.query_params["range_max_value"]?.to_s, + "generate-labels": true + ) do end + span "#{context.request.query_params["range_max_value"]?}", id: "span_range_max" + input type: "hidden", id: "range_min", name: "range_min_value", value: context.request.query_params["range_min_value"]?.to_s + input type: "hidden", id: "range_max", name: "range_max_value", value: context.request.query_params["range_max_value"]?.to_s end div class: "col m1 valign-wrapper" do diff --git a/src/js/app.js b/src/js/app.js index 961f6c3..33e534a 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -6,6 +6,7 @@ // Rails.start(); import { M } from '@materializecss/materialize'; import { iosProvinces, iosCitys } from './areaData_v2.js'; +import 'toolcool-range-slider'; import IosSelect from "iosselect"; import 'htmx.org'; window.htmx = require('htmx.org'); @@ -57,23 +58,18 @@ function init () { // specify options here }); - // const requestUrl = request.headers.get("HX-Current-URL"); - // const batch_level = new URL(requestUrl).searchParams.get("batch_level"); + const slider = document.getElementById("range_slider") || false - const min_slider = document.getElementById("range_min") || false - if (min_slider) { - min_slider.oninput = function() { - var min_value = document.getElementById("min_value") - min_value.innerHTML = this.value; - } - } + if (slider) { + slider.addEventListener('change', (evt) => { + var min = evt.detail.value1 + var max = evt.detail.value2 - const max_slider = document.getElementById("range_max") || false - if (max_slider) { - max_slider.oninput = function() { - var max_value = document.getElementById("max_value") - max_value.innerHTML = this.value; - } + document.getElementById("range_min").value = min + document.getElementById("span_range_min").innerText = min + document.getElementById("range_max").value = max + document.getElementById("span_range_max").innerText = max + }); } } diff --git a/yarn.lock b/yarn.lock index 3c19da2..1e7118d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5403,6 +5403,11 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== +toolcool-range-slider@^4.0.28: + version "4.0.28" + resolved "https://registry.yarnpkg.com/toolcool-range-slider/-/toolcool-range-slider-4.0.28.tgz#98ba6db1738c6be4c5af338550b4597a97987dcf" + integrity sha512-DDZAEJ9hItgSbGWY6DkjvMoUBLZG9J3X6qvBzAruvGzcPwrZKRt3EB2ixPqFmrpEy98SyyM+WZbKL0+TR4fOkg== + tslib@^2.0.3: version "2.6.2" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"