2017-04-27 14:29:31 +00:00
< header class = "app-header navbar" >
< button class = "navbar-toggler d-lg-none" type = "button" appMobileSidebarToggler > ☰ < / button >
< a class = "navbar-brand" href = "#" > < / a >
< ul class = "nav navbar-nav d-md-down-none" >
< li class = "nav-item" >
< a class = "nav-link navbar-toggler" href = "#" appSidebarToggler > ☰ < / a >
< / li >
< li class = "nav-item px-3" >
< a class = "nav-link" href = "#" > Dashboard< / a >
< / li >
< li class = "nav-item px-3" >
< a class = "nav-link" href = "#" > Users< / a >
< / li >
< li class = "nav-item px-3" >
< a class = "nav-link" href = "#" > Settings< / a >
< / li >
< / ul >
< ul class = "nav navbar-nav ml-auto" >
< li class = "nav-item dropdown" dropdown ( onToggle ) = " toggled ( $ event ) " >
< a href class = "nav-link dropdown-toggle" dropdownToggle ( click ) = " false " >
< img src = "assets/img/avatars/6.jpg" class = "img-avatar" alt = "admin@bootstrapmaster.com" >
2017-07-28 18:30:35 +00:00
< span class = "d-md-down-none" > {{displayName}}< / span >
2017-04-27 14:29:31 +00:00
< / a >
< div class = "dropdown-menu dropdown-menu-right" * dropdownMenu aria-labelledby = "simple-dropdown" >
< div class = "dropdown-header text-center" > < strong > Account< / strong > < / div >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-bell-o" > < / i > Updates< span class = "badge badge-info" > 42< / span > < / a >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-envelope-o" > < / i > Messages< span class = "badge badge-success" > 42< / span > < / a >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-tasks" > < / i > Tasks< span class = "badge badge-danger" > 42< / span > < / a >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-comments" > < / i > Comment< span class = "badge badge-warning" > 42< / span > < / a >
< div class = "dropdown-header text-center" > < strong > Settings< / strong > < / div >
2017-05-12 11:26:12 +00:00
< a class = "dropdown-item" href = "#" > < i class = "fa fa-user" > < / i > User Settings< / a >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-wrench" > < / i > Transaction History< / a >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-usd" > < / i > Points History< span class = "badge badge-default" > 42< / span > < / a >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-file" > < / i > Notifications< span class = "badge badge-primary" > 42< / span > < / a >
2017-04-27 14:29:31 +00:00
< div class = "divider" > < / div >
< a class = "dropdown-item" href = "#" > < i class = "fa fa-shield" > < / i > Lock account< / a >
2017-07-28 18:30:35 +00:00
< a class = "dropdown-item" ( click ) = " userLogout ( ) " > < i class = "fa fa-lock" > < / i > Logout< / a >
2017-04-27 14:29:31 +00:00
< / div >
< / li >
< li class = "nav-item d-md-down-none" >
< a class = "nav-link navbar-toggler" href = "#" appAsideMenuToggler > ☰ < / a >
< / li >
< / ul >
< / header >
< div class = "app-body" >
< div class = "sidebar" >
< nav class = "sidebar-nav" >
< ul class = "nav" >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / dashboard ' ] " > < i class = "icon-speedometer" > < / i > Dashboard < span class = "badge badge-info" > NEW< / span > < / a >
< / li >
< li class = "divider" > < / li >
< li class = "nav-title" >
UI Elements
< / li >
< li class = "nav-item nav-dropdown" routerLinkActive = "open" appNavDropdown >
< a class = "nav-link nav-dropdown-toggle" href = "#" appNavDropdownToggle > < i class = "icon-puzzle" > < / i > Components< / a >
< ul class = "nav-dropdown-items" >
2017-06-19 11:41:08 +00:00
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / components / leaderboards ' ] " > < i class = "icon-puzzle" > < / i > Leaderboards< / a >
2017-07-28 18:30:35 +00:00
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / components / account-edit ' ] " > < i class = "icon-puzzle" > < / i > Edit Account< / a >
2017-06-19 11:41:08 +00:00
< / li >
2017-06-26 17:36:48 +00:00
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / components / add-data ' ] " > < i class = "icon-puzzle" > < / i > Add Data< / a >
< / li >
2017-04-27 14:29:31 +00:00
< / ul >
< / li >
< li class = "nav-item nav-dropdown" routerLinkActive = "open" appNavDropdown >
< a class = "nav-link nav-dropdown-toggle" href = "#" appNavDropdownToggle > < i class = "icon-star" > < / i > Icons< / a >
< ul class = "nav-dropdown-items" >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / icons / font-awesome ' ] " > < i class = "icon-star" > < / i > Font Awesome< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / icons / simple-line-icons ' ] " > < i class = "icon-star" > < / i > Simple Line Icons< / a >
< / li >
< / ul >
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / widgets ' ] " > < i class = "icon-calculator" > < / i > Widgets < span class = "badge badge-info" > NEW< / span > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / charts ' ] " > < i class = "icon-pie-chart" > < / i > Charts< / a >
< / li >
< li class = "divider" > < / li >
< li class = "nav-title" >
Extras
< / li >
< li class = "nav-item nav-dropdown" appNavDropdown >
< a class = "nav-link nav-dropdown-toggle" href = "#" appNavDropdownToggle > < i class = "icon-star" > < / i > Pages< / a >
< ul class = "nav-dropdown-items" >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / pages / login ' ] " > < i class = "icon-star" > < / i > Login< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / pages / register ' ] " > < i class = "icon-star" > < / i > Register< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / pages / 404 ' ] " > < i class = "icon-star" > < / i > Error 404< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" routerLinkActive = "active" [ routerLink ] = " [ ' / pages / 500 ' ] " > < i class = "icon-star" > < / i > Error 500< / a >
< / li >
< / ul >
< / li >
< / ul >
< / nav >
< / div >
<!-- Main content -->
< main class = "main" >
<!-- Breadcrumb -->
< ol class = "breadcrumb" >
< app-breadcrumbs > < / app-breadcrumbs >
<!-- Breadcrumb Menu -->
< li class = "breadcrumb-menu d-md-down-none" >
2017-06-22 15:30:35 +00:00
<!-- Currently taking up too much space being here -->
2017-06-26 17:36:48 +00:00
< div class = "btn-group" role = "group" aria-label = "Button group with nested dropdown" >
< a class = "btn btn-secondary" routerLinkActive = "active" [ routerLink ] = " [ ' / components / add-data ' ] " > < Add Transaction< / a >
<!-- <a class="btn btn - secondary" href="#"> Customers This Month: {{customersThisMonth}}</a>
2017-06-22 15:30:35 +00:00
< a class = "btn btn-secondary" [ routerLink ] = " [ ' / dashboard ' ] " > Money Spent this Month: {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}< / a >
< a class = "btn btn-secondary" href = "#" > Points Total: {{pointsTotal}}< / a >
2017-06-26 17:36:48 +00:00
< a class = "btn btn-secondary" [ routerLink ] = " [ ' / dashboard ' ] " > Average Transaction Today: {{averageTransactionToday | currency:'GBP':true:'1.2-2'}}< / a > -->
< / div >
2017-04-27 14:29:31 +00:00
< / li >
< / ol >
< div class = "container-fluid" >
< router-outlet > < / router-outlet >
< / div > <!-- /.conainer - fluid -->
< / main >
< aside class = "aside-menu" >
< tabset >
< tab >
< ng-template tabHeading > < i class = "icon-list" > < / i > < / ng-template >
2017-05-12 11:26:12 +00:00
< div class = "callout m-0 py-2 text-muted text-center text-uppercase" >
< small > < b > < a class = "nav-link" href = "#" > User Settings< / a > < / b > < / small >
2017-04-27 14:29:31 +00:00
< / div >
< hr class = "transparent mx-3 my-0" >
2017-05-12 11:26:12 +00:00
< div class = "callout m-0 py-2 text-muted text-center text-uppercase" >
< small > < b > < a class = "nav-link" href = "#" > Transaction History< / a > < / b > < / small >
2017-04-27 14:29:31 +00:00
< / div >
< hr class = "transparent mx-3 my-0" >
2017-05-12 11:26:12 +00:00
< div class = "callout m-0 py-2 text-muted text-center text-uppercase" >
< small > < b > < a class = "nav-link" href = "#" > Points History< / a > < / b > < / small >
2017-04-27 14:29:31 +00:00
< / div >
< hr class = "transparent mx-3 my-0" >
2017-05-12 11:26:12 +00:00
< div class = "callout m-0 py-2 text-muted text-center text-uppercase" >
< small > < b > < a class = "nav-link" href = "#" > Notifications< / a > < / b > < / small >
2017-04-27 14:29:31 +00:00
< / div >
2017-05-12 11:26:12 +00:00
2017-04-27 14:29:31 +00:00
< / tab >
< tab >
< ng-template tabHeading > < i class = "icon-speech" > < / i > < / ng-template >
< div class = "p-3" >
< div class = "message" >
< div class = "py-3 pb-5 mr-3 float-left" >
< div class = "avatar" >
< img src = "assets/img/avatars/7.jpg" class = "img-avatar" alt = "admin@bootstrapmaster.com" >
< span class = "avatar-status badge-success" > < / span >
< / div >
< / div >
< div >
< small class = "text-muted" > Lukasz Holeczek< / small >
< small class = "text-muted float-right mt-1" > 1:52 PM< / small >
< / div >
< div class = "text-truncate font-weight-bold" > Lorem ipsum dolor sit amet< / div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...< / small >
< / div >
< hr >
< div class = "message" >
< div class = "py-3 pb-5 mr-3 float-left" >
< div class = "avatar" >
< img src = "assets/img/avatars/7.jpg" class = "img-avatar" alt = "admin@bootstrapmaster.com" >
< span class = "avatar-status badge-success" > < / span >
< / div >
< / div >
< div >
< small class = "text-muted" > Lukasz Holeczek< / small >
< small class = "text-muted float-right mt-1" > 1:52 PM< / small >
< / div >
< div class = "text-truncate font-weight-bold" > Lorem ipsum dolor sit amet< / div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...< / small >
< / div >
< hr >
< div class = "message" >
< div class = "py-3 pb-5 mr-3 float-left" >
< div class = "avatar" >
< img src = "assets/img/avatars/7.jpg" class = "img-avatar" alt = "admin@bootstrapmaster.com" >
< span class = "avatar-status badge-success" > < / span >
< / div >
< / div >
< div >
< small class = "text-muted" > Lukasz Holeczek< / small >
< small class = "text-muted float-right mt-1" > 1:52 PM< / small >
< / div >
< div class = "text-truncate font-weight-bold" > Lorem ipsum dolor sit amet< / div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...< / small >
< / div >
< hr >
< div class = "message" >
< div class = "py-3 pb-5 mr-3 float-left" >
< div class = "avatar" >
< img src = "assets/img/avatars/7.jpg" class = "img-avatar" alt = "admin@bootstrapmaster.com" >
< span class = "avatar-status badge-success" > < / span >
< / div >
< / div >
< div >
< small class = "text-muted" > Lukasz Holeczek< / small >
< small class = "text-muted float-right mt-1" > 1:52 PM< / small >
< / div >
< div class = "text-truncate font-weight-bold" > Lorem ipsum dolor sit amet< / div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...< / small >
< / div >
< hr >
< div class = "message" >
< div class = "py-3 pb-5 mr-3 float-left" >
< div class = "avatar" >
< img src = "assets/img/avatars/7.jpg" class = "img-avatar" alt = "admin@bootstrapmaster.com" >
< span class = "avatar-status badge-success" > < / span >
< / div >
< / div >
< div >
< small class = "text-muted" > Lukasz Holeczek< / small >
< small class = "text-muted float-right mt-1" > 1:52 PM< / small >
< / div >
< div class = "text-truncate font-weight-bold" > Lorem ipsum dolor sit amet< / div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...< / small >
< / div >
< / div >
< / tab >
< tab >
< ng-template tabHeading > < i class = "icon-settings" > < / i > < / ng-template >
< div class = "p-3" >
< h6 > Settings< / h6 >
< div class = "aside-options" >
< div class = "clearfix mt-4" >
< small > < b > Option 1< / b > < / small >
< label class = "switch switch-text switch-pill switch-success switch-sm float-right" >
< input type = "checkbox" class = "switch-input" checked >
< span class = "switch-label" data-on = "On" data-off = "Off" > < / span >
< span class = "switch-handle" > < / span >
< / label >
< / div >
< div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< / small >
< / div >
< / div >
< div class = "aside-options" >
< div class = "clearfix mt-3" >
< small > < b > Option 2< / b > < / small >
< label class = "switch switch-text switch-pill switch-success switch-sm float-right" >
< input type = "checkbox" class = "switch-input" >
< span class = "switch-label" data-on = "On" data-off = "Off" > < / span >
< span class = "switch-handle" > < / span >
< / label >
< / div >
< div >
< small class = "text-muted" > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< / small >
< / div >
< / div >
< div class = "aside-options" >
< div class = "clearfix mt-3" >
< small > < b > Option 3< / b > < / small >
< label class = "switch switch-text switch-pill switch-success switch-sm float-right" >
< input type = "checkbox" class = "switch-input" >
< span class = "switch-label" data-on = "On" data-off = "Off" > < / span >
< span class = "switch-handle" > < / span >
< / label >
< / div >
< / div >
< div class = "aside-options" >
< div class = "clearfix mt-3" >
< small > < b > Option 4< / b > < / small >
< label class = "switch switch-text switch-pill switch-success switch-sm float-right" >
< input type = "checkbox" class = "switch-input" checked >
< span class = "switch-label" data-on = "On" data-off = "Off" > < / span >
< span class = "switch-handle" > < / span >
< / label >
< / div >
< / div >
< hr >
< h6 > System Utilization< / h6 >
< div class = "text-uppercase mb-1 mt-4" > < small > < b > CPU Usage< / b > < / small > < / div >
< div class = "progress progress-xs" >
< div class = "progress-bar bg-info" role = "progressbar" style = "width: 25%" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< / div >
< small class = "text-muted" > 348 Processes. 1/4 Cores.< / small >
< div class = "text-uppercase mb-1 mt-2" > < small > < b > Memory Usage< / b > < / small > < / div >
< div class = "progress progress-xs" >
< div class = "progress-bar bg-warning" role = "progressbar" style = "width: 70%" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< / div >
< small class = "text-muted" > 11444GB/16384MB< / small >
< div class = "text-uppercase mb-1 mt-2" > < small > < b > SSD 1 Usage< / b > < / small > < / div >
< div class = "progress progress-xs" >
< div class = "progress-bar bg-danger" role = "progressbar" style = "width: 95%" aria-valuenow = "95" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< / div >
< small class = "text-muted" > 243GB/256GB< / small >
< div class = "text-uppercase mb-1 mt-2" > < small > < b > SSD 2 Usage< / b > < / small > < / div >
< div class = "progress progress-xs" >
< div class = "progress-bar bg-success" role = "progressbar" style = "width: 10%" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< / div >
< small class = "text-muted" > 25GB/256GB< / small >
< / div >
< / tab >
< / tabset >
< / aside >
< / div >
< footer class = "app-footer" >
< a href = "http://coreui.io" > CoreUI< / a > © 2017 creativeLabs.
< span class = "float-right" > Powered by < a href = "http://coreui.io" > CoreUI< / a > < / span >
< / footer >
