github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/src/Views/TopBar.elm (about)

     1  module Views.TopBar exposing
     2      ( breadcrumbs
     3      , concourseLogo
     4      )
     5  
     6  import Assets
     7  import Concourse
     8  import Html exposing (Html)
     9  import Html.Attributes
    10      exposing
    11          ( class
    12          , href
    13          , id
    14          )
    15  import Message.Message exposing (DomID(..), Message(..))
    16  import Routes
    17  import Url
    18  import Views.Styles as Styles
    19  
    20  
    21  concourseLogo : Html Message
    22  concourseLogo =
    23      Html.a (href "/" :: Styles.concourseLogo) []
    24  
    25  
    26  breadcrumbs : Routes.Route -> Html Message
    27  breadcrumbs route =
    28      Html.div
    29          (id "breadcrumbs" :: Styles.breadcrumbContainer)
    30      <|
    31          case route of
    32              Routes.Pipeline { id } ->
    33                  [ pipelineBreadcumb
    34                      { teamName = id.teamName
    35                      , pipelineName = id.pipelineName
    36                      }
    37                  ]
    38  
    39              Routes.Build { id } ->
    40                  [ pipelineBreadcumb
    41                      { teamName = id.teamName
    42                      , pipelineName = id.pipelineName
    43                      }
    44                  , breadcrumbSeparator
    45                  , jobBreadcrumb id.jobName
    46                  ]
    47  
    48              Routes.Resource { id } ->
    49                  [ pipelineBreadcumb
    50                      { teamName = id.teamName
    51                      , pipelineName = id.pipelineName
    52                      }
    53                  , breadcrumbSeparator
    54                  , resourceBreadcrumb id.resourceName
    55                  ]
    56  
    57              Routes.Job { id } ->
    58                  [ pipelineBreadcumb
    59                      { teamName = id.teamName
    60                      , pipelineName = id.pipelineName
    61                      }
    62                  , breadcrumbSeparator
    63                  , jobBreadcrumb id.jobName
    64                  ]
    65  
    66              _ ->
    67                  []
    68  
    69  
    70  breadcrumbComponent :
    71      { icon :
    72          { component : Assets.ComponentType
    73          , widthPx : Float
    74          , heightPx : Float
    75          }
    76      , name : String
    77      }
    78      -> List (Html Message)
    79  breadcrumbComponent { name, icon } =
    80      [ Html.div
    81          (Styles.breadcrumbComponent icon)
    82          []
    83      , Html.text <| decodeName name
    84      ]
    85  
    86  
    87  breadcrumbSeparator : Html Message
    88  breadcrumbSeparator =
    89      Html.li
    90          (class "breadcrumb-separator" :: Styles.breadcrumbItem False)
    91          [ Html.text "/" ]
    92  
    93  
    94  pipelineBreadcumb : Concourse.PipelineIdentifier -> Html Message
    95  pipelineBreadcumb pipelineId =
    96      Html.a
    97          ([ id "breadcrumb-pipeline"
    98           , href <|
    99              Routes.toString <|
   100                  Routes.Pipeline { id = pipelineId, groups = [] }
   101           ]
   102              ++ Styles.breadcrumbItem True
   103          )
   104          (breadcrumbComponent
   105              { icon =
   106                  { component = Assets.PipelineComponent
   107                  , widthPx = 28
   108                  , heightPx = 16
   109                  }
   110              , name = pipelineId.pipelineName
   111              }
   112          )
   113  
   114  
   115  jobBreadcrumb : String -> Html Message
   116  jobBreadcrumb jobName =
   117      Html.li
   118          (id "breadcrumb-job" :: Styles.breadcrumbItem False)
   119          (breadcrumbComponent
   120              { icon =
   121                  { component = Assets.JobComponent
   122                  , widthPx = 32
   123                  , heightPx = 17
   124                  }
   125              , name = jobName
   126              }
   127          )
   128  
   129  
   130  resourceBreadcrumb : String -> Html Message
   131  resourceBreadcrumb resourceName =
   132      Html.li
   133          (id "breadcrumb-resource" :: Styles.breadcrumbItem False)
   134          (breadcrumbComponent
   135              { icon =
   136                  { component = Assets.ResourceComponent
   137                  , widthPx = 32
   138                  , heightPx = 17
   139                  }
   140              , name = resourceName
   141              }
   142          )
   143  
   144  
   145  decodeName : String -> String
   146  decodeName name =
   147      Maybe.withDefault name (Url.percentDecode name)