├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── package.json ├── src ├── app │ ├── components │ │ ├── alerts │ │ │ ├── alerts.html │ │ │ └── alerts.ts │ │ ├── dashboard │ │ │ ├── dashboard.css │ │ │ ├── dashboard.html │ │ │ └── dashboard.ts │ │ ├── rd-loading │ │ │ ├── rd-loading.html │ │ │ └── rd-loading.ts │ │ ├── rd-widget-body │ │ │ ├── rd-widget-body.html │ │ │ └── rd-widget-body.ts │ │ ├── rd-widget-footer │ │ │ ├── rd-widget-footer.html │ │ │ └── rd-widget-footer.ts │ │ ├── rd-widget-header │ │ │ ├── rd-widget-header.html │ │ │ └── rd-widget-header.ts │ │ ├── rd-widget │ │ │ ├── rd-widget.html │ │ │ └── rd-widget.ts │ │ ├── server-list-view │ │ │ ├── server-list-view.html │ │ │ └── server-list-view.ts │ │ ├── tables │ │ │ ├── tables.html │ │ │ └── tables.ts │ │ └── user-list-view │ │ │ ├── user-list-view.html │ │ │ └── user-list-view.ts │ ├── main.css │ ├── main.html │ ├── main.ts │ ├── public │ │ └── img │ │ │ └── avatar.jpg │ └── services │ │ ├── server_list.ts │ │ └── user_list.ts ├── index.html └── system.config.js ├── tsconfig.json └── typings.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | .tsdrc 30 | 31 | #IntelliJ configuration files 32 | .idea 33 | 34 | dist 35 | dev 36 | lib 37 | test 38 | typings 39 | 40 | # Dependency directory 41 | # Commenting this out is preferred by some people, see 42 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 43 | bower_components 44 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "immed": true, 4 | "newcap": true, 5 | "noarg": true, 6 | "noempty": true, 7 | "nonew": true, 8 | "trailing": true, 9 | "maxlen": 200, 10 | "boss": true, 11 | "eqnull": true, 12 | "expr": true, 13 | "globalstrict": true, 14 | "laxbreak": true, 15 | "loopfunc": true, 16 | "sub": true, 17 | "undef": true, 18 | "indent": 2, 19 | "unused": true, 20 | 21 | "node": true, 22 | "globals": { 23 | "System": true 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ziya SARIKAYA 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | [AngularJS 2](https://angular.io/) implementation of the [RDash admin dashboard](http://rdash.github.io) theme 4 | 5 | > Responsive, bloat free, bootstrap powered admin style dashboard! 6 | 7 | [**Demo App**](https://rdash-angular2.herokuapp.com/) 8 | 9 | # How to start 10 | 11 | ```bash 12 | git clone https://github.com/ziyasal/rdash-angular2.git 13 | cd rdash-angular2 14 | npm install 15 | # dev 16 | npm start 17 | ``` 18 | 19 | ## Components 20 | 21 | - RdWidget 22 | - RdWidgetHeader 23 | - RdWidgetBody 24 | - RdWidgetFooter 25 | - RdLoading 26 | 27 | 28 | **Simple Widget** 29 | ```js 30 | 31 | 32 | HTML CONTENT 33 | 34 | 35 | ``` 36 | 37 | **Widget with Header** 38 | ```js 39 | 40 | 41 | Manage 42 | 43 | 44 | 45 | 46 | 47 | ``` 48 | 49 | **Widget with Footer** 50 | ```js 51 | 52 | 53 | Manage 54 | 55 | 56 | 57 | 58 | 59 | FOOTER CONTENT 60 | 61 | 62 | ``` 63 | 64 | **Widget with Loader** 65 | ```js 66 | 67 | 68 | 69 | 70 | 71 | ``` 72 | 73 | # License 74 | 75 | [MIT](https://raw.githubusercontent.com/ziyasal/rdash-angular2/master/LICENSE) 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rdash-angular2", 3 | "version": "0.0.2", 4 | "description": "AngularJS2 implementation of the RDash admin dashboard theme http://rdash.github.io", 5 | "repository": "https://github.com/ziyasal/rdash-angular2", 6 | "scripts": { 7 | "postinstall": "npm run typings", 8 | "tsc": "tsc", 9 | "tsc:w": "tsc --watch", 10 | "live": "live-server --open=src", 11 | "start": "concurrently \"npm run tsc:w\" \"npm run live\" ", 12 | "typings": "typings install" 13 | }, 14 | "author": "Ziya SARIKAYA ", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "concurrently": "^2.0.0", 18 | "live-server": "^0.9.2", 19 | "typescript": "^1.8.9", 20 | "typings": "^0.7.11" 21 | }, 22 | "dependencies": { 23 | "angular2": "2.0.0-beta.14", 24 | "bootstrap": "^3.3.6", 25 | "es6-shim": "^0.35.0", 26 | "font-awesome": "^4.6.1", 27 | "jquery": "^3.2.1", 28 | "rdash-ui": "^1.0.1", 29 | "reflect-metadata": "0.1.2", 30 | "rxjs": "5.0.0-beta.2", 31 | "systemjs": "0.19.25", 32 | "zone.js": "0.6.6" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/components/alerts/alerts.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /src/app/components/alerts/alerts.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'alerts', 5 | templateUrl: 'app/components/alerts/alerts.html' 6 | }) 7 | export class Alerts { 8 | 9 | alerts:any[] = [{ 10 | type: 'success', 11 | msg: 'Thanks for visiting! Feel free to create pull requests to improve the dashboard!' 12 | }, { 13 | type: 'danger', 14 | msg: 'Found a bug? Create an issue with as many details as you can.' 15 | }]; 16 | 17 | addAlert() { 18 | this.alerts.push({ 19 | msg: 'Another alert!' 20 | }); 21 | } 22 | 23 | closeAlert(index) { 24 | this.alerts.splice(index, 1); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/components/dashboard/dashboard.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bugthesystem/rdash-angular2/f8b0d35b655969c4c481ce07e191e811d28fe604/src/app/components/dashboard/dashboard.css -------------------------------------------------------------------------------- /src/app/components/dashboard/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 | 7 |
8 | 9 |
10 |
80
11 |
Users
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 | 20 |
21 |
16
22 |
Servers
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 | 31 |
32 |
225
33 |
Documents
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 | 42 |
43 |
62
44 |
Tickets
45 | 46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 | 54 | Manage 55 | 56 | 57 | 58 | 59 | 60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 | 73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 |
81 | This is a standard message which will also work the ".no-padding" class, I can also be an error message! 83 |
84 |
85 |
86 | UI Bootstrap is included, so 87 | you can use 88 | tooltips and all of the other native Bootstrap JS 89 | components! 90 |
91 | 92 | 93 |
94 |
95 | 96 | 97 | SpinKit 98 | 99 | 100 | 101 | 102 | 103 |
104 |
105 | -------------------------------------------------------------------------------- /src/app/components/dashboard/dashboard.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | import {Alerts} from '../alerts/alerts'; 4 | 5 | import {RdLoading} from '../rd-loading/rd-loading'; 6 | import {RdWidget} from '../rd-widget/rd-widget'; 7 | 8 | import {RdWidgetHeader} from '../rd-widget-header/rd-widget-header'; 9 | import {RdWidgetBody} from '../rd-widget-body/rd-widget-body'; 10 | import {RdWidgetFooter} from '../rd-widget-footer/rd-widget-footer'; 11 | 12 | import {ServerListView} from '../server-list-view/server-list-view'; 13 | import {ServerListService} from '../../services/server_list'; 14 | 15 | import {UserListView} from '../user-list-view/user-list-view'; 16 | import {UserListService} from '../../services/user_list'; 17 | 18 | 19 | @Component({ 20 | selector: 'dashboard', 21 | providers: [ServerListService], 22 | templateUrl: 'app/components/dashboard/dashboard.html', 23 | styleUrls: ['app/components/dashboard/dashboard.css'], 24 | directives: [Alerts, RdWidget, RdWidgetHeader, RdWidgetBody, 25 | RdWidgetFooter, RdLoading, ServerListView, UserListView] 26 | }) 27 | export class Dashboard { 28 | servers:any[]; 29 | users:any[]; 30 | 31 | constructor(private serverListService:ServerListService, private userListService:UserListService) { 32 | this.serverListService = serverListService; 33 | this.userListService = userListService; 34 | } 35 | 36 | ngOnInit() { 37 | this.servers = this.serverListService.all(); 38 | this.users = this.userListService.all(); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/components/rd-loading/rd-loading.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/components/rd-loading/rd-loading.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'rd-loading', 5 | templateUrl: 'app/components/rd-loading/rd-loading.html' 6 | }) 7 | export class RdLoading { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/app/components/rd-widget-body/rd-widget-body.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /src/app/components/rd-widget-body/rd-widget-body.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input} from 'angular2/core'; 2 | @Component({ 3 | selector: 'rd-widget-body', 4 | properties: ['loading', 'classes'], 5 | templateUrl: 'app/components/rd-widget-body/rd-widget-body.html' 6 | }) 7 | export class RdWidgetBody { 8 | @Input() 9 | loading:boolean; 10 | 11 | @Input() 12 | classes:string; 13 | 14 | constructor() { 15 | this.loading = false; 16 | this.classes = ''; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/components/rd-widget-footer/rd-widget-footer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/app/components/rd-widget-footer/rd-widget-footer.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'rd-widget-footer', 5 | templateUrl: 'app/components/rd-widget-footer/rd-widget-footer.html' 6 | }) 7 | export class RdWidgetFooter { 8 | } 9 | -------------------------------------------------------------------------------- /src/app/components/rd-widget-header/rd-widget-header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
{{title}}
4 |
5 | 6 |
7 |
8 |
9 | -------------------------------------------------------------------------------- /src/app/components/rd-widget-header/rd-widget-header.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'rd-widget-header', 5 | templateUrl: 'app/components/rd-widget-header/rd-widget-header.html' 6 | }) 7 | export class RdWidgetHeader { 8 | @Input() 9 | title:string; 10 | 11 | @Input() 12 | icon:string; 13 | 14 | constructor() { 15 | this.title = ''; 16 | this.icon = ''; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/components/rd-widget/rd-widget.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /src/app/components/rd-widget/rd-widget.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | @Component({ 3 | selector: 'rd-widget', 4 | templateUrl: 'app/components/rd-widget/rd-widget.html' 5 | }) 6 | export class RdWidget { 7 | } 8 | -------------------------------------------------------------------------------- /src/app/components/server-list-view/server-list-view.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |
{{server.name}}{{server.ip}} 9 |
16 |
17 | -------------------------------------------------------------------------------- /src/app/components/server-list-view/server-list-view.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'server-list-view', 5 | properties: ['model'], 6 | templateUrl: 'app/components/server-list-view/server-list-view.html' 7 | }) 8 | export class ServerListView { 9 | 10 | model:any[]; 11 | 12 | constructor() { 13 | this.model = []; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/tables/tables.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | Manage 6 | 7 | 8 | 9 | 10 | 11 |
    12 |
  • «
    • 13 |
  • 1
    • 14 |
  • 2
    • 15 |
  • 3
    • 16 |
  • 4
    • 17 |
  • 5
    • 18 |
  • »
    • 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 | Manage 28 | 29 | 30 | 31 | 32 | 33 |
    34 |
  • «
    • 35 |
  • 1
    • 36 |
  • 2
    • 37 |
  • 3
    • 38 |
  • »
    • 39 |
40 |
41 | 42 | 43 |
44 |
45 | -------------------------------------------------------------------------------- /src/app/components/tables/tables.ts: -------------------------------------------------------------------------------- 1 | import {Component} from 'angular2/core'; 2 | 3 | import {RdLoading} from '../rd-loading/rd-loading'; 4 | import {RdWidget} from '../rd-widget/rd-widget'; 5 | 6 | import {RdWidgetHeader} from '../rd-widget-header/rd-widget-header'; 7 | import {RdWidgetBody} from '../rd-widget-body/rd-widget-body'; 8 | import {RdWidgetFooter} from '../rd-widget-footer/rd-widget-footer'; 9 | 10 | import {ServerListView} from '../server-list-view/server-list-view'; 11 | import {ServerListService} from '../../services/server_list'; 12 | 13 | 14 | @Component({ 15 | selector: 'tables', 16 | providers: [ServerListService], 17 | templateUrl: 'app/components/tables/tables.html', 18 | directives: [RdWidget, RdWidgetHeader, RdWidgetBody, RdWidgetFooter, RdLoading, ServerListView] 19 | }) 20 | export class Tables { 21 | servers:any[]; 22 | serverListService:ServerListService; 23 | 24 | constructor(private serverListService:ServerListService) { 25 | } 26 | 27 | ngOnInit() { 28 | this.servers = this.serverListService.all(); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/user-list-view/user-list-view.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
IDUsernameRoleAccount
{{user.id}}{{user.name}}{{user.role}}{{user.account}}
20 |
21 | -------------------------------------------------------------------------------- /src/app/components/user-list-view/user-list-view.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: 'user-list-view', 5 | templateUrl: 'app/components/user-list-view/user-list-view.html', 6 | directives: [] 7 | }) 8 | export class UserListView { 9 | 10 | @Input() 11 | model:any[]; 12 | 13 | constructor() { 14 | this.model = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/main.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | width: 40px; 3 | height: 40px; 4 | background-color: #333; 5 | 6 | margin: 100px auto; 7 | -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 8 | animation: sk-rotateplane 1.2s infinite ease-in-out; 9 | } 10 | 11 | @-webkit-keyframes sk-rotateplane { 12 | 0% { -webkit-transform: perspective(120px) } 13 | 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 14 | 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 15 | } 16 | 17 | @keyframes sk-rotateplane { 18 | 0% { 19 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 20 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 21 | } 50% { 22 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 23 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 24 | } 100% { 25 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 26 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/main.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 78 |
79 |
80 | 81 | 82 | 83 |
    84 |
  • 85 | Notifications 86 |
    • 87 |
  • 88 |
  • 89 | Server Down! 90 |
    • 91 |
92 |
93 |
94 |
95 |
96 | Dashboard 97 |
98 |
99 | Home / Dashboard 100 |
101 |
102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 |
110 |
111 |
112 | -------------------------------------------------------------------------------- /src/app/main.ts: -------------------------------------------------------------------------------- 1 | import {Component, bind} from 'angular2/core'; 2 | import {bootstrap} from 'angular2/platform/browser'; 3 | import {HTTP_PROVIDERS} from 'angular2/http'; 4 | import {FORM_PROVIDERS} from 'angular2/common'; 5 | import { 6 | RouteConfig, 7 | ROUTER_DIRECTIVES, 8 | ROUTER_PROVIDERS, 9 | LocationStrategy, 10 | HashLocationStrategy 11 | } from 'angular2/router'; 12 | 13 | import {Dashboard} from './components/dashboard/dashboard'; 14 | import {Tables} from './components/tables/tables'; 15 | 16 | import {UserListService} from './services/user_list'; 17 | import {ServerListService} from './services/server_list'; 18 | 19 | @RouteConfig([ 20 | {path: '/', component: Dashboard, name: 'Dashboard'}, 21 | {path: '/tables', component: Tables, name: 'Tables'} 22 | ]) 23 | @Component({ 24 | selector: 'app', 25 | templateUrl: 'app/main.html', 26 | styleUrls: ['app/main.css'], 27 | directives: [ROUTER_DIRECTIVES] 28 | }) 29 | class Main { 30 | 31 | mobileView:number = 992; 32 | toggle:boolean = false; 33 | 34 | constructor() { 35 | this.attachEvents(); 36 | } 37 | 38 | attachEvents() { 39 | window.onresize = ()=> { 40 | if (this.getWidth() >= this.mobileView) { 41 | if (localStorage.getItem('toggle')) { 42 | this.toggle = !localStorage.getItem('toggle') ? false : true; 43 | } else { 44 | this.toggle = true; 45 | } 46 | } else { 47 | this.toggle = false; 48 | } 49 | } 50 | } 51 | 52 | getWidth() { 53 | return window.innerWidth; 54 | } 55 | 56 | toggleSidebar() { 57 | this.toggle = !this.toggle; 58 | localStorage.setItem('toggle', this.toggle.toString()); 59 | } 60 | } 61 | 62 | bootstrap(Main, [ROUTER_PROVIDERS, FORM_PROVIDERS, 63 | ROUTER_PROVIDERS, HTTP_PROVIDERS, UserListService, ServerListService, 64 | bind(LocationStrategy).toClass(HashLocationStrategy)]); 65 | -------------------------------------------------------------------------------- /src/app/public/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bugthesystem/rdash-angular2/f8b0d35b655969c4c481ce07e191e811d28fe604/src/app/public/img/avatar.jpg -------------------------------------------------------------------------------- /src/app/services/server_list.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from "angular2/core"; 2 | 3 | @Injectable() 4 | export class ServerListService { 5 | servers:any[] = [{ 6 | name: 'RDVMPC001', 7 | ip: '238.103.133.37', 8 | 'tooltip': '', 9 | 'tooltipcls': 'text-success', 10 | 'icon': 'fa-check' 11 | }, 12 | {name: 'RDVMPC002', ip: '68.66.63.170', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}, 13 | {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}, 14 | {name: 'RDVMPC003', ip: '76.117.212.33', 'tooltip': '', 'tooltipcls': 'text-danger', 'icon': 'fa-warning'}, 15 | {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}, 16 | { 17 | name: 'RDESX003', 18 | ip: '209.25.191.61', 19 | 'tooltip': 'Could not connect!', 20 | 'tooltipcls': 'text-warning', 21 | 'icon': 'fa-flash' 22 | }, 23 | {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}, 24 | {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}, 25 | {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}, 26 | {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'} 27 | ]; 28 | 29 | add(value:any):void { 30 | this.servers.push(value); 31 | } 32 | 33 | all():any[] { 34 | return this.servers; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/app/services/user_list.ts: -------------------------------------------------------------------------------- 1 | 2 | import {Injectable} from "angular2/core"; 3 | 4 | @Injectable() 5 | export class UserListService { 6 | users:any[] = [{ 7 | id: 1, 8 | name: 'Joe Bloggs', 9 | role: 'Super Admin', 10 | account: 'AZ23045' 11 | }, { 12 | id: 2, 13 | name: 'Timothy Hernandez', 14 | role: 'Admin', 15 | account: 'AU24783' 16 | }, { 17 | id: 3, 18 | name: 'Joe Bickham', 19 | role: 'User', 20 | account: 'AM23781' 21 | }]; 22 | 23 | add(value:any):void { 24 | this.users.push(value); 25 | } 26 | 27 | all():any[] { 28 | return this.users; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Angular 2 App 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Loading... 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/system.config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | packages: { 3 | app: { 4 | format: 'register', 5 | defaultExtension: 'js' 6 | } 7 | } 8 | }); 9 | System.import('app/main') 10 | .then(null, console.error.bind(console)); -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "system", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "exclude": [ 14 | "node_modules", 15 | "typings/main", 16 | "typings/main.d.ts" 17 | ] 18 | } -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "ambientDependencies": { 3 | "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd" 4 | } 5 | } --------------------------------------------------------------------------------