aboutsummaryrefslogtreecommitdiff
path: root/src/frontend
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2023-10-22 20:41:47 +0200
committerMiguel Ángel Moreno <mail@migalmoreno.com>2023-10-22 20:43:40 +0200
commitd35b2ae7739d098e4080a6abed1b77063546cd6e (patch)
tree600755835f68de4c6c9e8db505476980cf4cb7e8 /src/frontend
parentea77d66a9e45d117a49da1ee7802e94f21ebc445 (diff)
fix(frontend): refine navbar and subs
Diffstat (limited to 'src/frontend')
-rw-r--r--src/frontend/tubo/events.cljs25
-rw-r--r--src/frontend/tubo/subs.cljs15
-rw-r--r--src/frontend/tubo/views.cljs164
3 files changed, 111 insertions, 93 deletions
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index aa238d3..46be7a4 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -83,26 +83,14 @@
(assoc db :http-response (get-in res [:response :error]))))
(rf/reg-event-db
- ::change-global-search
+ ::change-search-query
(fn [db [_ res]]
- (assoc db :global-search res)))
+ (assoc db :search-query res)))
(rf/reg-event-db
- ::change-service-color
- (fn [db [_ service-id]]
- (assoc db :service-color
- (case service-id
- 0 "#cc0000"
- 1 "#ff7700"
- 2 "#333333"
- 3 "#F2690D"
- 4 "#629aa9"))))
-
-(rf/reg-event-fx
::change-service-id
- (fn [{:keys [db]} [_ service-id]]
- {:db (assoc db :service-id service-id)
- :fx [[:dispatch [::change-service-color service-id]]]}))
+ (fn [db [_ service-id]]
+ (assoc db :service-id service-id)))
(rf/reg-event-db
::load-paginated-channel-results
@@ -328,9 +316,10 @@
{:fx [[:dispatch [::get-default-kiosk-page service-id]]]})))
(rf/reg-event-fx
- ::change-service
+ ::change-service-kiosk
(fn [{:keys [db]} [_ service-id]]
- {:fx [[:dispatch
+ {:fx [[:dispatch [::change-service-id service-id]]
+ [:dispatch
[::navigate {:name :tubo.routes/kiosk
:params {}
:query {:serviceId service-id}}]]]}))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index 1132cdd..0eb5cfb 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -58,9 +58,9 @@
(:channel db)))
(rf/reg-sub
- :global-search
+ :search-query
(fn [db _]
- (:global-search db)))
+ (:search-query db)))
(rf/reg-sub
:service-id
@@ -69,8 +69,15 @@
(rf/reg-sub
:service-color
- (fn [db _]
- (:service-color db)))
+ (fn [_]
+ (rf/subscribe [:service-id]))
+ (fn [id _]
+ (case id
+ 0 "#cc0000"
+ 1 "#ff7700"
+ 2 "#333333"
+ 3 "#F2690D"
+ 4 "#629aa9")))
(rf/reg-sub
:services
diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index d412edf..c1a04ed 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -2,8 +2,9 @@
(:require
[reitit.frontend.easy :as rfe]
[re-frame.core :as rf]
+ [reagent.core :as r]
[tubo.components.navigation :as navigation]
- [tubo.components.player :as player]
+ [tubo.components.audio-player :as player]
[tubo.events :as events]
[tubo.routes :as routes]))
@@ -12,68 +13,87 @@
(defn navbar
[{{:keys [serviceId]} :query-params}]
- (let [service-id @(rf/subscribe [:service-id])
- service-color @(rf/subscribe [:service-color])
- global-search @(rf/subscribe [:global-search])
- services @(rf/subscribe [:services])
- id (js/parseInt (or serviceId service-id))
- mobile-nav? @(rf/subscribe [:show-mobile-nav])
- {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
- [:nav.flex.px-2.py-2.5.items-center.sticky.top-0.z-50.font-nunito
- {:style {:background service-color}}
- [:div.flex.items-center.justify-between.flex-auto
- [:div.px-2
- [:a.text-white.font-bold
- {:href (rfe/href ::routes/home)}
- [:img.mb-1 {:src "/images/tubo.png" :style {:maxHeight "35px" :maxWidth "50px"}
- :title "Tubo"}]]]
- [:form.flex.items-center.relative
- {:on-submit (fn [e]
- (.preventDefault e)
- (rf/dispatch [::events/navigate
- {:name ::routes/search
- :params {}
- :query {:q global-search :serviceId service-id}}]))}
- [:div
- [:input.bg-transparent.text-white.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
- {:type "text"
- :default-value global-search
- :on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)])
- :placeholder "Search for something"}]]
- [:div.flex.items-center.px-2
- [:button.text-white
- {:type "submit"}
- [:i.fas.fa-search]]]]
- [:div.cursor-pointer.px-2.ml:hidden.text-white
- {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
- [:i.fa-solid.fa-bars]]
- [:div.bg-white.dark:bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
- {:class (str "ease-in-out delay-75 transition-[right] "
- "ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
- (if mobile-nav? "right-0" "right-[-245px]"))}
- [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2
- {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
- [:i.fa-solid.fa-close.text-xl]]
- [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
- [:div.w-full.box-border.z-10.ml:text-white
- [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
- {:on-change #(rf/dispatch [::events/change-service (js/parseInt (.. % -target -value))])
- :value service-id
- :style {:background "transparent"}}
- (when services
- (for [service services]
- [:option.text-white.bg-neutral-900.border-none
- {:value (:id service) :key (:id service)}
- (-> service :info :name)]))]]
- [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0.ml:text-white
- [:i.fa-solid.fa-caret-down]]]
- [:div.relative.flex-auto.ml:pl-4
- [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
- (for [kiosk available-kiosks]
- [:li.px-5.py-2 {:key kiosk}
- [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
- :kioskId kiosk})}
- kiosk]])]]]]]))
+ (let [!query (r/atom "")
+ !input (r/atom nil)]
+ (fn [{{:keys [serviceId]} :query-params}]
+ (let [service-id @(rf/subscribe [:service-id])
+ service-color @(rf/subscribe [:service-color])
+ search-query @(rf/subscribe [:search-query])
+ services @(rf/subscribe [:services])
+ {:keys [current-theme]} @(rf/subscribe [:settings])
+ id (js/parseInt (or serviceId service-id))
+ mobile-nav? @(rf/subscribe [:show-mobile-nav])
+ {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
+ [:nav.flex.px-2.py-2.5.items-center.sticky.top-0.z-50.font-nunito
+ {:style {:background service-color}}
+ [:div.flex.items-center.justify-between.flex-auto
+ [:div.px-2
+ [:a.text-white.font-bold
+ {:href (rfe/href ::routes/home)}
+ [:img.mb-1 {:src "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"}
+ :title "Tubo"}]]]
+ [:form.flex.items-center.relative
+ {:on-submit (fn [e]
+ (.preventDefault e)
+ (when-not (empty? @!query)
+ (rf/dispatch [::events/navigate
+ {:name ::routes/search
+ :params {}
+ :query {:q search-query :serviceId service-id}}])))}
+ [:div
+ [:input.bg-transparent.text-white.border-none.rounded.py-2.px-0.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
+ {:type "text"
+ :ref #(reset! !input %)
+ :default-value @!query
+ :on-change #(let [input (.. % -target -value)]
+ (when-not (empty? input) (rf/dispatch [::events/change-search-query input]))
+ (reset! !query input))
+ :placeholder "Search for something"}]]
+ [:div.flex.items-center.px-2.text-white
+ [:button.mx-2
+ {:type "button"
+ :on-click #(when @!input
+ (set! (.-value @!input) "")
+ (reset! !query "")
+ (.focus @!input))
+ :class (when (empty? @!query) "invisible")}
+ [:i.fa-solid.fa-circle-xmark]]
+ [:button.mx-2
+ {:type "submit"}
+ [:i.fa-solid.fa-search]]
+ [:a.mx-2 {:href (rfe/href ::routes/settings)}
+ [:i.fa-solid.fa-cog]]]]
+ [:div.cursor-pointer.px-2.ml:hidden.text-white
+ {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+ [:i.fa-solid.fa-bars]]
+ [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
+ {:class (str "ease-in-out delay-75 transition-[right] "
+ (if (= current-theme :light) "bg-white" "bg-neutral-900")
+ " ml:w-full ml:flex ml:min-h-0 ml:relative ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
+ (if mobile-nav? "right-0" "right-[-245px]"))}
+ [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2
+ {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+ [:i.fa-solid.fa-close.text-xl]]
+ [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
+ [:div.w-full.box-border.z-10.ml:text-white
+ [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
+ {:on-change #(rf/dispatch [::events/change-service-kiosk (js/parseInt (.. % -target -value))])
+ :value service-id
+ :style {:background "transparent"}}
+ (when services
+ (for [service services]
+ [:option.text-white.bg-neutral-900.border-none
+ {:value (:id service) :key (:id service)}
+ (-> service :info :name)]))]]
+ [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0.ml:text-white
+ [:i.fa-solid.fa-caret-down]]]
+ [:div.relative.flex-auto.ml:pl-4
+ [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
+ (for [kiosk available-kiosks]
+ [:li.px-5.py-2 {:key kiosk}
+ [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
+ :kioskId kiosk})}
+ kiosk]])]]]]]))))
(defn footer
[]
@@ -88,11 +108,13 @@
(defn app
[]
- (let [current-match @(rf/subscribe [:current-match])]
- [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative
- [navbar current-match]
- [:div.flex.flex-col.justify-between.relative.font-nunito {:style {:minHeight "100vh"}}
- (when-let [view (-> current-match :data :view)]
- [view current-match])
- [footer]
- [player/global-player]]]))
+ (let [current-match @(rf/subscribe [:current-match])
+ {:keys [current-theme]} @(rf/subscribe [:settings])]
+ [:div {:class (when (= current-theme "dark") "dark")}
+ [:div.min-h-screen.flex.flex-col.h-full.dark:text-white.dark:bg-neutral-900.relative
+ [navbar current-match]
+ [:div.flex.flex-col.justify-between.relative.font-nunito {:style {:minHeight "100vh"}}
+ (when-let [view (-> current-match :data :view)]
+ [view current-match])
+ [footer]
+ [player/player]]]]))