Now a simple re-frame app

src/cljs/auto_ap/views.cljs

@@ -0,0 +1,149 @@
+(ns auto-ap.views
+  (:require [re-frame.core :as re-frame]
+            [reagent.core :as reagent]
+            [auto-ap.subs :as subs]
+            [auto-ap.events :as events]))
+
+(def dropzone
+  (with-meta
+    (fn []
+      [:form {:action "/pdf-upload" :class ".dropzone"}
+       [:div {:class "card"}
+        [:div {:class "card-header"}
+         [:span {:class "card-header-title"} "Upload Invoices"]]
+        [:div {:class "card-content"}
+         [:span {:class "icon"}
+          [:i {:class "fa fa-cloud-download"}]]
+         "Drop invoice pdfs here" 
+         [:input {:type "file", :name "file", :style {:display "none"}}]]]])
+    {:component-did-mount (fn [this]
+                            (-> (js/$ (reagent/dom-node this)) 
+                                (.dropzone (clj->js {:init (fn []
+                                                             (this-as t
+                                                               (.on t "success" (fn [_ files]
+                                                                                  (re-frame/dispatch [::events/imported-invoices (js->clj (.parse js/JSON files))])
+                                                                                  ))))
+                                                     :url "/pdf-upload"}))))})
+  )
+
+(defn main-panel []
+  (let [name (re-frame/subscribe [::subs/name])
+        invoices (re-frame/subscribe [::subs/invoices])]
+    (println name)
+    [:div  
+ [:nav {:class "navbar has-shadow"}
+  [:div {:class "container"}
+   [:div {:class "navbar-brand"}
+    [:a {:class "navbar-item", :href "../"}
+     [:h1 (str "Auto-ap - " @name)]]
+    [:div {:class "navbar-burger burger", :data-target "navMenu"}
+     [:span]
+     [:span]
+     [:span]]]
+   [:div {:id "navMenu", :class "navbar-menu"}
+    [:div {:class "navbar-end"}
+     [:div {:class "navbar-item has-dropdown is-active"}
+      [:a {:class "navbar-link login"} ]
+      [:div {:class "navbar-dropdown", :style {:display "none"}}
+       [:a {:class "navbar-item"} ]
+       [:a {:class "navbar-item"} ]
+       [:a {:class "navbar-item"} ]
+       [:hr {:class "navbar-divider"}]
+       [:div {:class "navbar-item"} ]]]]]]]
+ [:div {:class "columns", :id "mail-app"}
+  [:aside {:class "column is-narrow aside hero is-fullheight"}
+   [:div.left-nav
+    [:div {:class "compose has-text-centered"}
+     [:a {:class "button is-danger is-block is-bold"}
+      [:span {:class "compose"} "New Invoice"]]]
+    [:div {:class "main"}
+     [:a {:href "#", :class "item active"}
+      [:span {:class "icon"}
+       [:i {:class "fa fa-inbox"}]]
+      [:span {:class "name"} "Upload\n              Invoices"]]
+     [:a {:href "#", :class "item"}
+      [:span {:class "icon"}
+       [:i {:class "fa fa-star"}]]
+      [:span {:class "name"} "Unpaid Invoices"]]
+     [:a {:href "#", :class "item"}
+      [:span {:class "icon"}
+       [:i {:class "fa fa-envelope-o"}]]
+      [:span {:class "name"} "Paid Invoices"]]]]]
+  [:div {:class "column messages hero is-fullheight", :id "message-feed"}
+   [:div {:class "inbox-messages"}
+    [dropzone]
+    
+    [:div {:class "section"}]
+    [:div {:class "card found-invoices", :style {:display (if (seq @invoices) "block" "none")}}
+     [:div {:class "card-header"}
+      [:span {:class "card-header-title"} "Found Invoices"]]
+     [:div {:class "card-content"}
+      [:table {:class "table", :style {:width "100%"}}
+       [:thead  
+        [:tr  
+         [:th "Customer"]
+         [:th "Invoice #"]
+         [:th "Date"]
+         [:th "Amount"]]]
+       [:tbody (for [{:strs [customer-identifier invoice-number date total]} @invoices]
+                 ^{:key (str customer-identifier "-" invoice-number)}
+                 [:tr
+                  [:td customer-identifier]
+                  [:td invoice-number]
+                  [:td date]
+                  [:td total]])]]]]]]]
+ [:footer {:class "footer"}
+  [:div {:class "container"}
+   [:div {:class "content has-text-centered"}
+    [:p  
+     [:strong "Auto-AP"]"by " 
+     [:a {:href "https://github.com/"} "Integreat"]"."]
+    [:p  
+     [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
+      [:i {:class "fa fa-github"}]]]]]]]))
+
+
+
+;; 
+;;   <nav class="navbar has-shadow">
+;;     <div class="container">
+;;       <div class="navbar-brand">
+;;         <a class="navbar-item" href="../">
+;;           <h1>Auto-ap</h1>
+;;         </a>
+;; 
+;;         <div class="navbar-burger burger" data-target="navMenu">
+;;           <span></span>
+;;           <span></span>
+;;           <span></span>
+;;         </div>
+;;       </div>
+;; 
+;;       <div id="navMenu" class="navbar-menu">
+;;         <div class="navbar-end">
+;;           <div class="navbar-item has-dropdown is-active">
+;;             <a class="navbar-link login">
+;;               Login
+;;             </a>
+;; 
+;;             <div class="navbar-dropdown" style="display:none">
+;;               <a class="navbar-item">
+;;                 Dashboard
+;;               </a>
+;;               <a class="navbar-item">
+;;                 Profile
+;;               </a>
+;;               <a class="navbar-item">
+;;                 Settings
+;;               </a>
+;;               <hr class="navbar-divider">
+;;               <div class="navbar-item">
+;;                 Logout
+;;               </div>
+;;             </div>
+;;           </div>
+;;         </div>
+;;       </div>
+;;     </div>
+;;   </nav>
+