Browse Source

User info showing up.

pull/167/head
Sean Zicari 6 years ago
parent
commit
963e09333c
10 changed files with 674 additions and 16 deletions
  1. +15
    -0
      src/assets/scripts/elm/Components/Footer.elm
  2. +306
    -0
      src/assets/scripts/elm/Components/Header.elm
  3. +248
    -0
      src/assets/scripts/elm/Components/Sidebar.elm
  4. +20
    -6
      src/assets/scripts/elm/Main.elm
  5. +62
    -0
      src/assets/scripts/elm/Pages/Dashboard.elm
  6. +13
    -2
      src/assets/scripts/elm/Session.elm
  7. +1
    -0
      src/assets/scripts/elm/index.js
  8. +8
    -0
      src/assets/scripts/fancyloader/index.js
  9. +1
    -0
      src/assets/scripts/index.js
  10. +0
    -8
      src/index.html

+ 15
- 0
src/assets/scripts/elm/Components/Footer.elm View File

@ -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" ]
]
]

+ 306
- 0
src/assets/scripts/elm/Components/Header.elm View File

@ -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" ]
]
]
]
]
]
]
]

+ 248
- 0
src/assets/scripts/elm/Components/Sidebar.elm View File

@ -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" ]
]
]
]
]
]
]
]
]

+ 20
- 6
src/assets/scripts/elm/Main.elm View File

@ -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
]
]
]
]
]
}


+ 62
- 0
src/assets/scripts/elm/Pages/Dashboard.elm View File

@ -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" ]

+ 13
- 2
src/assets/scripts/elm/Session.elm View File

@ -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 = ""
}

+ 1
- 0
src/assets/scripts/elm/index.js View File

@ -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,


+ 8
- 0
src/assets/scripts/fancyloader/index.js View File

@ -0,0 +1,8 @@
export default (function () {
window.addEventListener('load', function load() {
const loader = document.getElementById('loader');
setTimeout(function () {
loader.classList.add('fadeOut');
}, 300);
});
}());

+ 1
- 0
src/assets/scripts/index.js View File

@ -1,3 +1,4 @@
import '../styles/index.scss';
import './fancyloader';
import './elm';

+ 0
- 8
src/index.html View File

@ -72,13 +72,5 @@
<div id="firebaseui-auth-container"></div>
</div>
</div>
<script>
window.addEventListener('load', function load() {
const loader = document.getElementById('loader');
setTimeout(function() {
loader.classList.add('fadeOut');
}, 300);
});
</script>
</body>
</html>

Loading…
Cancel
Save