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 HTML CONTENT ``` **Widget with Header** ```js Manage ``` **Widget with Footer** ```js Manage FOOTER CONTENT ``` **Widget with Loader** ```js ``` # 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 ", "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 ================================================
================================================ 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 ================================================
80
Users
16
Servers
225
Documents
62
Tickets
Manage
This is a standard message which will also work the ".no-padding" class, I can also be an error message!
UI Bootstrap is included, so you can use tooltips and all of the other native Bootstrap JS components!
SpinKit
================================================ 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 ================================================ ================================================ 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 ================================================
================================================ 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 ================================================
================================================ 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 ================================================
================================================ 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 ================================================
{{title}}
================================================ 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 ================================================
{{server.name}} {{server.ip}}
================================================ 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 ================================================
Manage
Manage
================================================ 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 ================================================
ID Username Role Account
{{user.id}} {{user.name}} {{user.role}} {{user.account}}
================================================ 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 ================================================
Dashboard
Home / Dashboard
================================================ 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 ================================================ My Angular 2 App Loading... ================================================ 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" } }