Commit 7e02001f authored by Bruno Burke's avatar Bruno Burke 😁

fix new components field/control in exercise-types-edit and content-elements-edit

parent 078f4015
Pipeline #45373 passed with stages
in 1 minute and 42 seconds
......@@ -137,7 +137,9 @@
(reagent/create-class
{:reagent-render
(fn [{:keys [name disabled? on-change checked? label]}]
[:label.checkbox.black-text {:for id}
[:label.checkbox.black-text
{:for id
:disabled disabled?}
[:input {:type "checkbox"
:id id
:name name
......
......@@ -39,31 +39,31 @@
[ui/collapsible
{:elements
(doall
(for [bc bblock/categories]
(let [bcname (:name bc)
expanded? (get @expaned_categories bcname)]
^{:key (str "block-category-" bcname)}
{:label bcname
:content
[:ul
(doall
(for [b (:blocks bc)
;;:when (js/Blockly.Blocks.hasOwnProperty (str (:id b)))
(for [bc bblock/categories]
(let [bcname (:name bc)
expanded? (get @expaned_categories bcname)]
^{:key (str "block-category-" bcname)}
{:label bcname
:content
[:ul
(doall
(for [b (:blocks bc)
;;:when (js/Blockly.Blocks.hasOwnProperty (str (:id b)))
]
(let [id (:id b)
checked? ((set @blocks) (:id b))]
^{:key (str "block-category-" bcname "-" id "-" checked?)}
[:li
[ui/checkbox
{:checked? checked?
:on-change #(if checked?
(swap! blocks disj id)
(swap! blocks (comp set conj) id))
:label id}]
]
(let [id (:id b)
checked? ((set @blocks) (:id b))]
^{:key (str "block-category-" bcname "-" id "-" checked?)}
[:li
[ui/checkbox
:checked? checked?
:on-change #(if checked?
(swap! blocks disj id)
(swap! blocks (comp set conj) id))
:label id]
]
)))
]
}
)))
]
}
)))
}]
]
......@@ -77,41 +77,41 @@
[:h2.subtitle "Workspace"]
[:div.form-group
[ui/checkbox
:on-change #(swap! workspace-settings update :toolbox-categories not)
:checked? (:toolbox-categories @workspace-settings)
:label "Toolbox Kategorien"][:br]
{:on-change #(swap! workspace-settings update :toolbox-categories not)
:checked? (:toolbox-categories @workspace-settings)
:label "Toolbox Kategorien"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :collapse not)
:checked? (:collapse @workspace-settings)
:label "Collapse"][:br]
{:on-change #(swap! workspace-settings update :collapse not)
:checked? (:collapse @workspace-settings)
:label "Collapse"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :trashcan not)
:checked? (:trashcan @workspace-settings)
:label "Mülleimer"][:br]
{:on-change #(swap! workspace-settings update :trashcan not)
:checked? (:trashcan @workspace-settings)
:label "Mülleimer"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :scrollbars not)
:checked? (:scrollbars @workspace-settings)
:label "Scrollbars"][:br]
{:on-change #(swap! workspace-settings update :scrollbars not)
:checked? (:scrollbars @workspace-settings)
:label "Scrollbars"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :sounds not)
:checked? (:sounds @workspace-settings)
:label "Sounds"][:br]
{:on-change #(swap! workspace-settings update :sounds not)
:checked? (:sounds @workspace-settings)
:label "Sounds"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :grid not)
:checked? (:grid @workspace-settings)
:label "Grid"][:br]
{:on-change #(swap! workspace-settings update :grid not)
:checked? (:grid @workspace-settings)
:label "Grid"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :zoom not)
:checked? (:zoom @workspace-settings)
:label "Zoom"][:br]
{:on-change #(swap! workspace-settings update :zoom not)
:checked? (:zoom @workspace-settings)
:label "Zoom"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :functions not)
:checked? (:functions @workspace-settings)
:label "Functions"][:br]
{:on-change #(swap! workspace-settings update :functions not)
:checked? (:functions @workspace-settings)
:label "Functions"}][:br]
[ui/checkbox
:on-change #(swap! workspace-settings update :variables not)
:checked? (:variables @workspace-settings)
:label "Variables"]
{:on-change #(swap! workspace-settings update :variables not)
:checked? (:variables @workspace-settings)
:label "Variables"}]
]
]
)
......@@ -142,7 +142,7 @@
))))))}]
[:div.buttons
[:a.button.is-primary {:on-click #(do
(swap! prepare? not))}
(swap! prepare? not))}
[:span.icon [:i.fas.fa-times]]
[:span "Verwerfen"]]
[:a.button.is-success {:on-click #(do
......
......@@ -34,12 +34,11 @@
(swap! element assoc :language (first (map :key programming-languages))))
(let [{:keys [id code language]} @element]
[:div.content
[ui/field {:label "Programmiersprachen"}
[ui/select
{:label "Programmiersprachen"
:value (or language "")
{:value (or language "")
:options programming-languages
:on-change #(swap! element assoc :language %)}]
[:div.field
[:label.label {:for "value"} "Code"]
:on-change #(swap! element assoc :language %)}]]
[ui/field {:label "Code"}
[code-editor (reagent/cursor element [:code])]]])))
......@@ -7,20 +7,19 @@
(defmethod ce-core/edit :heading [element options]
(fn [element options]
[:div
[ui/input-range
{:type "range"
:min 1
:max 6
:value (or (:section @element) 1)
:on-change #(swap! element assoc
:section %)
:id "section"
:label "Ebene"}]
[:div.field
[:label.label {:for "text"}
"Titel"]
[:div.control
[:input.input
{:type "text"
:value (:value @element)
:on-change #(swap! element assoc :value (-> % .-target .-value)) :id "text"}]]]]))
[ui/field {:label "Ebene"}
[ui/input-range
{:type "range"
:min 1
:max 6
:value (or (:section @element) 1)
:on-change #(swap! element assoc
:section %)
:id "section"}]]
[ui/field {:label "Titel"}
[ui/input-text
{:type "text"
:value (:value @element)
:on-change #(swap! element assoc :value %)
:id "text"}]
]]))
......@@ -17,12 +17,12 @@
[:div.columns.content
[:div.column.is-half
[:div.columns.is-multiline
[:div.field.column.is-12
[:label.label {:for "imageFile"} "FILE"]
[:div.control
[:input {:type "file"
:on-change #(encodeImageFileAsURL % element)
:id "imageFile"}]]]
[:div.field.column.is-12
[:label.label {:for "imageFile"} "FILE"]
[:div.control
[:input {:type "file"
:on-change #(encodeImageFileAsURL % element)
:id "imageFile"}]]]
[:div.field.column.is-12
[:label.label {:for "value"} "URL"]
[:div.control
......@@ -32,38 +32,40 @@
[:ul
[:li "Das Bild hat maximal die Breite des Containers in dem es dargestellt wird."]
[:li "Die Höhe wird automatisch zur erhaltung des Seitenverhältnis angepasst"]
]
[:div.column.is-12
[ui/select
{:label "Ausrichtung"
:options
[{:key "left"
:label "Linksbündig"}
{:key "center"
:label "Zentriert"}
{:key "right"
:label "Rechtsbündig"}]
:on-change #(swap! element assoc :alignment %)
:value (:alignment @element)}]]
]
[:div.column.is-12
[ui/field {:label "Ausrichtung"}
[ui/select
{:options
[{:key "left"
:label "Linksbündig"}
{:key "center"
:label "Zentriert"}
{:key "right"
:label "Rechtsbündig"}]
:on-change #(swap! element assoc :alignment %)
:value (:alignment @element)}]]]
[:div.column.is-12
[ui/checkbox
{:label "Originalgröße"
:checked? (not (:custom-width @element))
:on-change #(swap! element update :custom-width
(fn [custom-width?]
(if (not custom-width?)
100
false)))}]]
(when (:custom-width @element)
[ui/checkbox
{:label "Originalgröße"
:checked? (not (:custom-width @element))
:on-change #(swap! element update :custom-width
(fn [custom-width?]
(if (not custom-width?)
100
false)))}]]
(when (:custom-width @element)
[:div.column.is-12
[ui/input-range
{:type :range
:min 10
:max 100
:value (:custom-width @element)
:on-change #(swap! element assoc
:custom-width %)}]])
]]
[ui/field {:label "Breite in %"}
[ui/input-range
{:type :range
:expanded? true
:min 10
:max 100
:value (:custom-width @element)
:on-change #(swap! element assoc
:custom-width %)}]]])
]]
[:div.column.is-half
[:img.responsive-img {:src (:url @element)}]]
]))
......@@ -8,9 +8,10 @@
(let [id (gensym "ce-columns")]
(fn [element options]
[:div.content
[ui/input-range
{:label "Spaltenzahl"
:value (:column-count @element)
:on-change #(swap! element assoc :column-count %)
:min 2
:max defaults/max-columns}]])))
[ui/field {:label "Spaltenzahl"}
[ui/input-range
{:value (:column-count @element)
:expanded? true
:on-change #(swap! element assoc :column-count %)
:min 2
:max defaults/max-columns}]]])))
......@@ -12,15 +12,17 @@
[:div.control
[:input.input {:type "color" :value (:color @element) :on-change #(swap! element assoc :color (-> % .-target .-value)) :id "value"}]]
]
[ui/input-range
{:type "range"
:min 1
:max 100
:label "Breite in %"
:value (:width @element)
:on-change #(swap! element assoc :width %)
:id "width"}
]
[:div.is-fullwidth
[ui/field {:label "Breite in %"}
[ui/input-range
{:type "range"
:min 1
:max 100
:expanded? true
:value (:width @element)
:on-change #(swap! element assoc :width %)
:id "width"}
]]
[ce-core/show @element options]
#_[:div.is-fullwidth
[:hr {:color (:color @element)
:width (str (:width @element) "%")}]]]))
......@@ -8,6 +8,7 @@
(fn [element options]
[:div
[:hr
{:style {:border-color (:color element)
{:style {:border (str "1px solid " (:color element "black"))
:margin :auto
:width (str (:width element) "%")}}]]
))
......@@ -6,14 +6,15 @@
(defmethod ce-core/edit :spacer [element options]
(let [id (gensym "ce-spacer")]
(fn [element options]
[:div.container
[ui/input-range
{:type "range"
:value (:height @element defaults/default-height)
:min defaults/min-height
:max defaults/max-height
:on-change #(swap! element assoc :height %)
:id (str id "input-range")
:label "Höhe in px"}
(fn [element options]
[:div.container
[ui/field {:label "Höhe in px"}
[ui/input-range
{:type "range"
:expanded? true
:value (:height @element defaults/default-height)
:min defaults/min-height
:max defaults/max-height
:on-change #(swap! element assoc :height %)
:id (str id "input-range")}]
]])))
(ns lernmeister.components.content-elements.text.edit
(:require [lernmeister.components.content-elements.core :as ce-core]))
(:require
[lernmeister.components.content-elements.core :as ce-core]
[lernmeister.components.ui :as ui]))
(defmethod ce-core/edit :text [element options]
(fn [element options]
[:div.content
[:div.field.is-fullwdth
[:label.label {:for "value"}
"Text"]
[:div.control
[:textarea.textarea
{:value (:value @element)
:on-change #(swap! element assoc :value (-> % .-target .-value))
:id "value"}]]]]))
[ui/field {:label "Text"}
[ui/textarea
{:value (:value @element)
:on-change #(swap! element assoc :value %)
:id "value"}]
]]))
......@@ -36,35 +36,35 @@
(fn [element options]
[:div.columns.is-multiline
[:div.column.is-6
[ui/select*
{:cursor (reagent/cursor element [:provider])
:options {:panopto "Panopto"
:youtube "YouTube"
:file "Datei (.webm)"}
:label "Anbieter"}]]
[ui/field {:label "Anbieter"}
[ui/select*
{:cursor (reagent/cursor element [:provider])
:options {:panopto "Panopto"
:youtube "YouTube"
:file "Datei (.webm)"}}]]]
[:div.column.is-6
(when (= :file (:provider @element))
[:input {:type "file"
:accept "video/webm,video/ogg,.ogg"
:on-change #(encodeImageFileAsURL % element)
:id "imageFile"}])
[ui/input-text
{:label "Video-URL"
:value (get @element :url "")
:on-change #(swap! element assoc :url %)}]]
[ui/field {:label "Video-URL"}
[ui/input-text
{:value (get @element :url "")
:on-change #(swap! element assoc :url %)}]]]
(when (= :file (:provider @element))
[:div.column.is-12
[ui/select
{:label "Ausrichtung"
:options
[{:key "left"
:label "Linksbündig"}
{:key "center"
:label "Zentriert"}
{:key "right"
:label "Rechtsbündig"}]
:on-change #(swap! element assoc :alignment %)
:value (:alignment @element)}]])
[ui/field {:label "Ausrichtung"}
[ui/select
{:options
[{:key "left"
:label "Linksbündig"}
{:key "center"
:label "Zentriert"}
{:key "right"
:label "Rechtsbündig"}]
:on-change #(swap! element assoc :alignment %)
:value (:alignment @element)}]]])
(when (= :file (:provider @element))
[:div.column.is-12
[ui/checkbox
......@@ -80,13 +80,14 @@
(= :file (:provider @element)))
[:<>
[:div.column.is-12
[ui/input-range
{:type :range
:min 10
:max 100
:value (:custom-width @element)
:on-change #(swap! element assoc
:custom-width %)}]]])
[ui/field {:label "Breite"}
[ui/input-range
{:type :range
:min 10
:max 100
:value (:custom-width @element)
:on-change #(swap! element assoc
:custom-width %)}]]]])
[:div.column.is-12
^{:key (hash @element)}
[ce-core/show (merge @element {:type :video})]]
......
......@@ -52,36 +52,36 @@
[:div.columns.is-multiline.card-content
[:div.column.is-half
[ui/input-text
{:value (:name calculation)
:on-change #(update-calc [:name] (str/triml %))
:label "Größe"}]]
[ui/field {:label "Größe"}
[ui/input-text
{:value (:name calculation)
:on-change #(update-calc [:name] (str/triml %))}]]]
[:div.column.is-half
[ui/input-text
{:value (:error-relative calculation "1")
:on-change (fn [value]
(when-let [v (-> value
(->>
(re-matches #"^\-?(0*)(([1-9]\d*)|0)$"))
(nth 2))]
(update-calc [:error-relative]
(edn/read-string v))))
:label "Fehler (in %)"}]]
[ui/field {:label "Fehler (in %)"}
[ui/input-text
{:value (:error-relative calculation "1")
:on-change (fn [value]
(when-let [v (-> value
(->>
(re-matches #"^\-?(0*)(([1-9]\d*)|0)$"))
(nth 2))]
(update-calc [:error-relative]
(edn/read-string v))))}]]]
[:div.column.is-half
[ui/input-text
{:value (:correct-points calculation)
:on-change (fn [value]
(when-let [v (parse-points value :correct)]
(update-calc [:correct-points] (edn/read-string v))))
:label "Punkte (korrekt)"}
[ui/field {:label "Punkte (korrekt)"}
[ui/input-text
{:value (:correct-points calculation)
:on-change (fn [value]
(when-let [v (parse-points value :correct)]
(update-calc [:correct-points] (edn/read-string v))))}]
]]
[:div.column.is-half
[ui/input-text
{:value (:incorrect-points calculation)
:on-change (fn [value]
(when-let [v (parse-points value :incorrect)]
(update-calc [:incorrect-points] (edn/read-string v))))
:label "Punkte (fehlerhaft)"}]]
[ui/field {:label "Punkte (fehlerhaft)"}
[ui/input-text
{:value (:incorrect-points calculation)
:on-change (fn [value]
(when-let [v (parse-points value :incorrect)]
(update-calc [:incorrect-points] (edn/read-string v))))}]]]
[:div.column.is-full
[show/calculation-renderer @exercise-core calculation "edit"
:answer answer
......@@ -101,13 +101,13 @@
{:on-click
(fn [] (swap! calculations #(into [] (conj % (get-new-calculation (:with-oom @exercise-core))))))}
[:span.icon [:i.fas.fa-plus]] [:span "Berechnung"]]]}
[:div.new-question.card-panel.z-depth-3
(map-indexed
(fn [index calculation]
^{:key index} [show-calculation exercise-core index calculation
:delete-fn #(swap! calculations vec-remove %)])
@calculations)
]]))
[:div.new-question.card-panel.z-depth-3
(map-indexed
(fn [index calculation]
^{:key index} [show-calculation exercise-core index calculation
:delete-fn #(swap! calculations vec-remove %)])
@calculations)
]]))
:component-did-mount
#(swap! exercise-core (fn [exercise-core] (merge {:shuffled false
:with-oom false
......