Update 1.0.1 Alcyone Minor

.travis.yml

@@ -1,3 +1,4 @@
+dist: trusty
 language: node_js
 node_js:
   - "8"
@@ -8,8 +9,12 @@ branches:
     - develop
     - travis-fix
 
-before_script:
-  - npm install -g firebase-tools
+install:
+  - npm install
+
+cache:
+  directories:
+    - "node_modules"
 
 script:
-  - ng build --prod --output-hashing=bundles
+  - ng build --prod --output-hashing=bundles --no-aot

README.md

@@ -1,10 +1,11 @@
 # ElectroTab: The electrifying new tab experience!
-
-![Favicon](src/assets/images/favicon.png)
+<img align="left" src="src/assets/images/favicon.png" alt="Favicon" width="24%">
 
 ## Built with [Angular](https://angular.io/) and [Firebase](https://firebase.google.com/) with styles and components from [MaterializeCSS](http://materializecss.com/). Current support for Chrome and Chromium.
 
-**Build Status:** [![Build Status](https://travis-ci.org/dbqeo/ElectroTab.svg?branch=master)](https://travis-ci.org/dbqeo/ElectroTab)
+**Master Status:** [![Build Status](https://travis-ci.org/dbqeo/ElectroTab.svg?branch=master)](https://travis-ci.org/dbqeo/ElectroTab)
+
+**Develop Status:** [![Build Status](https://travis-ci.org/dbqeo/ElectroTab.svg?branch=develop)](https://travis-ci.org/dbqeo/ElectroTab)
 
 ## Discord Server
 We use **Discord** for realtime collaboration (it's not just for gaming!) Our invite code is https://discord.gg/FnvQ6MG. **Everyone is welcome to join!**
@@ -32,7 +33,7 @@ Need help? View the documentation for the [ElectroTab API](https://github.com/db
  5. Open your web browser (hopefully Chromium/Chrome) to localhost:4200. Enjoy :)
 
 ## Deploy Guide
- 1. Run `ng build --prod --output-hashing=bundles --no-aot` -> Start new build with partial hashing and uglifyJS. This will ensure that the cache will be refreshed quickly with new updates. 
+ 1. Run `ng build --prod --output-hashing=bundles --no-aot` -> Start new build with partial hashing and uglifyJS. This will ensure that the cache will be refreshed quickly with new updates.
  **Note:** The `--no-aot` flag is a temporary workaround that will be removed in the next update.
  2. Run `firebase deploy` -> Deploy new build to Firebase
 

package.json

@@ -9,27 +9,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.3.3",
-    "@angular/cdk": "^2.0.0-beta.10",
+    "@angular/animations": "4.3.3",
+    "@angular/cdk": "2.0.0-beta.10",
     "@angular/common": "4.3.6",
     "@angular/compiler": "4.3.6",
     "@angular/core": "4.3.6",
     "@angular/forms": "4.3.6",
     "@angular/http": "4.3.6",
-    "@angular/material": "^2.0.0-beta.10",
+    "@angular/material": "2.0.0-beta.10",
     "@angular/platform-browser": "4.3.6",
     "@angular/platform-browser-dynamic": "4.3.6",
     "@angular/router": "4.3.6",
     "@ngtools/json-schema": "^1.1.0",
     "angular-gridster2": "^3.12.0",
     "angular2-materialize": "^15.0.4",
-    "angularfire2": "^4.0.0-rc.2",
+    "angularfire2": "4.0.0-rc.2",
     "bootstrap": "3.3.7",
     "common-tags": "^1.4.0",
     "core-js": "^2.5.1",
     "denodeify": "^1.2.1",
     "ember-cli-string-utils": "^1.1.0",
-    "firebase": "^4.1.3",
+    "firebase": "4.1.3",
     "firebase-tools": "^3.10.0",
     "fs-extra": "^4.0.1",
     "get-caller-file": "^1.0.2",

src/app/404/page-not-found.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'page-not-found-component',
+    template: `<iframe src="http://electrotab.epizy.com/electroError/404.html" width="100%" height="100%" frameborder="0" style="position:absolute; left: 0; right: 0; bottom: 0; top: 0px; "></iframe>`
+})
+export class PageNotFoundComponent { }

src/app/404/page-not-found.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { PageNotFoundComponent } from './page-not-found.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: '', component: PageNotFoundComponent }
+        ])
+    ],
+    exports: [
+        RouterModule
+    ],
+    declarations: [
+        PageNotFoundComponent
+    ]
+})
+export class PageNotFoundModule {
+}
+
+

src/app/app.module.ts

