cljs.cljs

(ns REDACTED.ui.core
  (:require [reagent.core :as r]))

;; For println output via console.log
(enable-console-print!)

(def jquery js/$)

;;; App State

(defonce apps
  (r/atom {"my-app" {"default" {"foo" "bar"}
                     "production" {"bat" "baz"}}}))

;;; Components

(defn sidebar
  [selected-app selected-profile]
  [:section {:class "sidebar-left"}
   [:ul
    (for [[app-name profiles] @apps]
      [:li {:class (if (= app-name @selected-app)
                     "active"
                     "")}
       [:span {:on-click #(reset! selected-app app-name)}
        app-name]
       [:ul
        (for [profile-name (keys profiles)]
          [:li {:class (if (= profile-name @selected-profile)
                         "active"
                         "")}
           [:a {:on-click #(reset! selected-profile profile-name)}
            profile-name]])
        [:li "new profile"]]])
    [:li "new app"]]])

(defn profile-editor
  [config]
  [:section {:class "content"}
   [:table
    [:thead [:tr [:th "Variable Name"] [:th "Variable Value"]]]
    [:tbody
     (for [[var-name var-value] config]
       [:tr
        [:td [:input {:value var-name}]]
        [:td [:input {:value var-value}]]])
     [:tr
      [:td [:input {:value "New Variable"}]]
      [:td [:input {:value "Value"}]]]]]])

(defn app
  "Returns the top-level app component."
  []
  (let [selected-app (atom "my-app")
        selected-profile (atom "default")]
    (fn []
      [:div
       [sidebar selected-app selected-profile]
       [profile-editor (-> @apps (get @selected-app) (get @selected-profile))]])))

(r/render [app] (js/document.getElementById "app"))