Merge pull request #542 from instedd/wizard-layout

Wizard layout
instedd · May 28, 2019 · be1864c · be1864c
2 parents a031b97 + 13c6461
commit be1864c
Show file tree

Hide file tree

Showing 12 changed files with 417 additions and 374 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/sass/site2.scss b/resources/sass/site2.scss
@@ -113,6 +113,9 @@ header {
     position: absolute;
     right: $margin-page;
     bottom: -27px;
+    > i {
+      align-self: center;
+    }
   }
 }
 
@@ -606,12 +609,29 @@ form.vertical, .fields-vertical {
   }
 }
 
+.coverage-setting {
+  p, label {
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 0.75rem;
+  }
+  .mdc-slider .mdc-slider__pin {
+    background-color: transparent;
+    color: $mdc-theme-primary;
+    top: 24px;
+    transform: rotate(-45deg);
+    > .mdc-slider__pin-value-marker::selection {
+      // remove selection color in firefox
+      background-color: transparent;
+    }
+  }
+}
+
 .action-input {
   max-width: 100px;
 }
 .percentage-input {
   display: inline-flex;
-  align-items: end;
+  align-items: baseline;
   div {
     margin-right: 0.8rem;
     > input {
@@ -831,6 +851,7 @@ form.vertical, .fields-vertical {
 }
 
 .wizard {
+  padding-bottom: 0;
   .steps {
     display: flex;
     flex-direction: row;
@@ -848,7 +869,7 @@ form.vertical, .fields-vertical {
       display: flex;
       align-items: center;
       i {
-        background-color: #999999;        
+        background-color: #999999;
         color: #ffffff;
         font-style: normal;
         padding: 5px 11px;
@@ -871,7 +892,7 @@ form.vertical, .fields-vertical {
         border: none;
       }
     }
-    
+
     .complete {
       i {
         background-color: $mdc-theme-primary;
@@ -891,8 +912,20 @@ form.vertical, .fields-vertical {
     }
   }
   .map {
+    display: flex;
+    align-items: stretch;
     min-height: 500px;
-    height: 100%;
+    height: calc(100% + 24px);
+    min-width: 500px;
+    margin: -24px -24px 0 0;
+    * {
+      z-index: 0;
+    }
+
+    > div {
+      width: 100%;
+      // height: 100%;
+    }
   }
 }
 

diff --git a/src/planwise/client/coverage.cljs b/src/planwise/client/coverage.cljs
@@ -53,15 +53,23 @@
 
 (defn- criteria-option-select-component
   [{:keys [label value options on-change]}]
-  [m/Select {:label label
-             :disabled (empty? options)
-             :value (str value)
-             :options options
-             :onChange #(on-change (js/parseInt (-> % .-target .-value)))}])
+  (let [sorted-options  (sort-by :value options)
+        step            (- (:value (second sorted-options)) (:value (first sorted-options)))
+        value-label     (:label (first (filter #(= value (:value %)) options)))]
+    [:div.coverage-setting
+     [:label label]
+     [m/Slider {:value    value
+                :onInput  #(on-change (-> % .-detail .-value))
+                :onChange #(on-change (-> % .-detail .-value))
+                :min      (:value (first sorted-options))
+                :max      (:value (last sorted-options))
+                :discrete true
+                :step     step}]
+     [:p value-label]]))
 
 (defn- criteria-option
   [{:keys [config value on-change disabled?]}]
-  (let [options   (map #(update % :value str) (:options config))
+  (let [options   (:options config)
         label     (:label config)
         component (if disabled?
                     disabled-input-component

diff --git a/src/planwise/client/projects2/components/settings.cljs b/src/planwise/client/projects2/components/settings.cljs
@@ -17,12 +17,8 @@
             [planwise.client.ui.rmwc :as m]
             [planwise.client.utils :as utils]
             [clojure.spec.alpha :as s]
-            [planwise.model.project-consumers]
-            [planwise.model.project-actions]
-            [planwise.model.project-coverage]
-            [planwise.model.project-providers]
-            [planwise.model.project-review]
-            [planwise.model.project-goal]))
+            [leaflet.core :as l]
+            [planwise.client.mapping :as mapping]))
 
 ;;------------------------------------------------------------------------
 ;;Current Project updating
@@ -85,11 +81,12 @@
              :on-click #(reset! state true)} "Delete"])
 
 (defn- project-back-button
-  []
-  ; TODO - add on-click function and don't show it in first step
-  [m/Button {:type     "button"
-             :theme    ["text-secondary-on-secondary-light"]}
-   "Back"])
+  [project step]
+  (when step
+    [m/Button {:type     "button"
+               :theme    ["text-secondary-on-secondary-light"]
+               :on-click (utils/prevent-default #(dispatch [:projects2/navigate-to-step-project (:id project) step]))}
+     "Back"]))
 
 (defn- tag-chip
   [props index input read-only]
@@ -241,32 +238,71 @@
 
 (defn- current-project-step-review
   [read-only]
-  (let [current-project (subscribe [:projects2/current-project])]
+  (let [current-project (subscribe [:projects2/current-project])
+        algorithms      (rf/subscribe [:coverage/supported-algorithms])
+        providers       (subscribe [:providers-set/dropdown-options])
+        provider-set-id        (:provider-set-id @current-project)
+        provider        (first (filter #(= provider-set-id (:value %)) @providers))
+        algorithm       (get-in @algorithms [(keyword (:coverage-algorithm @current-project))])
+        criteria        (first (vals (:criteria algorithm)))
+        coverage-amount (first (vals (get-in @current-project [:config :coverage :filter-options])))
+        sources         (subscribe [:sources/list])
+        source          (first (filter #(= (:source-set-id @current-project) (:id %)) @sources))
+        budget          (get-in @current-project [:config :actions :budget])
+        workload        (get-in @current-project [:config :providers :capacity])
+        consumers-unit        (get-in @current-project [:config :demographics :unit-name])
+        capacities       (get-in @current-project [:config :actions :build])]
+    (dispatch [:sources/load])
+    (dispatch [:providers-set/load-providers-set])
     [:section {:class "project-settings-section"}
      [section-header 6 "Review"]
      [:div {:class "step-info"} "After this step the system will search for different improvements scenarios based on the given parameters. Once started, the process will continue even if you leave the site. From the dashboard you will be able to see the scenarios found so far, pause the search and review the performed work."]
-     [project-setting-title "location_on" "Kenya health facilities - ResMap 8902"]
-     [project-setting-title "account_balance" "K 25,000,000"]
-     [project-setting-title "people" "Kenya census 2005"]
-     [project-setting-title "directions" "120 min walking distance, 40 min driving"]
-     [project-setting-title "info" "A hospital with a capacity of 100 beds will provide service for 1000 pregnancies per year"]]))
+     (if (some? provider)
+       [project-setting-title "location_on" (:label provider)]
+       [project-setting-title "warning" "The provider dataset field in the \"providers\" tab is needed"])
+     (if (some? budget)
+       [project-setting-title "account_balance" (str "K " budget)]
+       [project-setting-title "warning" "The budget field in the \"actions\" tab is needed"])
+     (if (some? source)
+       [project-setting-title "people" (:name source)]
+       [project-setting-title "warning" "The \"consumers\" tab information is needed"])
+     (if (and (some? coverage-amount) (some? provider-set-id))
+       [project-setting-title "directions" (str
+                                            (:label (first (filter #(= coverage-amount (:value %)) (:options criteria))))
+                                            " of "
+                                            (:label (first (vals (:criteria algorithm)))))]
+       [project-setting-title "warning" "The \"providers\" and \"coverage\" tabs information is needed"])
+     (map (fn [action]
+            [project-setting-title "info" (join " " ["A facility with a capacity of"
+                                                     (:capacity action)
+                                                     "will provide service for"
+                                                     (* (:capacity action) workload)
+                                                     (or (not-empty consumers-unit) "consumers units")
+                                                     " per year"])]) capacities)]))
+
+
+(def map-preview-size {:width 373 :height 278})
 
 (defn current-project-settings-view
   [{:keys [read-only step sections]}]
   (let [current-project (subscribe [:projects2/current-project])
         build-actions   (subscribe [:projects2/build-actions])
         upgrade-actions (subscribe [:projects2/upgrade-actions])
-        tags            (subscribe [:projects2/tags])]
-
+        tags            (subscribe [:projects2/tags])
+        regions         (subscribe [:regions/list])]
     (fn [{:keys [read-only step]}]
       (let [project @current-project
-            step-data       (first (filter #(= (:step %) step) sections))]
-
+            step-data       (first (filter #(= (:step %) step) sections))
+            bbox            (:bbox (first (filter #(= (:id %) (:region-id @current-project)) @regions)))
+            region-geo      (subscribe [:regions/preview-geojson (:region-id @current-project)])
+            preview-map-url (if (:region-id @current-project) (static-image @region-geo map-preview-size))]
+        (dispatch [:regions/load-regions-with-preview [(:region-id @current-project)]])
         [m/Grid {:class-name "wizard"}
+
          [m/GridCell {:span 12 :class-name "steps"}
           (map-indexed (fn [i iteration-step]
                          [:a {:key i
-                              :class-name (join " " [(if (= (:step iteration-step) step) "active") (if (s/valid? (keyword (str "planwise.model.project-" (:step iteration-step)) "validation") project) "complete")])
+                              :class-name (join " " [(if (= (:step iteration-step) step) "active") (if (s/valid? (:spec iteration-step) project) "complete")])
                               :href (routes/projects2-show-with-step {:id (:id project) :step (:step iteration-step)})}
                           (if (s/valid? (:spec iteration-step) project) [m/Icon "done"] [:i (inc i)])
                           [:div (:title iteration-step)]]) sections)]
@@ -276,7 +312,19 @@
              (dispatch [:projects2/infer-step @current-project])
              ((:component step-data) read-only))]]
          [m/GridCell {:span 6}
-          [:div.map]]]))))
+          [:div.map
+           (if (some? bbox)
+             [l/map-widget {:position (mapping/bbox-center bbox)
+                            :controls []
+                            :initial-bbox bbox}
+              mapping/default-base-tile-layer
+              [:geojson-layer {:data  @region-geo}
+               :group {:pane "tilePane"}
+               :lat-fn (fn [polygon-point] (:lat polygon-point))
+               :lon-fn (fn [polygon-point] (:lon polygon-point))
+               :color :orange
+               :stroke true]])]]]))))
+
 
 (defn edit-current-project
   []
@@ -296,8 +344,10 @@
         [current-project-settings-view {:read-only false :step (:step @page-params) :sections sections}]
 
         [:div {:class-name "project-settings-actions"}
-         [project-back-button]
-         [project-delete-button delete?]
+         (let [previous-step (:step (first (filter #(= (:next-step %) (:step @page-params)) sections)))]
+           (if (nil? previous-step)
+             [project-delete-button delete?]
+             [project-back-button @current-project previous-step]))
          [project-next-step-button @current-project (:next-step (first (filter #(= (:step %) (:step @page-params)) sections)))]]]
        [delete-project-dialog {:open? @delete?
                                :cancel-fn hide-dialog

diff --git a/src/planwise/client/projects2/handlers.cljs b/src/planwise/client/projects2/handlers.cljs
@@ -6,13 +6,7 @@
             [planwise.client.effects :as effects]
             [planwise.client.projects2.db :as db]
             [planwise.client.utils :as utils]
-            [clojure.spec.alpha :as s]
-            [planwise.model.project-consumers]
-            [planwise.model.project-actions]
-            [planwise.model.project-coverage]
-            [planwise.model.project-providers]
-            [planwise.model.project-review]
-            [planwise.model.project-goal]))
+            [clojure.spec.alpha :as s]))
 
 
 (def in-projects2 (rf/path [:projects2]))
@@ -44,7 +38,7 @@
  in-projects2
  (fn [{:keys [db]} [_ project]]
    (let [steps ["goal", "consumers", "providers", "coverage", "actions", "review"]
-         first-invalid-step (first (filter #(not (s/valid? (keyword (str "planwise.model.project-" %) "validation") project)) steps))
+         first-invalid-step (first (filter #(not (s/valid? (keyword "planwise.model.project" (str % "-step")) project)) steps))
          selected-step (if (not-empty first-invalid-step) first-invalid-step "review")]
      {:navigate (routes/projects2-show-with-step {:id (:id project) :step selected-step})})))
 

diff --git a/src/planwise/client/providers_set/subs.cljs b/src/planwise/client/providers_set/subs.cljs
@@ -12,7 +12,7 @@
  :providers-set/dropdown-options
  (fn [db _]
    (let [list (get-in db [:providers-set :list :value])]
-     (mapv (fn [provider-set] (let [{:keys [id name]} provider-set] {:value (str id) :label name})) list))))
+     (mapv (fn [provider-set] (let [{:keys [id name]} provider-set] {:value id :label name})) list))))
 
 (rf/reg-sub
  :providers-set/view-state
@@ -47,4 +47,4 @@
 (rf/reg-sub
  :providers-set/delete-selected-provider-set
  (fn [db _]
-   (get-in db [:providers-set :selected-provider])))
+   (get-in db [:providers-set :selected-provider])))
diff --git a/src/planwise/component/coverage.clj b/src/planwise/component/coverage.clj
@@ -26,7 +26,7 @@
 (s/def ::driving-time #{30 60 90 120})
 (s/def ::driving-friction-criteria (s/keys :req-un [::driving-time]))
 
-(s/def ::distance #{5 10 20 50 100})
+(s/def ::distance #{5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100})
 (s/def ::simple-buffer-criteria (s/keys :req-un [::distance]))
 
 (s/def ::walking-time #{60 120 180})
@@ -70,8 +70,23 @@
                              :type    :enum
                              :options [{:value 5   :label "5 km"}
                                        {:value 10  :label "10 km"}
+                                       {:value 15  :label "15 km"}
                                        {:value 20  :label "20 km"}
+                                       {:value 25  :label "25 km"}
+                                       {:value 30  :label "30 km"}
+                                       {:value 35  :label "35 km"}
+                                       {:value 40  :label "40 km"}
+                                       {:value 45  :label "45 km"}
                                        {:value 50  :label "50 km"}
+                                       {:value 55  :label "55 km"}
+                                       {:value 60  :label "60 km"}
+                                       {:value 65  :label "65 km"}
+                                       {:value 70  :label "70 km"}
+                                       {:value 75  :label "75 km"}
+                                       {:value 80  :label "80 km"}
+                                       {:value 85  :label "85 km"}
+                                       {:value 90  :label "90 km"}
+                                       {:value 95  :label "95 km"}
                                        {:value 100 :label "100 km"}]}}}})
 
 

diff --git a/src/planwise/model/project_actions.cljc b/src/planwise/model/project_actions.cljc
diff --git a/src/planwise/model/project_consumers.cljc b/src/planwise/model/project_consumers.cljc
diff --git a/src/planwise/model/project_coverage.cljc b/src/planwise/model/project_coverage.cljc
diff --git a/src/planwise/model/project_goal.cljc b/src/planwise/model/project_goal.cljc