Full Code of ziyasal/rdash-angular2 for AI

Repository: ziyasal/rdash-angular2
Branch: master
Commit: f8b0d35b6559
Files: 35
Total size: 27.9 KB

Directory structure:
gitextract__j_j5nsf/

├── .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/
│   │   │   │   ├── rd-widget.html
│   │   │   │   └── rd-widget.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
│   │   │   ├── 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
│   │   └── services/
│   │       ├── server_list.ts
│   │       └── user_list.ts
│   ├── index.html
│   └── system.config.js
├── tsconfig.json
└── typings.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# Commenting this out is preferred by some people, see
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
node_modules

# Users Environment Variables
.lock-wscript
.tsdrc

#IntelliJ configuration files
.idea

dist
dev
lib
test
typings

# Dependency directory
# Commenting this out is preferred by some people, see
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
bower_components


================================================
FILE: .jshintrc
================================================
{
  "bitwise": true,
  "immed": true,
  "newcap": true,
  "noarg": true,
  "noempty": true,
  "nonew": true,
  "trailing": true,
  "maxlen": 200,
  "boss": true,
  "eqnull": true,
  "expr": true,
  "globalstrict": true,
  "laxbreak": true,
  "loopfunc": true,
  "sub": true,
  "undef": true,
  "indent": 2,
  "unused": true,

  "node": true,
  "globals": {
    "System": true
  }
}


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2015 Ziya SARIKAYA

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Introduction