@@ -28,7 +28,9 @@ const routes: Routes = [
     { path: '', loadChildren: 'app/home/home.module#HomeModule' },
     { path: 'info', loadChildren: 'app/info/info.module#InfoModule' },
     { path: 'account', loadChildren: 'app/account/account.module#AccountModule' }, 
-    { path: 'customize', loadChildren: 'app/customize/customize.module#CustomizeModule' }
+    { path: 'customize', loadChildren: 'app/customize/customize.module#CustomizeModule' },
+    { path: '404', loadChildren: 'app/404/page-not-found.module#PageNotFoundModule' },
+    { path: '**', redirectTo:'404' }
 ]
 
 @NgModule({

src/app/customize/customize.module.ts

@@ -23,7 +23,6 @@ import {
 import { GridEditPageComponent } from 'app/customize/grid-edit-page/grid-edit-page.component';
 import { ThemePageComponent } from 'app/customize/theme-page/theme-page.component';
 import { SettingsPageComponent } from 'app/customize/settings-page/settings-page.component';
-import { GridMenuComponent} from 'app/customize/grid-menu/grid-menu.component';
 import { CompileService } from 'app/shared/compile/compile.service';
 import { CompileModule } from 'app/shared/compile/compile.module';
 
@@ -33,8 +32,7 @@ import { HomeModule } from 'app/home/home.module';
     declarations: [
         GridEditPageComponent,
         ThemePageComponent,
-        SettingsPageComponent,
-        GridMenuComponent
+        SettingsPageComponent
     ],
     imports: [
         CommonModule,

src/app/customize/grid-edit-page/grid-edit-page.component.html

@@ -10,7 +10,7 @@
 			<md-toolbar colo="primary">
 			  <div class="main-toolbar">
 
-				 <md-select aria-label="Grid type" [(ngModel)]="options.gridType" (ngModelChange)="changedOptions()" placeholder="Grid Type">
+				 <md-select aria-label="Grid type" [(ngModel)]="grid.options.gridType" (ngModelChange)="grid.changedOptions()" placeholder="Grid Type">
 				  <md-option value="fit">Fit to screen</md-option>
 				  <md-option value="scrollVertical">Scroll Vertical</md-option>
 				  <md-option value="scrollHorizontal">Scroll Horizontal</md-option>
@@ -19,7 +19,7 @@
 				  <md-option value="horizontalFixed">Horizontal Fixed</md-option>
 				</md-select>
 
-				<md-select aria-label="Compact type" [(ngModel)]="options.compactType" (ngModelChange)="changedOptions()" placeholder="Compact Type">
+				<md-select aria-label="Compact type" [(ngModel)]="grid.options.compactType" (ngModelChange)="grid.changedOptions()" placeholder="Compact Type">
 				  <md-option value="none">None</md-option>
 				  <md-option value="compactUp">Compact Up</md-option>
 				  <md-option value="compactLeft">Compact Left</md-option>
@@ -30,18 +30,18 @@
 
 				<div class="margin-slider">
 				  <div><span>Margin</span></div>
-				  <md-slider aria-label="Margin" thumbLabel min="0" max="30" step="1" (ngModelChange)="changedOptions()" [(ngModel)]="options.margin"></md-slider>
+				  <md-slider aria-label="Margin" thumbLabel min="0" max="30" step="1" (ngModelChange)="grid.changedOptions()" [(ngModel)]="grid.options.margin"></md-slider>
 				</div>
 
-				<md-checkbox [(ngModel)]="options.outerMargin" (ngModelChange)="changedOptions()">Outer Margin</md-checkbox>
+				<md-checkbox [(ngModel)]="grid.options.outerMargin" (ngModelChange)="grid.changedOptions()">Outer Margin</md-checkbox>
 
 				<md-input-container>
-				  <input mdInput [(ngModel)]="options.fixedColWidth" type="number" placeholder="Fixed Col Width" (ngModelChange)="changedOptions()">
+				  <input mdInput [(ngModel)]="grid.options.fixedColWidth" type="number" placeholder="Fixed Col Width" (ngModelChange)="grid.changedOptions()">
 				</md-input-container>
 				<md-input-container>
-				  <input mdInput [(ngModel)]="options.fixedRowHeight" type="number" placeholder="Fixed Row Height" (ngModelChange)="changedOptions()">
+				  <input mdInput [(ngModel)]="grid.options.fixedRowHeight" type="number" placeholder="Fixed Row Height" (ngModelChange)="grid.changedOptions()">
 				</md-input-container>
-				<md-checkbox [(ngModel)]="options.keepFixedHeightInMobile" (ngModelChange)="changedOptions()">
+				<md-checkbox [(ngModel)]="grid.options.keepFixedHeightInMobile" (ngModelChange)="grid.changedOptions()">
 				  Keep Fixed Height In Mobile
 				</md-checkbox>
 			  </div>
@@ -65,29 +65,18 @@
 					</div>
 				</form>
 				<table class="responsive-table">
-					<tbody style="max-height: 400px;">
+					<tbody style="max-height: 400px; overflow-x: auto;">
 
-						<tr *ngFor="let widget of getWidgets()">
+						<tr *ngFor="let widget of getWidgets().getWidgets()">
 							<td *ngIf="widget.name.toLowerCase().includes(widgetSearch.value.toLowerCase())">
-								<div class="card responsive-30 waves-effect waves-block waves-light" (click)="(widget.defaultSetting) ? addItemCustom(widget.id, widget.width, widget.height, widget.menuTemplate, widget.defaultSetting) : addItem(widget.id, widget.width, widget.height, widget.menuTemplate)">
+
+								<div class="card responsive-30 waves-effect waves-block waves-light" (click)="(widget.defaultSetting) ? grid.addItemCustom(widget.id, widget.width, widget.height, widget.menuTemplate !== undefined, widget.defaultSetting) : grid.addItem(widget.id, widget.width, widget.height, widget.menuTemplate !== undefined)">
+
 									<div class="card-content {{getSetting('color')}}" id="add-component-label"><span class="flow-text white-text">{{widget.name}}</span></div>
 									<div class="card-image"><img class="responsive-img" src="../../../assets/images/{{widget.icon}}"/></div>
 								</div>
 								<td>
 						</tr>
-
-						<!-- 4. Custom URL SpeedDial-->
-						<!-- <tr>
-						<td>
-							<div class="card responsive-40 ">
-							<div class="card-image waves-effect waves-block waves-light">
-								<img class="responsive-img" src="../../../assets/images/shortcut.png" (click)="addItem(4,1,1,true)" />
-								<span class="card-title black-text">Website Shortcut</span>
-							</div>
-							</div>
-						<td>
-						</tr> -->
-
 					</tbody>
 				</table>
 			</div>
@@ -96,17 +85,17 @@
 	  <!-- Quick Actions Buttons -->
 	  <li>
 		<div class="collapsible-header center-align" style="padding:1%;">
-		  <a (click)="resetGrid()" class="waves-effect waves-light btn-large {{getSetting('color')}}" style="margin-right:3%">Reset Grid</a>
+		  <a (click)="grid.resetGrid()" class="waves-effect waves-light btn-large {{getSetting('color')}}" style="margin-right:3%">Reset Grid</a>
 		  <a (click)="refresh()" class="waves-effect waves-light btn-large {{getSetting('color')}}" style="margin-right:3%">Refresh Page</a>
-		  <a (click)="resetOptions()" class="waves-effect waves-light btn-large {{getSetting('color')}}" style="margin-right:3%">Reset Options</a>
+		  <a (click)="grid.resetOptions()" class="waves-effect waves-light btn-large {{getSetting('color')}}" style="margin-right:3%">Reset Options</a>
 		</div>
 	  </li>
 	</ul>
 
-	<div *ngIf="gridLoaded" id="dynamicSize">
-		<gridster [options]="options">
+	<div *ngIf="grid.gridLoaded" id="dynamicSize">
+		<gridster [options]="grid.options">
 
-			<gridster-item [item]="item" *ngFor="let item of dashboard">
+			<gridster-item [item]="item" *ngFor="let item of grid.dashboard">
 
 				<div class="card hoverable fill">
 					<div class="card-content" style="padding: 0;">
@@ -124,17 +113,25 @@
 
 							<!-- Destroy -->
 							<ul class="right">
-							<li><a *ngIf="dashboard.length > 1" class="dropdown-button" (click)="removeItem($event,item)"><i class="material-icons red-text" >close</i></a></li>
+							<li><a *ngIf="grid.dashboard.length > 1" class="dropdown-button" (click)="grid.removeItem($event,item)"><i class="material-icons red-text" >close</i></a></li>
 							</ul>
 
 						</div>
 						</nav>
 					</div>
-						<grid-content  class="button-holder center-align" [item]="item" style="top: 2vh;"></grid-content>
+					<!-- Grid Content -->
+						<div style="background: transparent; height: 100%; width: 100%;" class="child center-align">
+							<div [p3x-compile]="getWidgets().getWidget(item.id).template" [item]="item"></div>
+						</div>
 					</div>
 					<div class="card-reveal white z2">
 						<span class="card-title grey-text text-darken-4">Settings<i class="material-icons right">close</i></span>
-						<grid-menu [item]="item"></grid-menu>
+
+						<!-- Menu -->
+						<div style="background: transparent">
+							<div [p3x-compile]="getWidgets().getWidget(item.id).menuTemplate" [item]="item"></div>
+						</div>
+
 					</div>
 				</div>