From f04fd2e591f4a734991b1eaa608af62f687067df Mon Sep 17 00:00:00 2001 From: towards-a-new-leftypol Date: Fri, 1 Mar 2024 02:29:24 -0500 Subject: [PATCH] Search WiP: Add searchbar component --- TODO.txt | 2 ++ chandlr.cabal | 2 ++ html/scrollbar.html | 4 +++ html/searchform.html | 4 +++ html/tc.css | 25 +++++++++++++ index.html | 18 ---------- src/Action.hs | 2 ++ src/Component/Search.hs | 71 +++++++++++++++++++++++++++++++++++++ src/Component/ThreadView.hs | 2 +- src/Main.hs | 11 ++++++ static/style.css | 49 +++++++++++++++++++++++-- 11 files changed, 169 insertions(+), 21 deletions(-) create mode 100644 html/searchform.html create mode 100644 src/Component/Search.hs diff --git a/TODO.txt b/TODO.txt index 0bb4934..3dceb21 100644 --- a/TODO.txt +++ b/TODO.txt @@ -20,3 +20,5 @@ - need to support flags - need to support mod actions like saging a thread or deleting a post - need to display the current time you are at (or Latest) ✓ +- add server sent event (only when in the "present" time wise) and listen + for new posts diff --git a/chandlr.cabal b/chandlr.cabal index b3528a6..7538801 100644 --- a/chandlr.cabal +++ b/chandlr.cabal @@ -76,6 +76,7 @@ executable chandlr Component.Thread.Files Component.Thread.Intro Component.Thread.Model + Component.Thread.Embed Component.BodyRender Routes Common.AttachmentType @@ -84,6 +85,7 @@ executable chandlr Parsing.EmbedParser Parsing.PostPartType Component.TimeControl + Component.Search -- LANGUAGE extensions used by modules in this package. diff --git a/html/scrollbar.html b/html/scrollbar.html index 190d2f6..b0861df 100644 --- a/html/scrollbar.html +++ b/html/scrollbar.html @@ -15,5 +15,9 @@ +
+ + +
diff --git a/html/searchform.html b/html/searchform.html new file mode 100644 index 0000000..fcc6e4b --- /dev/null +++ b/html/searchform.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/html/tc.css b/html/tc.css index cf572e1..266457e 100644 --- a/html/tc.css +++ b/html/tc.css @@ -41,3 +41,28 @@ position: absolute; right: 0; } + +.search_form { + display: flex; + width: 70%; + margin-left: auto; + margin-right: auto; + margin-top: 1em; +} + +.search_form input[name="search"] { + flex-grow: 1; + margin-left: .5em; + height: 2em; + box-sizing: border-box; + font-size: 1.25em; +} + +.search_form input[type="submit"] { + flex-grow: 0; + height: 2em; + width: 2em; + text-align: middle; + box-sizing: border-box; + font-size: 1.25em; +} diff --git a/index.html b/index.html index aa36267..1ef4bec 100644 --- a/index.html +++ b/index.html @@ -10,24 +10,6 @@ - diff --git a/src/Action.hs b/src/Action.hs index 6b46da3..1d9fb42 100644 --- a/src/Action.hs +++ b/src/Action.hs @@ -15,6 +15,7 @@ import Network.Http (HttpResult) import Network.SiteType (Site) import qualified Component.ThreadView as Thread import qualified Component.TimeControl as TC +import qualified Component.Search as Search data GetThreadArgs = GetThreadArgs { website :: Text @@ -30,6 +31,7 @@ data Action | forall a. (FromJSON a) => ClientAction (HttpResult a -> Action) (C.Action a) | ThreadAction Thread.Action | TimeAction TC.Time + | SearchAction Search.Action | GoToTime UTCTime | ChangeURI URI | NoAction diff --git a/src/Component/Search.hs b/src/Component/Search.hs new file mode 100644 index 0000000..a970064 --- /dev/null +++ b/src/Component/Search.hs @@ -0,0 +1,71 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Component.Search +( view +, Interface (..) +, update +, Model (..) +, Action (..) +) where + +import Miso + ( View + , class_ + , action_ + , method_ + , input_ + , type_ + , value_ + , name_ + , form_ + , onChange + , onSubmit + , Effect + , (<#) + , consoleLog + , noEff + ) +import GHCJS.DOM.Types (JSString) + +data Action = SearchChange JSString | OnSubmit | NoAction + +data Model = Model + { search_term :: JSString + } deriving Eq + +data Interface a = Interface + { passAction :: Action -> a + } + + +update :: Interface a -> Action -> Model -> Effect a Model +update iface (SearchChange q) model = model { search_term = q } <# do + consoleLog q + return $ (passAction iface) NoAction + +update iface OnSubmit model = model <# do + consoleLog $ "Submit!" <> search_term model + return $ (passAction iface) NoAction + +update _ NoAction m = noEff m + +view :: Interface a -> View a +view iface = form_ + [ class_ "search_form" + , action_ "/search" + , method_ "GET" + , onSubmit $ pass OnSubmit + ] + [ input_ + [ type_ "submit" + , value_ "🔍" + ] + , input_ + [ type_ "text" + , name_ "search" + , onChange $ pass . SearchChange + ] + ] + + where + pass = passAction iface diff --git a/src/Component/ThreadView.hs b/src/Component/ThreadView.hs index 7dcc5ec..35ccf6e 100644 --- a/src/Component/ThreadView.hs +++ b/src/Component/ThreadView.hs @@ -184,7 +184,7 @@ reply m backlinks (post, parts) = div_ files_or_embed_view :: View a files_or_embed_view = case (Post.embed post) of - Just txt -> embed post + Just _ -> embed post Nothing -> files (media_root m) site_ post site_ :: Site diff --git a/src/Main.hs b/src/Main.hs index 1d70505..133a401 100644 --- a/src/Main.hs +++ b/src/Main.hs @@ -50,6 +50,7 @@ import qualified Network.CatalogPostType as CatalogPost import qualified Component.CatalogGrid as Grid import qualified Component.ThreadView as Thread import qualified Component.TimeControl as TC +import qualified Component.Search as Search data Model = Model @@ -60,6 +61,7 @@ data Model = Model , media_root_ :: JSString , current_time :: UTCTime , tc_model :: TC.Model + , search_model :: Search.Model } deriving Eq @@ -95,6 +97,7 @@ initialModel pgroot client_fetch_count media_root u t = Model , media_root_ = media_root , current_time = t , tc_model = TC.initialModel 0 + , search_model = Search.Model { Search.search_term = "" } } getMetadata :: String -> IO (Maybe JSString) @@ -164,6 +167,7 @@ mainView model = view , time_ [] [ text $ pack $ show $ current_time model ] ] , TC.view iTime (tc_model m) + , Search.view iSearch , Grid.view iGrid (grid_model model) ] @@ -247,6 +251,10 @@ mainUpdate (TimeAction ta) m = TC.update iTime ta (tc_model m) >>= \tm -> noEff m { tc_model = tm } +mainUpdate (SearchAction sa) m = + Search.update iSearch sa (search_model m) + >>= \sm -> noEff m { search_model = sm } + iGrid :: Grid.Interface Action iGrid = Grid.Interface { Grid.passAction = GridAction @@ -275,3 +283,6 @@ iTime = TC.Interface { TC.passAction = TimeAction , TC.goTo = GoToTime } + +iSearch :: Search.Interface Action +iSearch = Search.Interface { passAction = SearchAction } diff --git a/static/style.css b/static/style.css index a592231..3089f3b 100644 --- a/static/style.css +++ b/static/style.css @@ -294,8 +294,7 @@ input[type="text"],input[type="password"],textarea { word-spacing: normal; font-size: inherit; font-family: sans-serif; - - padding:0px!important; + padding:0px; } @@ -2015,3 +2014,49 @@ span.orangeQuote { .options_general_tab--select_opt select { float: none; } + +/* + * Deviations from original stylesheet specific to chandlr-miso + */ + +.post.op.multifile, +.post.reply.multifile .body { + clear: both; +} + +.time-slider { + width: 70%; + margin-left: auto; + margin-right: auto; + display: block; +} + +.page_heading * { + display: block; + text-align: center; +} + +.search_form { + display: flex; + width: 70%; + margin: 1em auto; +} + +.search_form input[name="search"] { + flex-grow: 1; + margin-left: .5em; + height: 2em; + box-sizing: border-box; + font-size: 1.25em; + padding: 0 .5em; +} + +.search_form input[type="submit"] { + flex-grow: 0; + height: 2em; + width: 2em; + text-align: middle; + box-sizing: border-box; + font-size: 1.25em; +} +