diff --git a/part12/ElmHub.elm b/part12/ElmHub.elm index db422c7..c038d6c 100644 --- a/part12/ElmHub.elm +++ b/part12/ElmHub.elm @@ -35,8 +35,8 @@ type alias Model = type alias SearchOptions = - { sort : String - , ascending : Bool + { minStars : Int + , minStarsError : Maybe String , searchInDescription : Bool , userFilter : String } @@ -55,8 +55,8 @@ initialModel = , results = [] , errorMessage = Nothing , options = - { sort = "stars" - , ascending = False + { minStars = 0 + , minStarsError = Nothing , searchInDescription = True , userFilter = "" } @@ -80,12 +80,12 @@ viewOptions opts = -- Debug.log "viewOptions was called" <| div [ class "search-options" ] [ div [ class "search-option" ] - [ label [ class "top-label" ] [ text "Sort by" ] - , select [ onChange SetSort, value opts.sort ] - [ option [ value "stars" ] [ text "Stars" ] - , option [ value "forks" ] [ text "Forks" ] - , option [ value "updated" ] [ text "Updated" ] + [ label [ class "top-label" ] [ text "Minimum Stars" ] + , input + [ onBlurWithTargetValue SetMinStars + , defaultValue (toString opts.minStars) ] + [] ] , div [ class "search-option" ] [ label [ class "top-label" ] [ text "Owned by" ] @@ -97,10 +97,8 @@ viewOptions opts = ] [] ] - , label [ class "search-option" ] - [ input [ type' "checkbox", checked opts.ascending, onCheck SetAscending ] [] - , text "Sort ascending" - ] + , div [ class "search-option" ] + [ viewMinStarsError opts.minStarsError ] , label [ class "search-option" ] [ input [ type' "checkbox", checked opts.searchInDescription, onCheck SetSearchInDescription ] [] , text "Search in description" @@ -108,6 +106,16 @@ viewOptions opts = ] +viewMinStarsError : Maybe String -> Html msg +viewMinStarsError message = + case message of + Nothing -> + text " " + + Just errorMessage -> + div [ class "stars-error" ] [ text errorMessage ] + + type Msg = Search | Options OptionsMsg @@ -155,6 +163,11 @@ update msg model = ( model, Cmd.none ) +onBlurWithTargetValue : (String -> msg) -> Attribute msg +onBlurWithTargetValue toMsg = + on "blur" (Json.Decode.map toMsg targetValue) + + tableConfig : Table.Config SearchResult Msg tableConfig = Table.config @@ -185,11 +198,16 @@ nameColumn = updateOptions : OptionsMsg -> SearchOptions -> SearchOptions updateOptions optionsMsg options = case optionsMsg of - SetSort sort -> - { options | sort = sort } + SetMinStars minStarsStr -> + case String.toInt minStarsStr of + Ok minStars -> + { options | minStars = minStars, minStarsError = Nothing } - SetAscending ascending -> - { options | ascending = ascending } + Err _ -> + { options + | minStarsError = + Just "Please enter an integer!" + } SetSearchInDescription searchInDescription -> { options | searchInDescription = searchInDescription } @@ -233,11 +251,16 @@ viewErrorMessage errorMessage = text "" -viewSearchResult : SearchResult -> Html Msg +viewStars : SearchResult -> Table.HtmlDetails Msg +viewStars result = + Table.HtmlDetails [] + [ span [ class "star-count" ] [ text (toString result.stars) ] ] + + +viewSearchResult : SearchResult -> Table.HtmlDetails Msg viewSearchResult result = - li [] - [ span [ class "star-count" ] [ text (toString result.stars) ] - , a [ href ("https://github.com/" ++ result.name), target "_blank" ] + Table.HtmlDetails [] + [ a [ href ("https://github.com/" ++ result.name), target "_blank" ] [ text result.name ] , button [ class "hide-result", onClick (DeleteById result.id) ] [ text "X" ] @@ -245,8 +268,7 @@ viewSearchResult result = type OptionsMsg - = SetSort String - | SetAscending Bool + = SetMinStars String | SetSearchInDescription Bool | SetUserFilter String @@ -294,17 +316,11 @@ getQueryString model = else "+in:name" ) + ++ "+stars:>=" + ++ (toString model.options.minStars) ++ "+language:elm" ++ (if String.isEmpty model.options.userFilter then "" else "+user:" ++ model.options.userFilter ) - ++ "&sort=" - ++ model.options.sort - ++ "&order=" - ++ (if model.options.ascending then - "asc" - else - "desc" - ) diff --git a/part12/style.css b/part12/style.css index 26acacd..87226bc 100644 --- a/part12/style.css +++ b/part12/style.css @@ -91,6 +91,14 @@ button:focus, input:focus { outline: none; } +.stars-error { + background-color: #FF9632; + font-size: 16px; + padding: 10px; + margin-right: 24px; + border-radius: 10px; +} + .error { background-color: #FF9632; padding: 20px; @@ -137,3 +145,17 @@ button:focus, input:focus { display: block; color: #555; } + +th { + text-align: left; + cursor: pointer; +} + +th:hover { + color: rgb(96, 181, 204); +} + +th, td { + font-size: 18px; + padding-right: 20px; +} diff --git a/part13/ElmHub.elm b/part13/ElmHub.elm index eff2280..ba6bde6 100644 --- a/part13/ElmHub.elm +++ b/part13/ElmHub.elm @@ -193,11 +193,16 @@ viewErrorMessage errorMessage = text "" -viewSearchResult : SearchResult -> Html Msg +viewStars : SearchResult -> Table.HtmlDetails Msg +viewStars result = + Table.HtmlDetails [] + [ span [ class "star-count" ] [ text (toString result.stars) ] ] + + +viewSearchResult : SearchResult -> Table.HtmlDetails Msg viewSearchResult result = - li [] - [ span [ class "star-count" ] [ text (toString result.stars) ] - , a [ href ("https://github.com/" ++ result.name), target "_blank" ] + Table.HtmlDetails [] + [ a [ href ("https://github.com/" ++ result.name), target "_blank" ] [ text result.name ] , button [ class "hide-result", onClick (DeleteById result.id) ] [ text "X" ] diff --git a/part13/ElmHubCss.elm b/part13/ElmHubCss.elm index 06a95f2..3fccf0d 100644 --- a/part13/ElmHubCss.elm +++ b/part13/ElmHubCss.elm @@ -145,4 +145,18 @@ css = -- display: block; -- color: #555; -- } + -- + -- th { + -- text-align: left; + -- cursor: pointer; + -- } + -- + -- th:hover { + -- color: rgb(96, 181, 204); + -- } + -- + -- th, td { + -- font-size: 18px; + -- padding-right: 20px; + -- } ]