From 963e09333c6a7fa97332bde8f207a4b27ef157f9 Mon Sep 17 00:00:00 2001 From: Sean Zicari Date: Sat, 2 Nov 2019 22:54:30 -0500 Subject: [PATCH] User info showing up. --- src/assets/scripts/elm/Components/Footer.elm | 15 + src/assets/scripts/elm/Components/Header.elm | 306 ++++++++++++++++++ src/assets/scripts/elm/Components/Sidebar.elm | 248 ++++++++++++++ src/assets/scripts/elm/Main.elm | 26 +- src/assets/scripts/elm/Pages/Dashboard.elm | 62 ++++ src/assets/scripts/elm/Session.elm | 15 +- src/assets/scripts/elm/index.js | 1 + src/assets/scripts/fancyloader/index.js | 8 + src/assets/scripts/index.js | 1 + src/index.html | 8 - 10 files changed, 674 insertions(+), 16 deletions(-) create mode 100644 src/assets/scripts/elm/Components/Footer.elm create mode 100644 src/assets/scripts/elm/Components/Header.elm create mode 100644 src/assets/scripts/elm/Components/Sidebar.elm create mode 100644 src/assets/scripts/elm/Pages/Dashboard.elm create mode 100644 src/assets/scripts/fancyloader/index.js diff --git a/src/assets/scripts/elm/Components/Footer.elm b/src/assets/scripts/elm/Components/Footer.elm new file mode 100644 index 0000000..84dfeae --- /dev/null +++ b/src/assets/scripts/elm/Components/Footer.elm @@ -0,0 +1,15 @@ +module Components.Footer exposing (view) + +import Html exposing (Html, a, footer, span, text) +import Html.Attributes exposing (class, href, target, title) + + +view : Html msg +view = + footer [ class "bdT ta-c p-30 lh-0 fsz-sm c-grey-600" ] + [ span [] + [ text "Copyright © 2017 Designed by" + , a [ href "https://colorlib.com", target "_blank", title "Colorlib" ] + [ text "Colorlib" ] + ] + ] diff --git a/src/assets/scripts/elm/Components/Header.elm b/src/assets/scripts/elm/Components/Header.elm new file mode 100644 index 0000000..680e4b0 --- /dev/null +++ b/src/assets/scripts/elm/Components/Header.elm @@ -0,0 +1,306 @@ +module Components.Header exposing (view) + +import Html + exposing + ( Html + , a + , div + , i + , img + , input + , li + , p + , small + , span + , text + , ul + ) +import Html.Attributes + exposing + ( alt + , attribute + , class + , href + , id + , placeholder + , src + , type_ + ) +import Session exposing (User) + + +view : User -> Html msg +view user = + div [ class "header navbar" ] + [ div [ class "header-container" ] + [ ul [ class "nav-left" ] + [ li [] + [ a [ id "sidebar-toggle", class "sidebar-toggle", href "javascript:void(0);" ] + [ i [ class "ti-menu" ] + [] + ] + ] + , li [ class "search-box" ] + [ a [ class "search-toggle no-pdd-right", href "javascript:void(0);" ] + [ i [ class "search-icon ti-search pdd-right-10" ] + [] + , i [ class "search-icon-close ti-close pdd-right-10" ] + [] + ] + ] + , li [ class "search-input" ] + [ input [ class "form-control", type_ "text", placeholder "Search..." ] + [] + ] + ] + , ul [ class "nav-right" ] + [ li [ class "notifications dropdown" ] + [ span [ class "counter bgc-red" ] + [ text "3" ] + , a [ href "", class "dropdown-toggle no-after", attribute "data-toggle" "dropdown" ] + [ i [ class "ti-bell" ] + [] + ] + , ul [ class "dropdown-menu" ] + [ li [ class "pX-20 pY-15 bdB" ] + [ i [ class "ti-bell pR-10" ] + [] + , span [ class "fsz-sm fw-600 c-grey-900" ] + [ text "Notifications" ] + ] + , li [] + [ ul [ class "ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm" ] + [ li [] + [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ] + [ div [ class "peer mR-15" ] + [ img [ class "w-3r bdrs-50p", src user.photoUrl, alt "" ] + [] + ] + , div [ class "peer peer-greed" ] + [ span [] + [ span [ class "fw-500" ] + [ text "Me" ] + , span [ class "c-grey-600" ] + [ text "liked your" + , span [ class "text-dark" ] + [ text "post" ] + ] + ] + , p [ class "m-0" ] + [ small [ class "fsz-xs" ] + [ text "5 mins ago" ] + ] + ] + ] + ] + , li [] + [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ] + [ div [ class "peer mR-15" ] + [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/2.jpg", alt "" ] + [] + ] + , div [ class "peer peer-greed" ] + [ span [] + [ span [ class "fw-500" ] + [ text "Moo Doe" ] + , span [ class "c-grey-600" ] + [ text "liked your" + , span [ class "text-dark" ] + [ text "cover image" ] + ] + ] + , p [ class "m-0" ] + [ small [ class "fsz-xs" ] + [ text "7 mins ago" ] + ] + ] + ] + ] + , li [] + [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ] + [ div [ class "peer mR-15" ] + [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/3.jpg", alt "" ] + [] + ] + , div [ class "peer peer-greed" ] + [ span [] + [ span [ class "fw-500" ] + [ text "Lee Doe" ] + , span [ class "c-grey-600" ] + [ text "commented on your" + , span [ class "text-dark" ] + [ text "video" ] + ] + ] + , p [ class "m-0" ] + [ small [ class "fsz-xs" ] + [ text "10 mins ago" ] + ] + ] + ] + ] + ] + ] + , li [ class "pX-20 pY-15 ta-c bdT" ] + [ span [] + [ a [ href "", class "c-grey-600 cH-blue fsz-sm td-n" ] + [ text "View All Notifications" + , i [ class "ti-angle-right fsz-xs mL-10" ] + [] + ] + ] + ] + ] + ] + , li [ class "notifications dropdown" ] + [ span [ class "counter bgc-blue" ] + [ text "3" ] + , a [ href "", class "dropdown-toggle no-after", attribute "data-toggle" "dropdown" ] + [ i [ class "ti-email" ] + [] + ] + , ul [ class "dropdown-menu" ] + [ li [ class "pX-20 pY-15 bdB" ] + [ i [ class "ti-email pR-10" ] + [] + , span [ class "fsz-sm fw-600 c-grey-900" ] + [ text "Emails" ] + ] + , li [] + [ ul [ class "ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm" ] + [ li [] + [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ] + [ div [ class "peer mR-15" ] + [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/1.jpg", alt "" ] + [] + ] + , div [ class "peer peer-greed" ] + [ div [] + [ div [ class "peers jc-sb fxw-nw mB-5" ] + [ div [ class "peer" ] + [ p [ class "fw-500 mB-0" ] + [ text "John Doe" ] + ] + , div [ class "peer" ] + [ small [ class "fsz-xs" ] + [ text "5 mins ago" ] + ] + ] + , span [ class "c-grey-600 fsz-sm" ] + [ text "Want to create your own customized data generator for your app..." ] + ] + ] + ] + ] + , li [] + [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ] + [ div [ class "peer mR-15" ] + [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/2.jpg", alt "" ] + [] + ] + , div [ class "peer peer-greed" ] + [ div [] + [ div [ class "peers jc-sb fxw-nw mB-5" ] + [ div [ class "peer" ] + [ p [ class "fw-500 mB-0" ] + [ text "Moo Doe" ] + ] + , div [ class "peer" ] + [ small [ class "fsz-xs" ] + [ text "15 mins ago" ] + ] + ] + , span [ class "c-grey-600 fsz-sm" ] + [ text "Want to create your own customized data generator for your app..." ] + ] + ] + ] + ] + , li [] + [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ] + [ div [ class "peer mR-15" ] + [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/3.jpg", alt "" ] + [] + ] + , div [ class "peer peer-greed" ] + [ div [] + [ div [ class "peers jc-sb fxw-nw mB-5" ] + [ div [ class "peer" ] + [ p [ class "fw-500 mB-0" ] + [ text "Lee Doe" ] + ] + , div [ class "peer" ] + [ small [ class "fsz-xs" ] + [ text "25 mins ago" ] + ] + ] + , span [ class "c-grey-600 fsz-sm" ] + [ text "Want to create your own customized data generator for your app..." ] + ] + ] + ] + ] + ] + ] + , li [ class "pX-20 pY-15 ta-c bdT" ] + [ span [] + [ a [ href "email.html", class "c-grey-600 cH-blue fsz-sm td-n" ] + [ text "View All Email" + , i [ class "fs-xs ti-angle-right mL-10" ] + [] + ] + ] + ] + ] + ] + , li [ class "dropdown" ] + [ a [ href "", class "dropdown-toggle no-after peers fxw-nw ai-c lh-1", attribute "data-toggle" "dropdown" ] + [ div [ class "peer mR-10" ] + [ img [ class "w-2r bdrs-50p", src user.photoUrl, alt "" ] + [] + ] + , div [ class "peer" ] + [ span [ class "fsz-sm c-grey-900" ] + [ text user.name ] + ] + ] + , ul [ class "dropdown-menu fsz-sm" ] + [ li [] + [ a [ href "", class "d-b td-n pY-5 bgcH-grey-100 c-grey-700" ] + [ i [ class "ti-settings mR-10" ] + [] + , span [] + [ text "Setting" ] + ] + ] + , li [] + [ a [ href "", class "d-b td-n pY-5 bgcH-grey-100 c-grey-700" ] + [ i [ class "ti-user mR-10" ] + [] + , span [] + [ text "Profile" ] + ] + ] + , li [] + [ a [ href "email.html", class "d-b td-n pY-5 bgcH-grey-100 c-grey-700" ] + [ i [ class "ti-email mR-10" ] + [] + , span [] + [ text "Messages" ] + ] + ] + , li [ attribute "role" "separator", class "divider" ] + [] + , li [] + [ a [ href "", class "d-b td-n pY-5 bgcH-grey-100 c-grey-700" ] + [ i [ class "ti-power-off mR-10" ] + [] + , span [] + [ text "Logout" ] + ] + ] + ] + ] + ] + ] + ] diff --git a/src/assets/scripts/elm/Components/Sidebar.elm b/src/assets/scripts/elm/Components/Sidebar.elm new file mode 100644 index 0000000..0284f5c --- /dev/null +++ b/src/assets/scripts/elm/Components/Sidebar.elm @@ -0,0 +1,248 @@ +module Components.Sidebar exposing (view) + +import Html exposing (Html, a, div, h5, i, img, li, span, text, ul) +import Html.Attributes exposing (class, href, src, alt) + + +view : Html msg +view = + div [ class "sidebar" ] + [ div [ class "sidebar-inner" ] + [ div [ class "sidebar-logo" ] + [ div [ class "peers ai-c fxw-nw" ] + [ div [ class "peer peer-greed" ] + [ a [ class "sidebar-link td-n", href "index.html" ] + [ div [ class "peers ai-c fxw-nw" ] + [ div [ class "peer" ] + [ div [ class "logo" ] + [ img [ src "assets/static/images/logo.png", alt "" ] + [] + ] + ] + , div [ class "peer peer-greed" ] + [ h5 [ class "lh-1 mB-0 logo-text" ] + [ text "InteroCare" ] + ] + ] + ] + ] + , div [ class "peer" ] + [ div [ class "mobile-toggle sidebar-toggle" ] + [ a [ href "", class "td-n" ] + [ i [ class "ti-arrow-circle-left" ] + [] + ] + ] + ] + ] + ] + , ul [ class "sidebar-menu scrollable pos-r" ] + [ li [ class "nav-item mT-30 actived" ] + [ a [ class "sidebar-link", href "index.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-blue-500 ti-home" ] + [] + ] + , span [ class "title" ] + [ text "Dashboard" ] + ] + ] + , li [ class "nav-item" ] + [ a [ class "sidebar-link", href "email.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-brown-500 ti-email" ] + [] + ] + , span [ class "title" ] + [ text "Email" ] + ] + ] + , li [ class "nav-item" ] + [ a [ class "sidebar-link", href "compose.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-blue-500 ti-share" ] + [] + ] + , span [ class "title" ] + [ text "Compose" ] + ] + ] + , li [ class "nav-item" ] + [ a [ class "sidebar-link", href "calendar.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-deep-orange-500 ti-calendar" ] + [] + ] + , span [ class "title" ] + [ text "Calendar" ] + ] + ] + , li [ class "nav-item" ] + [ a [ class "sidebar-link", href "chat.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-deep-purple-500 ti-comment-alt" ] + [] + ] + , span [ class "title" ] + [ text "Chat" ] + ] + ] + , li [ class "nav-item" ] + [ a [ class "sidebar-link", href "charts.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-indigo-500 ti-bar-chart" ] + [] + ] + , span [ class "title" ] + [ text "Charts" ] + ] + ] + , li [ class "nav-item" ] + [ a [ class "sidebar-link", href "forms.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-light-blue-500 ti-pencil" ] + [] + ] + , span [ class "title" ] + [ text "Forms" ] + ] + ] + , li [ class "nav-item dropdown" ] + [ a [ class "sidebar-link", href "ui.html" ] + [ span [ class "icon-holder" ] + [ i [ class "c-pink-500 ti-palette" ] + [] + ] + , span [ class "title" ] + [ text "UI Elements" ] + ] + ] + , li [ class "nav-item dropdown" ] + [ a [ class "dropdown-toggle", href "javascript:void(0);" ] + [ span [ class "icon-holder" ] + [ i [ class "c-orange-500 ti-layout-list-thumb" ] + [] + ] + , span [ class "title" ] + [ text "Tables" ] + , span [ class "arrow" ] + [ i [ class "ti-angle-right" ] + [] + ] + ] + , ul [ class "dropdown-menu" ] + [ li [] + [ a [ class "sidebar-link", href "basic-table.html" ] + [ text "Basic Table" ] + ] + , li [] + [ a [ class "sidebar-link", href "datatable.html" ] + [ text "Data Table" ] + ] + ] + ] + , li [ class "nav-item dropdown" ] + [ a [ class "dropdown-toggle", href "javascript:void(0);" ] + [ span [ class "icon-holder" ] + [ i [ class "c-purple-500 ti-map" ] + [] + ] + , span [ class "title" ] + [ text "Maps" ] + , span [ class "arrow" ] + [ i [ class "ti-angle-right" ] + [] + ] + ] + , ul [ class "dropdown-menu" ] + [ li [] + [ a [ href "google-maps.html" ] + [ text "Google Map" ] + ] + , li [] + [ a [ href "vector-maps.html" ] + [ text "Vector Map" ] + ] + ] + ] + , li [ class "nav-item dropdown" ] + [ a [ class "dropdown-toggle", href "javascript:void(0);" ] + [ span [ class "icon-holder" ] + [ i [ class "c-red-500 ti-files" ] + [] + ] + , span [ class "title" ] + [ text "Pages" ] + , span [ class "arrow" ] + [ i [ class "ti-angle-right" ] + [] + ] + ] + , ul [ class "dropdown-menu" ] + [ li [] + [ a [ class "sidebar-link", href "blank.html" ] + [ text "Blank" ] + ] + , li [] + [ a [ class "sidebar-link", href "404.html" ] + [ text "404" ] + ] + , li [] + [ a [ class "sidebar-link", href "500.html" ] + [ text "500" ] + ] + , li [] + [ a [ class "sidebar-link", href "signin.html" ] + [ text "Sign In" ] + ] + , li [] + [ a [ class "sidebar-link", href "signup.html" ] + [ text "Sign Up" ] + ] + ] + ] + , li [ class "nav-item dropdown" ] + [ a [ class "dropdown-toggle", href "javascript:void(0);" ] + [ span [ class "icon-holder" ] + [ i [ class "c-teal-500 ti-view-list-alt" ] + [] + ] + , span [ class "title" ] + [ text "Multiple Levels" ] + , span [ class "arrow" ] + [ i [ class "ti-angle-right" ] + [] + ] + ] + , ul [ class "dropdown-menu" ] + [ li [ class "nav-item dropdown" ] + [ a [ href "javascript:void(0);" ] + [ span [] + [ text "Menu Item" ] + ] + ] + , li [ class "nav-item dropdown" ] + [ a [ href "javascript:void(0);" ] + [ span [] + [ text "Menu Item" ] + , span [ class "arrow" ] + [ i [ class "ti-angle-right" ] + [] + ] + ] + , ul [ class "dropdown-menu" ] + [ li [] + [ a [ href "javascript:void(0);" ] + [ text "Menu Item" ] + ] + , li [] + [ a [ href "javascript:void(0);" ] + [ text "Menu Item" ] + ] + ] + ] + ] + ] + ] + ] + ] diff --git a/src/assets/scripts/elm/Main.elm b/src/assets/scripts/elm/Main.elm index a92d549..31235e3 100644 --- a/src/assets/scripts/elm/Main.elm +++ b/src/assets/scripts/elm/Main.elm @@ -2,12 +2,16 @@ port module Main exposing (Model, Msg(..), init, main, update, view) import Browser exposing (Document, UrlRequest(..)) import Browser.Navigation as Nav exposing (Key) -import Html exposing (Html, a, br, div, h1, img, text) +import Components.Footer as Footer +import Components.Header as Header +import Components.Sidebar as Sidebar +import Html exposing (Html, a, br, div, h1, img, main_, text) import Html.Attributes exposing (class, href, id, src) import Html.Events exposing (onClick) import Pages.Counselors as Counselors +import Pages.Dashboard as Dashboard import Pages.Login as LoginPage -import Session exposing (User) +import Session exposing (User, anonUser) import Url exposing (Url) import Url.Parser as Parser exposing (Parser, map, oneOf, s, top) @@ -62,6 +66,7 @@ type Msg | ChangedUrl Url | CounselorsMsg Counselors.Msg | LoginPageMsg LoginPage.Msg + | DashboardMsg Dashboard.Msg | Logout | NoOp @@ -113,7 +118,7 @@ view model = Html.map CounselorsMsg Counselors.view Dashboard -> - mainHtml + Html.map DashboardMsg Dashboard.view LoginPage -> Html.map LoginPageMsg LoginPage.view @@ -121,9 +126,18 @@ view model = { title = "InteroCare Admin" , body = [ div [] - [ img [ src "/ALFBLogo.png" ] [] - , div [ id "firebaseui-auth-container", class "hidden" ] [] - , content + [ Sidebar.view + , div [ class "page-container" ] + [ Header.view (Maybe.withDefault anonUser model.user) + , main_ + [ class "main-content bgc-grey-100" ] + [ div + [ id "mainContent" ] + [ content + , Footer.view + ] + ] + ] ] ] } diff --git a/src/assets/scripts/elm/Pages/Dashboard.elm b/src/assets/scripts/elm/Pages/Dashboard.elm new file mode 100644 index 0000000..7e489ea --- /dev/null +++ b/src/assets/scripts/elm/Pages/Dashboard.elm @@ -0,0 +1,62 @@ +module Pages.Dashboard exposing (Msg, view) + +import Components.Footer as Footer +import Components.Header as Header +import Components.Sidebar as Sidebar +import Html + exposing + ( Html + , a + , button + , canvas + , div + , footer + , h3 + , h5 + , h6 + , i + , img + , input + , label + , li + , main_ + , p + , small + , span + , sup + , table + , tbody + , td + , text + , th + , thead + , tr + , ul + ) +import Html.Attributes + exposing + ( alt + , attribute + , class + , for + , height + , href + , id + , name + , placeholder + , src + , style + , target + , title + , type_ + , width + ) + + +type Msg + = NoOp + + +view : Html Msg +view = + div [] [ text "Ready for content" ] diff --git a/src/assets/scripts/elm/Session.elm b/src/assets/scripts/elm/Session.elm index c0fba2e..25b4d05 100644 --- a/src/assets/scripts/elm/Session.elm +++ b/src/assets/scripts/elm/Session.elm @@ -1,9 +1,20 @@ -module Session exposing (User) +module Session exposing (User, anonUser) type alias User = - { email : String + { name : String + , email : String , photoUrl : String , orgId : Maybe String , accessToken : String } + + +anonUser : User +anonUser = + { name = "Anon" + , email = "nobody@nowhere.com" + , photoUrl = "" + , orgId = Just "" + , accessToken = "" + } diff --git a/src/assets/scripts/elm/index.js b/src/assets/scripts/elm/index.js index 0490267..3f5fb9e 100644 --- a/src/assets/scripts/elm/index.js +++ b/src/assets/scripts/elm/index.js @@ -16,6 +16,7 @@ export default (function () { Promise.all([user.getIdToken(), user.getIdTokenResult()]).then(([accessToken, idToken]) => { const app = Elm.Main.init({ flags: { + name: user.displayName, email: user.email, photoUrl: user.photoURL, orgId: idToken.claims.orgId || null, diff --git a/src/assets/scripts/fancyloader/index.js b/src/assets/scripts/fancyloader/index.js new file mode 100644 index 0000000..bce44a3 --- /dev/null +++ b/src/assets/scripts/fancyloader/index.js @@ -0,0 +1,8 @@ +export default (function () { + window.addEventListener('load', function load() { + const loader = document.getElementById('loader'); + setTimeout(function () { + loader.classList.add('fadeOut'); + }, 300); + }); +}()); \ No newline at end of file diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index f5fa6df..ef9c228 100755 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -1,3 +1,4 @@ import '../styles/index.scss'; +import './fancyloader'; import './elm'; \ No newline at end of file diff --git a/src/index.html b/src/index.html index e2cfbb6..c82eb3c 100755 --- a/src/index.html +++ b/src/index.html @@ -72,13 +72,5 @@
-