Commit 7b5cd659 authored by Joachim Schunk's avatar Joachim Schunk

use bulma-form-with-addons for value-builder

parent f1bb7d2a
Pipeline #45195 passed with stages
in 1 minute and 35 seconds
......@@ -15,6 +15,13 @@
[:html {:line-height 1.2}]
[:input {:color "inherit"}]
;; [:.shifttotop {:margin-top "-1rem"}]
[:.expo-container {:display "grid"
:grid-template-columns "13.0rem 3.0rem"
:grid-column-gap "0.3em"}
[:.base {:grid-column "1 / 2"
:grid-row "2 / 4"}]
[:.expo {:grid-column "2 / 3"
:grid-row "1 / 3"}]]
[:.expo-input-container {:display "grid"
;;;:grid-template-rows "auto 5.0rem auto"
:grid-template-columns "6.0rem 2.0rem 3.0rem 4.0rem 1fr"
......
......@@ -103,110 +103,35 @@
[:td [latex-span latex-string]]
[:td [latex-span (str "\\left[{" units-latex-string "}\\right]")]]]))
(defn value-builder [{:keys [phys-val path number-key with-oom change-fn collats-fn]}]
(defn value-builder [{:keys [phys-val path number-key change-fn collats-fn]}]
(let [num-key (or number-key :number)
significand (get-in phys-val [num-key :significand])
german-significand (if (string? significand) (replace significand "." ",") significand)
oom (get-in phys-val [num-key :order-of-magnitude])]
[:<>
[:div.row
[:div.col.font-plus [:b "Wert: "]]]
(if with-oom
[:div.row
[:div.col.s12
[:div.expo-input-container
[:div.mantisse
[ui/input-text
{
:value german-significand
:label "Mantisse"
:field-class "inline"
:input-class "center-align"
:on-change (fn [val] (when-let [v (parse-float val)]
(if collats-fn
(change-fn (conj path num-key :significand) v (collats-fn))
(change-fn (conj path num-key :significand) v))))}]]
[:div.dot.center-align
[ui/input-text {
:value "\u22c5"
:field-class "inline"
:input-class "center-align no-border"
:disabled true
:on-change #(identity nil)}]]
[:div.basis
[ui/input-text {
:value "10"
:label "Basis"
:field-class "inline"
:input-class "center-align"
:disabled true
:on-change #(identity nil)}]]
[:div.exponent
[ui/input-text {
:value oom
:label "Exponent"
:field-class "inline"
:input-class "center-align"
:on-change (fn [val] (when-let [v (parse-int val)]
(if collats-fn
(change-fn (conj path num-key :order-of-magnitude) v (collats-fn))
(change-fn (conj path num-key :order-of-magnitude) v))))}]]]]]
[:div.row
[:div.col
[ui/input-text {
:value german-significand
:label "Zahlenwert"
:field-class "inline"
:input-class "right-align"
:on-change (fn [val] (when-let [v (parse-float val)]
(change-fn (conj path num-key :significand) v (collats-fn))))}]]])]))
(defn number-builder [{:keys [phys-val path number-key change-fn collats-fn]}]
(let [num-key (or number-key :number)
significand (get-in phys-val [num-key :significand])
german-significand (if (string? significand) (replace significand "." ",") significand)
oom (get-in phys-val [num-key :order-of-magnitude])]
[:<>
[:div.row
[:div.col.font-plus [:b "Wert: "]]]
[:div.row
[:div.col.s12
[:div.expo-input-container
[:div.mantisse
[ui/input-text {
:value german-significand
:label "Mantisse"
:field-class "inline"
:input-class "center-align"
:on-change (fn [val] (when-let [v (parse-float val)]
(if collats-fn
(change-fn (conj path num-key :significand) v (collats-fn))
(change-fn (conj path num-key :significand) v))))}]]
[:div.dot.center-align
[ui/input-text {
:value "\u22c5"
:field-class "inline"
:input-class "center-align no-border"
:disabled true
:on-change #(identity nil)}]]
[:div.basis
[ui/input-text {
:value "10"
:label "Basis"
:field-class "inline"
:input-class "center-align"
:disabled true
:on-change #(identity nil)}]]
[:div.exponent
[ui/input-text {
:value oom
:label "Exponent"
:field-class "inline"
:input-class "center-align"
:on-change (fn [val] (when-let [v (parse-int val)]
(if collats-fn
(change-fn (conj path num-key :order-of-magnitude) v (collats-fn))
(change-fn (conj path num-key :order-of-magnitude) v))))}]]]]]]))
[:div.columns.is-multiline.is-gapless
[:div.column.is-full
[:h5.title.is-5 "Wert (wissenschaftliche Notation): "]]
[:div.column.is-full
[:div.expo-container
[:div.base
[ui/field {:addons? true}
[ui/input-text
{:value german-significand
:input-class "has-text-right"
:expanded? true
:on-change (fn [val] (when-let [v (parse-float val)]
(if collats-fn
(change-fn (conj path num-key :significand) v (collats-fn))
(change-fn (conj path num-key :significand) v))))}]
[ui/button {:static? true} "\u22c5"]
[ui/button {:static? true} "10"]]]
[:div.expo
[ui/field
[ui/input-text {:value oom
:on-change (fn [val] (when-let [v (parse-int val)]
(if collats-fn
(change-fn (conj path num-key :order-of-magnitude) v (collats-fn))
(change-fn (conj path num-key :order-of-magnitude) v))))}]]]]]]))
(defn units-builder [{:keys [units path change-fn collats-fn used-units]}]
(reagent/with-let [cur-unit (reagent/atom {:prefix nil :unit nil :expo nil})
......@@ -233,30 +158,27 @@
[:span " Ungültige Einheit"]])]
[:div.row
[:div.col.s2.expo-padding
[ui/input-text {
:value (:prefix @cur-unit)
:label "Präfix"
:field-class "inline"
:input-class "right-align"
:input-size 3
:on-change (fn [val] (when-let [v (parse-prefix val)] (swap! cur-unit assoc :prefix v)))}]]
[ui/input-text {:value (:prefix @cur-unit)
:label "Präfix"
:field-class "inline"
:input-class "right-align"
:input-size 3
:on-change (fn [val] (when-let [v (parse-prefix val)] (swap! cur-unit assoc :prefix v)))}]]
[:div.col.s2.expo-padding
[ui/input-text {
:value (:unit @cur-unit)
:label "Einheit"
:field-class "inline"
:autocomplete {:options (into {} (map #(vector % nil) unit-options))}
:input-class "center-align"
:input-size 4
:on-change (fn [val] (when-let [v (parse-unit val)] (swap! cur-unit assoc :unit v)))}]]
[ui/input-text {:value (:unit @cur-unit)
:label "Einheit"
:field-class "inline"
:autocomplete {:options (into {} (map #(vector % nil) unit-options))}
:input-class "center-align"
:input-size 4
:on-change (fn [val] (when-let [v (parse-unit val)] (swap! cur-unit assoc :unit v)))}]]
[:div.col.s2
[ui/input-text {
:value (:expo @cur-unit)
:label "Exponent"
:field-class "inline"
:input-class "left-align"
:input-size 2
:on-change (fn [val] (when-let [v (parse-int val)] (swap! cur-unit assoc :expo v)))}]]
[ui/input-text {:value (:expo @cur-unit)
:label "Exponent"
:field-class "inline"
:input-class "left-align"
:input-size 2
:on-change (fn [val] (when-let [v (parse-int val)] (swap! cur-unit assoc :expo v)))}]]
[:div.col.s2.expo-padding
[:a.button.is-info
{:on-click (fn []
......
......@@ -106,7 +106,6 @@
[value-builder {:phys-val (get-in authoring [id-key :calc-mapping var-sign])
:path [:authoring id-key :calc-mapping var-sign]
:number-key :number
:with-oom with-oom
:change-fn change-fn
:collats-fn collats-fn}]
[units-builder {:units (get-in calc-mapping [var-sign :units])
......
......@@ -61,7 +61,6 @@
:add-fn add-fn}]
[value-builder {:phys-val @val-state-atom
:path []
:with-oom with-oom
:change-fn (fn [path val _] (swap! val-state-atom assoc-in path val))}]
[units-builder {:units units
:path path
......
(ns lernmeister.components.modal-editor.editors.number
(:require [lernmeister.components.modal-editor.builders :refer [number-builder]]
(:require [lernmeister.components.modal-editor.builders :refer [value-builder]]
[lernmeister.components.modal-editor.renderers :refer [number-renderer]]))
(defn number-editor [{:keys [subject path change-fn collats-fn]}]
(let [phys-val (get-in subject path)]
[:<>
[number-renderer {:phys-val phys-val}]
[number-builder {:phys-val phys-val
:path path
:change-fn change-fn
:collats-fn collats-fn}]]))
[value-builder {:phys-val phys-val
:path path
:change-fn change-fn
:collats-fn collats-fn}]
[number-renderer {:phys-val phys-val}]]))
......@@ -9,7 +9,6 @@
[:<>
[value-builder {:phys-val phys-val
:path path
:with-oom with-oom
:change-fn change-fn
:collats-fn collats-fn}]
[value-renderer {:phys-val phys-val
......
......@@ -42,7 +42,6 @@
[value-builder {:phys-val (get-in subject number-path)
:path number-path
:number-key val-key
:with-oom with-oom
:change-fn change-fn
:collats-fn collats-fn}]
[value-select {:val-key val-key
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment