Implement slider range - fixes #9

wise-team · Sep 14, 2018 · d58f848 · d58f848
1 parent 76e6455
commit d58f848
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/src/components/form/inputs/WeightInput.vue b/src/components/form/inputs/WeightInput.vue
@@ -13,17 +13,20 @@
                 <font-awesome-icon :icon="appendIcon" />
             </b-input-group-text>
             <div class="range-input-container form-control">
-                <div class="level">
+                <div class="level" style="position: relative; width: 100%; height: 2rem;">
                     <input
                         type="range" class="form-control-range"
                         id="weight-input"
                         :state="state"
                         v-model="weight"
                         :disabled="!enabled"
-                        min="-10000"
-                        max="10000"
+                        :min="sliderRange[0]"
+                        :max="sliderRange[1]"
                         step="100"
                         list="tickmarks"
+                        :style="'position: absolute; top: 0; height: 100%; '
+                            + 'left: ' + ((sliderRange[0] + 10000) / 200) + '%; '
+                            + 'width: ' + (((sliderRange[1] + 10000) / 200) - ((sliderRange[0] + 10000) / 200)) + '%;'"
                     />
                     <datalist id="tickmarks">
                         <option value="-10000">-100%</option>
@@ -42,11 +45,13 @@
 </template>
 
 <script lang="ts">
+import * as _ from "lodash";
 import Vue from "vue";
 import FontAwesomeIcon from "@fortawesome/vue-fontawesome";
 import faWeight from "@fortawesome/fontawesome-free-solid/faWeight";
 
 import { Actions } from "../../../store/actions";
+import { Rule, Ruleset, WeightRule } from "steem-wise-core";
 
 export default Vue.extend({
     props: ["enabled"],
@@ -95,6 +100,27 @@ export default Vue.extend({
                 this.valueText = value;
             },
         },
+        selectedRuleset(): Ruleset | undefined {
+            if (this.$store.state.rules.rulesets
+                 && this.$store.state.rules.rulesets.length
+                 && this.$store.state.rules.rulesets.length > 0
+                 && this.$store.state.selectedRulesetName) {
+                     const selectedRuleset: Ruleset [] = this.$store.state.rules.rulesets.filter((ruleset: Ruleset) => ruleset.name  === this.$store.state.selectedRulesetName)
+                if (selectedRuleset.length > 0) return selectedRuleset[0];
+            }
+            return undefined;
+        },
+        sliderRange(): [number, number] {
+            console.log(JSON.stringify(this.selectedRuleset));
+            if (this.selectedRuleset && this.selectedRuleset.rules) {
+                const weightRuleArr: WeightRule [] = this.selectedRuleset.rules
+                    .filter(rule => rule.rule === Rule.Type.Weight).map(rule => rule as WeightRule);
+                if (weightRuleArr.length > 0) {
+                    return [weightRuleArr[0].min, weightRuleArr[0].max];
+                }
+            }
+            return [-10000, 10000];
+        },
     },
     filters: {
         weightDisplayFilter(input: string): string {
@@ -110,6 +136,10 @@ export default Vue.extend({
 </script>
 
 <style>
+.range-input-container {
+    background: linear-gradient(90deg, rgba(255,255,255,1) 48%, rgba(107,17,255,1) 50%, rgba(255,255,255,1) 52%);
+}
+
 .range-input-container input {
     width: 100%;
     height: 2rem;