opensource/magistrala
1
0
Fork 0
mirror of https://github.com/absmach/magistrala.git synced 2026-06-23 04:10:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

NOISSUE - Add bootstrap cards in version view (#607)

Browse Source 
* Add total # things to Thing model

Signed-off-by: Darko Draskovic <darko.draskovic@gmail.com>

* Add basic pagination for Thing

Signed-off-by: Darko Draskovic <darko.draskovic@gmail.com>

* Add bootstrap cards in version view

Signed-off-by: Ivan Milošević <iva@blokovi.com>

* Add pagination helper function & Channel pagination

Signed-off-by: Darko Draskovic <darko.draskovic@gmail.com>

* modify styling

Signed-off-by: Ivan Milošević <iva@blokovi.com>

* Styling

Signed-off-by: Ivan Milošević <iva@blokovi.com>

* Mainflux logo

Signed-off-by: Ivan Milošević <iva@blokovi.com>
This commit is contained in:
Ivan Milošević
2019-02-22 15:27:31 +01:00
committed by Darko Draskovic
parent 1b9f359539
commit a9a4dd7c73
5 changed files with 173 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/css/mainflux.css
+19
View File
@@ -3,6 +3,9 @@
SPDX-License-Identifier: Apache-2.0 */
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800');
.btn-primary {
color: #fff;
background-color: #113f67;
@@ -13,3 +16,19 @@
background-color: #408ab4;
border-color: #408ab4;
}
body {
background-color: #f3f3f4 !important;
font-family: 'Roboto', sans-serif !important;
}
.title{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
transform: scaleY(0.95);
text-align: center;
margin: 1rem 0;
}
.card-body{
padding: 4rem;
}
ui/src/Channel.elm
+68 -15
View File
@@ -1,6 +1,9 @@
module Channel exposing (Channel, Model, Msg(..), initial, update, view)
import Bootstrap.Accordion as Accordion
import Bootstrap.Button as Button
import Bootstrap.Card as Card
import Bootstrap.Card.Block as Block
import Bootstrap.Form as Form
import Bootstrap.Form.Input as Input
import Bootstrap.Form.InputGroup as InputGroup
@@ -42,6 +45,7 @@ type alias Model =
, limit : String
, response : String
, channels : Channels
, accordionState : Accordion.State
}
@@ -55,6 +59,7 @@ initial =
{ list = []
, total = 0
}
, accordionState = Accordion.initialState
}
@@ -74,9 +79,15 @@ type Msg
| SubmitPage Int
-- | AccordionMsg Accordion.State
update : Msg -> Model -> String -> ( Model, Cmd Msg )
update msg model token =
case msg of
-- AccordionMsg state ->
-- ( Debug.log "debug: " { model | accordionState = state }, Cmd.none )
SubmitName name ->
( { model | name = name }, Cmd.none )
@@ -171,23 +182,59 @@ view model =
]
, Grid.row []
[ Grid.col []
[ Table.simpleTable
( Table.simpleThead
[ Table.th [] [ text "Name" ]
, Table.th [] [ text "Id" ]
[ Card.config []
|> Card.block []
[ Block.custom
(Table.table
{ options = [ Table.striped, Table.hover, Table.small ]
, thead =
Table.simpleThead
[ Table.th [] [ text "Name" ]
, Table.th [] [ text "Id" ]
]
, tbody =
Table.tbody []
(List.append
[ Table.tr []
[ Table.td [] [ Input.text [ Input.attrs [ id "name", value model.name ], Input.onInput SubmitName ] ]
, Table.td [] []
, Table.td [] [ Button.button [ Button.primary, Button.attrs [ Spacing.ml1 ], Button.onClick ProvisionChannel ] [ text "+" ] ]
]
]
(genTableRows model.channels.list)
)
}
)
]
, Table.tbody []
(List.append
[ Table.tr []
[ Table.td [] [ Input.text [ Input.attrs [ id "name", value model.name ], Input.onInput SubmitName ] ]
, Table.td [] []
, Table.td [] [ Button.button [ Button.primary, Button.attrs [ Spacing.ml1 ], Button.onClick ProvisionChannel ] [ text "+" ] ]
]
]
(genTableRows model.channels.list)
)
)
|> Card.view
]
-- [ Accordion.config AccordionMsg
-- |> Accordion.withAnimation
-- |> Accordion.cards
-- [ Accordion.card
-- { id = "card1"
-- , options = []
-- , header =
-- Accordion.header [] <| Accordion.toggle [] [ text "Card 1" ]
-- , blocks =
-- [ Accordion.block []
-- [ Block.text [] [ text "Lorem ipsum etc" ] ]
-- ]
-- }
-- , Accordion.card
-- { id = "card2"
-- , options = []
-- , header =
-- Accordion.header [] <| Accordion.toggle [] [ text "Card 2" ]
-- , blocks =
-- [ Accordion.block []
-- [ Block.text [] [ text "Lorem ipsum etc" ] ]
-- ]
-- }
-- ]
-- |> Accordion.view model.accordionState
-- ]
]
, Helpers.genPagination model.channels.total SubmitPage
]
@@ -341,3 +388,9 @@ buildUrl path offset limit =
B.crossOrigin url.base
path
(Helpers.buildQueryParamList offset limit query)
-- subscriptions : Model -> Sub Msg
-- subscriptions model =
-- Accordion.subscriptions model.accordionState AccordionMsg
ui/src/Connection.elm
+2 -2
View File
@@ -171,8 +171,8 @@ view model =
, Grid.row []
[ Grid.col []
[ Form.form []
[ Button.button [ Button.primary, Button.attrs [ Spacing.ml1 ], Button.onClick Connect ] [ text "Connect" ]
, Button.button [ Button.primary, Button.attrs [ Spacing.ml1 ], Button.onClick Disconnect ] [ text "Disonnect" ]
[ Button.button [ Button.success, Button.attrs [ Spacing.ml1 ], Button.onClick Connect ] [ text "Connect" ]
, Button.button [ Button.danger, Button.attrs [ Spacing.ml1 ], Button.onClick Disconnect ] [ text "Disonnect" ]
]
]
]
ui/src/Main.elm
+5 -5
View File
@@ -155,7 +155,7 @@ update msg model =
v =
case subMsg of
User.GotToken _ ->
"account"
"version"
_ ->
model.view
@@ -274,12 +274,12 @@ view model =
menu =
if loggedIn then
[ ButtonGroup.linkButton [ Button.primary, Button.onClick Account, buttonAttrs ] [ text "account" ]
, ButtonGroup.linkButton [ Button.primary, Button.onClick Things, buttonAttrs ] [ text "things" ]
-- [ ButtonGroup.linkButton [ Button.primary, Button.onClick Account, buttonAttrs ] [ text "account" ]
[ ButtonGroup.linkButton [ Button.primary, Button.onClick Things, buttonAttrs ] [ text "things" ]
, ButtonGroup.linkButton [ Button.primary, Button.onClick Channels, buttonAttrs ] [ text "channels" ]
, ButtonGroup.linkButton [ Button.primary, Button.onClick Connection, buttonAttrs ] [ text "connection" ]
, ButtonGroup.linkButton [ Button.primary, Button.onClick Messages, buttonAttrs ] [ text "messages" ]
, ButtonGroup.linkButton [ Button.primary, Button.onClick Version, buttonAttrs ] [ text "version" ]
, ButtonGroup.linkButton [ Button.primary, Button.onClick Version, buttonAttrs ] [ text "dashboard" ]
]
else
@@ -338,7 +338,7 @@ view model =
[ Grid.row []
[ Grid.col
[ Col.attrs [] ]
[ h3 [] [ text "Mainflux" ] ]
[ h3 [ class "title" ] [ text "MAINFLUX" ] ]
]
, Grid.row []
[ Grid.col
ui/src/Version.elm
+79 -2
View File
@@ -1,7 +1,11 @@
module Version exposing (Model, Msg(..), initial, update, view)
import Bootstrap.Button as Button
import Bootstrap.Card as Card
import Bootstrap.Card.Block as Block
import Bootstrap.Grid as Grid
import Bootstrap.Text as Text
import Bootstrap.Utilities.Spacing as Spacing
import Error
import Helpers
import Html exposing (..)
@@ -9,6 +13,7 @@ import Html.Attributes exposing (..)
import Http
import Json.Decode as D
import Json.Encode as E
import Thing
import Url.Builder as B
@@ -54,8 +59,80 @@ update msg model =
view : Model -> Html Msg
view model =
Grid.container []
-- Grid.container []
-- [ Grid.row []
-- [ Grid.col [] [ text model.response ]
-- ]
-- ]
-- Grid.container []
-- [ Grid.row []
-- [ Grid.col []
-- [ Card.config
-- []
-- |> Card.header [ class "text-center" ]
-- [ img [ src "assets/images/elm-bootstrap.svg" ] []
-- , h3 [ Spacing.mt2 ] [ text "Custom Card Header" ]
-- ]
-- |> Card.block []
-- [ Block.titleH4 [] [ text "Card title" ]
-- , Block.text [] [ text "Some quick example text to build on the card title and make up the bulk of the card's content." ]
-- , Block.custom <|
-- Button.button [ Button.primary ] [ text "Go somewhere" ]
-- ]
-- |> Card.view
-- ]
-- ]
-- ]
Grid.container
[]
[ Grid.row []
[ Grid.col [] [ text model.response ]
[ Grid.col []
[ Card.deck (cardList model)
]
]
]
-- Card.config
-- [ Card.attrs [] ]
-- |> Card.header [ class "text-center" ]
-- [ img [ src "assets/images/elm-bootstrap.svg" ] []
-- , h3 [ Spacing.mt2 ] [ text "Custom Card Header" ]
-- ]
-- |> Card.block []
-- [ Block.titleH4 [] [ text "Card title" ]
-- , Block.text [] [ text "Some quick example text to build on the card title and make up the bulk of the card's content." ]
-- , Block.custom <|
-- Button.button [ Button.primary ] [ text "Go somewhere" ]
-- ]
-- |> Card.view
cardList : Model -> List (Card.Config msg)
cardList model =
[ Card.config
[ Card.secondary
, Card.textColor Text.white
]
|> Card.headerH3 [] [ text "Version" ]
|> Card.block []
[ Block.titleH4 [] [ text model.response ] ]
, Card.config
[ Card.info
, Card.textColor Text.white
]
|> Card.headerH3 [] [ text "Things" ]
|> Card.block []
[ Block.titleH4 [] [ text "69" ]
, Block.custom <|
Button.button [ Button.light ] [ text "Manage things" ]
]
, Card.config []
|> Card.headerH3 [] [ text "Channels" ]
|> Card.block []
[ Block.titleH4 [] [ text "69" ]
, Block.custom <|
Button.button [ Button.dark ] [ text "Manage channels" ]
]
]