[AngularJS 2](https://angular.io/) implementation of the [RDash admin dashboard](http://rdash.github.io) theme

> Responsive, bloat free, bootstrap powered admin style dashboard!

[**Demo App**](https://rdash-angular2.herokuapp.com/)

# How to start

```bash
git clone https://github.com/ziyasal/rdash-angular2.git
cd rdash-angular2
npm install
# dev
npm start
```

## Components

- RdWidget
- RdWidgetHeader
- RdWidgetBody
- RdWidgetFooter
- RdLoading


**Simple Widget** 
```js
    <rd-widget>
      <rd-widget-body>       
       <span>HTML CONTENT</span>       
      </rd-widget-body>
    </rd-widget>
```

**Widget with Header**  
```js
 <rd-widget>
       <rd-widget-header icon="fa-tasks" title="Servers">
         <a href="javascript:void(0)" style="float: right">Manage</a>
       </rd-widget-header>
       <rd-widget-body classes="medium no-padding">
         <server-list-view [model]="servers"></server-list-view>
       </rd-widget-body>
     </rd-widget>
```

**Widget with Footer**  
```js
 <rd-widget>
       <rd-widget-header icon="fa-tasks" title="Servers">
         <a href="javascript:void(0)" style="float: right">Manage</a>
       </rd-widget-header>
       <rd-widget-body classes="medium no-padding">
         <server-list-view [model]="servers"></server-list-view>
       </rd-widget-body>
       <rd-widget-footer>
         <span>FOOTER CONTENT</span>
       </rd-widget-footer>
     </rd-widget>
```

**Widget with Loader**  
```js
 <rd-widget>
    <rd-widget-body classes="medium no-padding">
       <rd-loading></rd-loading>
    </rd-widget-body>
 </rd-widget>
```

# License

[MIT](https://raw.githubusercontent.com/ziyasal/rdash-angular2/master/LICENSE)


================================================
FILE: package.json
================================================
{
  "name": "rdash-angular2",
  "version": "0.0.2",
  "description": "AngularJS2 implementation of the RDash admin dashboard theme http://rdash.github.io",
  "repository": "https://github.com/ziyasal/rdash-angular2",
  "scripts": {
    "postinstall": "npm run typings",
    "tsc": "tsc",
    "tsc:w": "tsc --watch",
    "live": "live-server --open=src",
    "start": "concurrently \"npm run tsc:w\" \"npm run live\" ",
    "typings": "typings install"
  },
  "author": "Ziya SARIKAYA <ziyasal>",
  "license": "MIT",
  "devDependencies": {
    "concurrently": "^2.0.0",
    "live-server": "^0.9.2",
    "typescript": "^1.8.9",
    "typings": "^0.7.11"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "bootstrap": "^3.3.6",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.6.1",
    "jquery": "^3.2.1",
    "rdash-ui": "^1.0.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.25",
    "zone.js": "0.6.6"
  }
}


================================================
FILE: src/app/components/alerts/alerts.html
================================================
<div class="row alerts-container" *ngIf="alerts.length">
    <div class="col-xs-12">
        <div class="alert alert-{{alert.type}}" *ngFor="#alert of alerts #i=index" role="alert">
            <button type="button" (click)="closeAlert(i)" class="close" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            {{alert.msg}}
        </div>
    </div>
</div>


================================================
FILE: src/app/components/alerts/alerts.ts
================================================
import {Component} from 'angular2/core';

@Component({
  selector: 'alerts',
  templateUrl: 'app/components/alerts/alerts.html'
})
export class Alerts {

  alerts:any[] = [{
    type: 'success',
    msg: 'Thanks for visiting! Feel free to create pull requests to improve the dashboard!'
  }, {
    type: 'danger',
    msg: 'Found a bug? Create an issue with as many details as you can.'
  }];

  addAlert() {
    this.alerts.push({
      msg: 'Another alert!'
    });
  }

  closeAlert(index) {
    this.alerts.splice(index, 1);
  }
}


================================================
FILE: src/app/components/dashboard/dashboard.css
================================================


================================================
FILE: src/app/components/dashboard/dashboard.html
================================================
<alerts></alerts>

<div class="row">
    <div class="col-lg-3 col-md-6 col-xs-12">
        <rd-widget>
            <rd-widget-body>
                <div class="widget-icon green pull-left">
                    <i class="fa fa-users"></i>
                </div>
                <div class="title">80</div>
                <div class="comment">Users</div>
            </rd-widget-body>
        </rd-widget>
    </div>
    <div class="col-lg-3 col-md-6 col-xs-12">
        <rd-widget>
            <rd-widget-body>
                <div class="widget-icon red pull-left">
                    <i class="fa fa-tasks"></i>
                </div>
                <div class="title">16</div>
                <div class="comment">Servers</div>
            </rd-widget-body>
        </rd-widget>
    </div>
    <div class="col-lg-3 col-md-6 col-xs-12">
        <rd-widget>
            <rd-widget-body>
                <div class="widget-icon orange pull-left">
                    <i class="fa fa-sitemap"></i>
                </div>
                <div class="title">225</div>
                <div class="comment">Documents</div>
            </rd-widget-body>
        </rd-widget>
    </div>
    <div class="col-lg-3 col-md-6 col-xs-12">
        <rd-widget>
            <rd-widget-body>
                <div class="widget-icon blue pull-left">
                    <i class="fa fa-support"></i>
                </div>
                <div class="title">62</div>
                <div class="comment">Tickets</div>
            </rd-widget-body>
        </rd-widget>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <rd-widget>
            <rd-widget-header icon="fa-tasks" title="Servers">
                <a href="javascript:void(0)" style="float: right">Manage</a>
            </rd-widget-header>
            <rd-widget-body classes="medium no-padding">
                <server-list-view [model]="servers"></server-list-view>
            </rd-widget-body>
        </rd-widget>
    </div>
    <div class="col-lg-6">
        <rd-widget>
            <rd-widget-header icon="fa-users" title="Users">
                <input type="text" placeholder="Search" class="form-control input-sm"/>
            </rd-widget-header>
            <rd-widget-body classes="medium no-padding">
                <user-list-view [model]="users"></user-list-view>
            </rd-widget-body>
        </rd-widget>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <rd-widget>
            <rd-widget-header icon="fa-plus" title="Extras">
                <button class="btn btn-sm btn-info" style="float: right">Button</button>
            </rd-widget-header>
            <rd-widget-body>
                <div class="message">
                    This is a standard message which will also work the ".no-padding" class, I can also <span
                        class="error">be an error message!</span>
                </div>
                <hr/>
                <div class="message">
                    <a href="http://angular-ui.github.io/bootstrap/" target="_blank">UI Bootstrap</a> is included, so
                    you can use
                    <a href="#" tooltip="I'm a tooltip!">tooltips</a> and all of the other native Bootstrap JS
                    components!
                </div>
            </rd-widget-body>
        </rd-widget>
    </div>
    <div class="col-lg-6">
        <rd-widget>
            <rd-widget-header icon="fa-cog fa-spin" title="Loading Directive">
                <a href="http://tobiasahlin.com/spinkit/" style="float: right" target="_blank">SpinKit</a>
            </rd-widget-header>
            <rd-widget-body>
                <rd-loading></rd-loading>
            </rd-widget-body>
        </rd-widget>
    </div>
</div>


================================================
FILE: src/app/components/dashboard/dashboard.ts
================================================
import {Component} from 'angular2/core';

import {Alerts} from '../alerts/alerts';

import {RdLoading} from '../rd-loading/rd-loading';
import {RdWidget} from '../rd-widget/rd-widget';

import {RdWidgetHeader} from '../rd-widget-header/rd-widget-header';
import {RdWidgetBody} from '../rd-widget-body/rd-widget-body';
import {RdWidgetFooter} from '../rd-widget-footer/rd-widget-footer';

import {ServerListView} from '../server-list-view/server-list-view';
import {ServerListService} from '../../services/server_list';

import {UserListView} from '../user-list-view/user-list-view';
import {UserListService} from '../../services/user_list';


@Component({
    selector: 'dashboard',
    providers: [ServerListService],
    templateUrl: 'app/components/dashboard/dashboard.html',
    styleUrls: ['app/components/dashboard/dashboard.css'],
    directives: [Alerts, RdWidget, RdWidgetHeader, RdWidgetBody,
        RdWidgetFooter, RdLoading, ServerListView, UserListView]
})
export class Dashboard {
    servers:any[];
    users:any[];

    constructor(private serverListService:ServerListService, private userListService:UserListService) {
        this.serverListService = serverListService;
        this.userListService = userListService;
    }

    ngOnInit() {
        this.servers = this.serverListService.all();
        this.users = this.userListService.all();
    }
}


================================================
FILE: src/app/components/rd-loading/rd-loading.html
================================================
<div class="spinner"></div>


================================================
FILE: src/app/components/rd-loading/rd-loading.ts
================================================
import {Component} from 'angular2/core';

@Component({
  selector: 'rd-loading',
  templateUrl: 'app/components/rd-loading/rd-loading.html'
})
export class RdLoading {

}


================================================
FILE: src/app/components/rd-widget/rd-widget.html
================================================
<div class="widget">
  <ng-content></ng-content>
</div>


================================================
FILE: src/app/components/rd-widget/rd-widget.ts
================================================
import {Component} from 'angular2/core';
@Component({
  selector: 'rd-widget',
  templateUrl: 'app/components/rd-widget/rd-widget.html'
})
export class RdWidget {
}


================================================
FILE: src/app/components/rd-widget-body/rd-widget-body.html
================================================
<div class="widget-body {{classes}}">
    <rd-loading *ngIf="loading"></rd-loading>
    <div *ngIf="!loading" class="widget-content">
        <ng-content></ng-content>
    </div>
</div>


================================================
FILE: src/app/components/rd-widget-body/rd-widget-body.ts
================================================
import {Component, Input} from 'angular2/core';
@Component({
    selector: 'rd-widget-body',
    properties: ['loading', 'classes'],
    templateUrl: 'app/components/rd-widget-body/rd-widget-body.html'
})
export class RdWidgetBody {
    @Input()
    loading:boolean;

    @Input()
    classes:string;

    constructor() {
        this.loading = false;
        this.classes = '';
    }
}


================================================
FILE: src/app/components/rd-widget-footer/rd-widget-footer.html
================================================
<div class="widget-footer">
  <ng-content></ng-content>
</div>


================================================
FILE: src/app/components/rd-widget-footer/rd-widget-footer.ts
================================================
import {Component} from 'angular2/core';

@Component({
    selector: 'rd-widget-footer',
    templateUrl: 'app/components/rd-widget-footer/rd-widget-footer.html'
})
export class RdWidgetFooter {
}


================================================
FILE: src/app/components/rd-widget-header/rd-widget-header.html
================================================
<div class="widget-header">
  <div class="row">
    <div class="pull-left"><i class="fa {{icon}}"></i> {{title}}</div>
    <div class="pull-right col-xs-6 col-sm-4">
      <ng-content></ng-content>
    </div>
  </div>
</div>


================================================
FILE: src/app/components/rd-widget-header/rd-widget-header.ts
================================================
import {Component, Input} from 'angular2/core';

@Component({
    selector: 'rd-widget-header',
    templateUrl: 'app/components/rd-widget-header/rd-widget-header.html'
})
export class RdWidgetHeader {
    @Input()
    title:string;

    @Input()
    icon:string;

    constructor() {
        this.title = '';
        this.icon = '';
    }
}


================================================
FILE: src/app/components/server-list-view/server-list-view.html
================================================
<div class="table-responsive">
    <table class="table">
        <tbody>

        <tr *ngFor="#server of model">
            <td>{{server.name}}</td>
            <td>{{server.ip}}</td>
            <td>
                <span class="{{server.tooltipcls}}"><i
                        class="fa {{server.icon}}"></i></span></td>
            <!--tooltip="{{serverItem.tooltip}}"-->
        </tr>

        </tbody>
    </table>
</div>


================================================
FILE: src/app/components/server-list-view/server-list-view.ts
================================================
import {Component} from 'angular2/core';

@Component({
    selector: 'server-list-view',
    properties: ['model'],
    templateUrl: 'app/components/server-list-view/server-list-view.html'
})
export class ServerListView {

    model:any[];

    constructor() {
        this.model = [];
    }
}


================================================
FILE: src/app/components/tables/tables.html
================================================
<div class="row">
  <div class="col-lg-6">
    <rd-widget>
      <rd-widget-header icon="fa-tasks" title="Servers">
        <a href="#">Manage</a>
      </rd-widget-header>
      <rd-widget-body classes="medium no-padding">
        <server-list-view [model]="servers"></server-list-view>
      </rd-widget-body>
      <rd-widget-footer>
        <ul class="pagination pagination-sm pull-right">
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">&raquo;</a></li>
        </ul>
        <div class="clearfix"></div>
      </rd-widget-footer>
    </rd-widget>
  </div>
  <div class="col-lg-6">
    <rd-widget>
      <rd-widget-header icon="fa-tasks" title="Striped Servers">
        <a href="#">Manage</a>
      </rd-widget-header>
      <rd-widget-body classes="medium no-padding">
        <server-list-view [model]="servers"></server-list-view>
      </rd-widget-body>
      <rd-widget-footer>
        <ul class="pagination pagination-sm pull-right">
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">&raquo;</a></li>
        </ul>
        <div class="clearfix"></div>
      </rd-widget-footer>
    </rd-widget>
  </div>
</div>


================================================
FILE: src/app/components/tables/tables.ts
================================================
import {Component} from 'angular2/core';

import {RdLoading} from '../rd-loading/rd-loading';
import {RdWidget} from '../rd-widget/rd-widget';

import {RdWidgetHeader} from '../rd-widget-header/rd-widget-header';
import {RdWidgetBody} from '../rd-widget-body/rd-widget-body';
import {RdWidgetFooter} from '../rd-widget-footer/rd-widget-footer';

import {ServerListView} from '../server-list-view/server-list-view';
import {ServerListService} from '../../services/server_list';


@Component({
    selector: 'tables',
    providers: [ServerListService],
    templateUrl: 'app/components/tables/tables.html',
    directives: [RdWidget, RdWidgetHeader, RdWidgetBody, RdWidgetFooter, RdLoading, ServerListView]
})
export class Tables {
    servers:any[];
    serverListService:ServerListService;

    constructor(private serverListService:ServerListService) {
    }
    
    ngOnInit() {
        this.servers = this.serverListService.all();
    }
}


================================================
FILE: src/app/components/user-list-view/user-list-view.html
================================================
<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th class="text-center">ID</th>
            <th>Username</th>
            <th>Role</th>
            <th>Account</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="#user of model">
            <td class="text-center">{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.role}}</td>
            <td>{{user.account}}</td>
        </tr>
        </tbody>
    </table>
</div>


================================================
FILE: src/app/components/user-list-view/user-list-view.ts
================================================
import {Component, Input} from 'angular2/core';

@Component({
    selector: 'user-list-view',
    templateUrl: 'app/components/user-list-view/user-list-view.html',
    directives: []
})
export class UserListView {

    @Input()
    model:any[];

    constructor() {
        this.model = [];
    }
}


================================================
FILE: src/app/main.css
================================================
.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
}


================================================
FILE: src/app/main.html
================================================
<div id="page-wrapper" [ngClass]="{'open': toggle}">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar">
            <li class="sidebar-main">
                <a (click)="toggleSidebar()">
                    Dashboard
                    <span class="menu-icon glyphicon glyphicon-transfer"></span>
                </a>
            </li>
            <li class="sidebar-title"><span>NAVIGATION</span></li>
            <li class="sidebar-list">
                <a [routerLink]="['Dashboard']">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
            </li>
            <li class="sidebar-list">
                <a [routerLink]="['Tables']">Tables <span class="menu-icon fa fa-table"></span></a>
            </li>
        </ul>
        <div class="sidebar-footer">
            <div class="col-xs-4">
                <a href="https://github.com/ziyasal/rdash-angular2" target="_blank">
                    Github
                </a>
            </div>
            <div class="col-xs-4">
                <a href="https://github.com/ziyasal/rdash-angular2/blob/master/README.md" target="_blank">
                    About
                </a>
            </div>
            <div class="col-xs-4">
                <a href="javascript:void(0)">
                    Support
                </a>
            </div>
        </div>
    </div>
    <!-- End Sidebar -->

    <div id="content-wrapper">
        <div class="page-content">

            <!-- Header Bar -->
            <div class="row header">
                <div class="col-xs-12">
                    <div class="user pull-right">
                        <div class="item dropdown">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="app/public/img/avatar.jpg">
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li class="dropdown-header">
                                    Joe Bloggs
                                </li>
                                <li class="divider"></li>
                                <li class="link">
                                    <a href="javascript:void(0)">
                                        Profile
                                    </a>
                                </li>
                                <li class="link">
                                    <a href="javascript:void(0)">
                                        Menu Item
                                    </a>
                                </li>
                                <li class="link">
                                    <a href="javascript:void(0)">
                                        Menu Item
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="link">
                                    <a href="javascript:void(0)">
                                        Logout
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="item dropdown">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-bell-o"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li class="dropdown-header">
                                    Notifications
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="javascript:void(0)">Server Down!</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="meta">
                        <div class="page">
                            Dashboard
                        </div>
                        <div class="breadcrumb-links">
                            Home / Dashboard
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Header Bar -->

            <!--&lt;!&ndash; Main Content &ndash;&gt;-->
            <router-outlet></router-outlet>

        </div><!-- End Page Content -->
    </div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->


================================================
FILE: src/app/main.ts
================================================
import {Component, bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {FORM_PROVIDERS} from 'angular2/common';
import {
    RouteConfig,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    LocationStrategy,
    HashLocationStrategy
} from 'angular2/router';

import {Dashboard} from './components/dashboard/dashboard';
import {Tables} from './components/tables/tables';

import {UserListService} from './services/user_list';
import {ServerListService} from './services/server_list';

@RouteConfig([
    {path: '/', component: Dashboard, name: 'Dashboard'},
    {path: '/tables', component: Tables, name: 'Tables'}
])
@Component({
    selector: 'app',
    templateUrl: 'app/main.html',
    styleUrls: ['app/main.css'],
    directives: [ROUTER_DIRECTIVES]
})
class Main {

    mobileView:number = 992;
    toggle:boolean = false;

    constructor() {
        this.attachEvents();
    }

    attachEvents() {
        window.onresize = ()=> {
            if (this.getWidth() >= this.mobileView) {
                if (localStorage.getItem('toggle')) {
                    this.toggle = !localStorage.getItem('toggle') ? false : true;
                } else {
                    this.toggle = true;
                }
            } else {
                this.toggle = false;
            }
        }
    }

    getWidth() {
        return window.innerWidth;
    }

    toggleSidebar() {
        this.toggle = !this.toggle;
        localStorage.setItem('toggle', this.toggle.toString());
    }
}

bootstrap(Main, [ROUTER_PROVIDERS, FORM_PROVIDERS,
    ROUTER_PROVIDERS, HTTP_PROVIDERS, UserListService, ServerListService,
    bind(LocationStrategy).toClass(HashLocationStrategy)]);


================================================
FILE: src/app/services/server_list.ts
================================================
import {Injectable} from "angular2/core";

@Injectable()
export class ServerListService {
    servers:any[] = [{
        name: 'RDVMPC001',
        ip: '238.103.133.37',
        'tooltip': '',
        'tooltipcls': 'text-success',
        'icon': 'fa-check'
    },
        {name: 'RDVMPC002', ip: '68.66.63.170', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'},
        {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'},
        {name: 'RDVMPC003', ip: '76.117.212.33', 'tooltip': '', 'tooltipcls': 'text-danger', 'icon': 'fa-warning'},
        {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'},
        {
            name: 'RDESX003',
            ip: '209.25.191.61',
            'tooltip': 'Could not connect!',
            'tooltipcls': 'text-warning',
            'icon': 'fa-flash'
        },
        {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'},
        {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'},
        {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'},
        {name: 'RDESX003', ip: '209.25.191.61', 'tooltip': '', 'tooltipcls': 'text-success', 'icon': 'fa-check'}
    ];

    add(value:any):void {
        this.servers.push(value);
    }

    all():any[] {
        return this.servers;
    }
}


================================================
FILE: src/app/services/user_list.ts
================================================

import {Injectable} from "angular2/core";

@Injectable()
export class UserListService {
  users:any[] = [{
    id: 1,
    name: 'Joe Bloggs',
    role: 'Super Admin',
    account: 'AZ23045'
  }, {
    id: 2,
    name: 'Timothy Hernandez',
    role: 'Admin',
    account: 'AU24783'
  }, {
    id: 3,
    name: 'Joe Bickham',
    role: 'User',
    account: 'AM23781'
  }];

  add(value:any):void {
    this.users.push(value);
  }

  all():any[] {
    return this.users;
  }
}


================================================
FILE: src/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/src/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Angular 2 App</title>
    <base href="<%= APP_BASE %>">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- build:css lib/css/main.min.css -->
    <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/rdash-ui/dist/css/rdash.css">
    <link rel="stylesheet" type="text/css" href="../src/app/main.css">
    <!-- endbuild -->

    <!-- inject:css -->
    <!-- endinject -->
</head>
<body>


<app>Loading...</app>

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>

<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

<!-- inject:js -->
<!-- endinject -->

<script src="system.config.js"></script>

</body>
</html>


================================================
FILE: src/system.config.js
================================================
System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/main')
    .then(null, console.error.bind(console));

================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

================================================
FILE: typings.json
================================================
{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}