package and option detailed view (#17)

fixes #12
fixes #13

elm.json

@@ -13,15 +13,18 @@
             "elm/http": "2.0.0",
             "elm/json": "1.1.3",
             "elm/url": "1.0.0",
+            "hecrj/html-parser": "2.3.4",
             "krisajenkins/remotedata": "6.0.1",
             "truqu/elm-base64": "2.0.4"
         },
         "indirect": {
             "elm/bytes": "1.0.8",
             "elm/file": "1.0.5",
+            "elm/parser": "1.1.0",
             "elm/regex": "1.0.0",
             "elm/time": "1.0.0",
-            "elm/virtual-dom": "1.0.2"
+            "elm/virtual-dom": "1.0.2",
+            "rtfeldman/elm-hex": "1.0.0"
         }
     },
     "test-dependencies": {

src/Page/Options.elm

@@ -13,7 +13,13 @@ import ElasticSearch
 import Html
     exposing
         ( Html
+        , a
+        , dd
         , div
+        , dl
+        , dt
+        , pre
+        , span
         , table
         , tbody
         , td
@@ -26,11 +32,15 @@ import Html.Attributes
     exposing
         ( class
         , colspan
+        , href
+        , property
         )
 import Html.Events
     exposing
         ( onClick
         )
+import Html.Parser
+import Html.Parser.Util
 import Json.Decode
 
 
@@ -122,8 +132,7 @@ viewResultItem showDetailsFor item =
     let
         packageDetails =
             if Just item.id == showDetailsFor then
-                [ td [ colspan 1 ]
+                [ td [ colspan 1 ] [ viewResultItemDetails item ]
-                    [ text "This are details!" ]
                 ]
 
             else
@@ -135,6 +144,63 @@ viewResultItem showDetailsFor item =
         :: packageDetails
 
 
+viewResultItemDetails :
+    ElasticSearch.ResultItem ResultItemSource
+    -> Html Msg
+viewResultItemDetails item =
+    let
+        default =
+            "Not given"
+
+        asText value =
+            span [] <|
+                case Html.Parser.run value of
+                    Ok nodes ->
+                        Html.Parser.Util.toVirtualDom nodes
+
+                    Err _ ->
+                        []
+
+        asCode value =
+            pre [] [ text value ]
+
+        asLink value =
+            a [ href value ] [ text value ]
+
+        -- TODO: this should take channel into account as well
+        githubUrlPrefix =
+            "https://github.com/NixOS/nixpkgs-channels/blob/nixos-unstable/"
+
+        asGithubLink value =
+            a
+                [ href <| githubUrlPrefix ++ (value |> String.replace ":" "#L") ]
+                [ text <| value ]
+
+        withDefault wrapWith value =
+            case value of
+                "" ->
+                    text default
+
+                "None" ->
+                    text default
+
+                _ ->
+                    wrapWith value
+    in
+    dl [ class "dl-horizontal" ]
+        [ dt [] [ text "Description" ]
+        , dd [] [ withDefault asText item.source.description ]
+        , dt [] [ text "Default value" ]
+        , dd [] [ withDefault asCode item.source.default ]
+        , dt [] [ text "Type" ]
+        , dd [] [ withDefault asCode item.source.type_ ]
+        , dt [] [ text "Example value" ]
+        , dd [] [ withDefault asCode item.source.example ]
+        , dt [] [ text "Declared in" ]
+        , dd [] [ withDefault asGithubLink item.source.source ]
+        ]
+
+
 
 -- API
 

src/Page/Packages.elm

@@ -13,7 +13,13 @@ import ElasticSearch
 import Html
     exposing
         ( Html
+        , a
+        , code
+        , dd
         , div
+        , dl
+        , dt
+        , li
         , table
         , tbody
         , td
@@ -21,11 +27,13 @@ import Html
         , th
         , thead
         , tr
+        , ul
         )
 import Html.Attributes
     exposing
         ( class
         , colspan
+        , href
         )
 import Html.Events
     exposing
@@ -143,8 +151,7 @@ viewResultItem showDetailsFor item =
     let
         packageDetails =
             if Just item.id == showDetailsFor then
-                [ td [ colspan 4 ]
+                [ td [ colspan 4 ] [ viewResultItemDetails item ]
-                    [ text "This are details!" ]
                 ]
 
             else
@@ -159,6 +166,102 @@ viewResultItem showDetailsFor item =
         :: packageDetails
 
 
+viewResultItemDetails :
+    ElasticSearch.ResultItem ResultItemSource
+    -> Html Msg
+viewResultItemDetails item =
+    let
+        default =
+            "Not specified"
+
+        asText =
+            text
+
+        asLink value =
+            a [ href value ] [ text value ]
+
+        -- TODO: this should take channel into account as well
+        githubUrlPrefix =
+            "https://github.com/NixOS/nixpkgs-channels/blob/nixos-unstable/"
+
+        cleanPosition value =
+            if String.startsWith "source/" value then
+                String.dropLeft 7 value
+
+            else
+                value
+
+        asGithubLink value =
+            a
+                [ href <| githubUrlPrefix ++ (value |> String.replace ":" "#L" |> cleanPosition) ]
+                [ text <| cleanPosition value ]
+
+        withDefault wrapWith maybe =
+            case maybe of
+                Nothing ->
+                    text default
+
+                Just "" ->
+                    text default
+
+                Just value ->
+                    wrapWith value
+
+        convertToGithubUrl value =
+            if String.startsWith "source/" value then
+                githubUrlPrefix ++ String.dropLeft 7 value
+
+            else
+                githubUrlPrefix ++ value
+
+        -- TODO: add links to hydra for hydra_platforms
+        -- example: https://hydra.nixos.org/job/nixos/release-20.03/nixpkgs.gnome3.accerciser.i686-linux
+        showPlatform platform =
+            li [] [ text platform ]
+
+        showLicence license =
+            li []
+                [ case ( license.fullName, license.url ) of
+                    ( Nothing, Nothing ) ->
+                        text default
+
+                    ( Just fullName, Nothing ) ->
+                        text fullName
+
+                    ( Nothing, Just url ) ->
+                        a [ href url ] [ text default ]
+
+                    ( Just fullName, Just url ) ->
+                        a [ href url ] [ text fullName ]
+                ]
+
+        showMaintainer maintainer =
+            li []
+                [ a
+                    [ href <| "https://github.com/" ++ maintainer.github ]
+                    [ text <| maintainer.name ++ " <" ++ maintainer.email ++ ">" ]
+                ]
+    in
+    dl [ class "dl-horizontal" ]
+        [ dt [] [ text "Install command" ]
+        , dd [] [ code [] [ text <| "nix-env -iA nixos." ++ item.source.attr_name ] ]
+        , dt [] [ text <| "Nix expression" ]
+
+        -- TODO: point to correct branch/channel
+        , dd [] [ withDefault asGithubLink item.source.position ]
+        , dt [] [ text "Platforms" ]
+        , dd [] [ ul [ class "inline" ] <| List.map showPlatform item.source.platforms ]
+        , dt [] [ text "Homepage" ]
+        , dd [] [ withDefault asLink item.source.homepage ]
+        , dt [] [ text "Licenses" ]
+        , dd [] [ ul [ class "inline" ] <| List.map showLicence item.source.licenses ]
+        , dt [] [ text "Maintainers" ]
+        , dd [] [ ul [ class "inline" ] <| List.map showMaintainer item.source.maintainers ]
+        , dt [] [ text "Long description" ]
+        , dd [] [ withDefault asText item.source.longDescription ]
+        ]
+
+
 
 -- API
 

src/index.scss

@@ -25,8 +25,33 @@ header .navbar {
     }
   }
   .search-result {
-    tbody tr {
+    tbody > tr {
       cursor: pointer;
     }
+    tbody > td > dl > dd > ul.inline {
+      margin: 0;
+      li {
+        margin: 0;
+        padding: 0;
+      }
+      li::after {
+        content: ", ";
+        padding-right: 0.5em;
+      }
+      li:last-child::after {
+        content: "";
+      }
+    }
+    tbody > td > dl > dd > pre {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      line-height: 20px;
+      margin: 0;
+    }
+    tbody > td > dl > dt,
+    tbody > td > dl > dd {
+      margin-bottom: 1em;
+    }
   }
 }