SEN67-131: [EXT-728] Ext JS Examples: Update PWA with npm - initial c…

…ommit

.gitignore

@@ -0,0 +1,5 @@
+/.vscode
+/generatedFiles
+/node_modules
+/build
+*.log

README.md

@@ -1,22 +1,18 @@
 # PWA
 
-A demo of the Progressive Web App support in Ext JS 6.5 and Sencha Cmd 6.5.
+A demo of the Progressive Web App support using Ext JS 6.5 and open tooling.
 
 ## To run
 
-You will need to download [Sencha Ext JS](https://www.sencha.com/products/extjs). We
-recommend extracting Ext JS into a `"sencha-sdks"` folder in your home directory.
-
-Once Ext JS is extracted, run these commands:
+Run these commands:
 
     cd client
-    sencha app install ~/sencha-sdks
-    sencha app build --dev
+    npm install
+    npm start
     cd ../server
     npm install
     npm start
 
-On Windows the "~" part of the path will be replaced by something like "C:\Users\Me\".
 
 You should now be able to point your browser to [http://localhost:8082/](http://localhost:8082/).
 
@@ -25,9 +21,9 @@ You should now be able to point your browser to [http://localhost:8082/](http://
 To run a production build, run these commands:
 
     cd client
-    sencha app build
+    npm run production
     cd ../server
-    NODE_ENV=production npm start
+    ENV=production npm start
 
 This will run a production build and start the server with a path to the production build.
 You should now be able to point your browser to [http://localhost:8082/](http://localhost:8082/).

client/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/build
+/bootstrap*
+/index.js*

client/README.md

@@ -0,0 +1 @@
+# PWA application

client/app.js

@@ -0,0 +1,18 @@
+/*
+ * This file launches the application by asking Ext JS to create
+ * and launch() the Application class.
+ */
+Ext.application({
+    name: 'PWA',
+
+    extend: 'PWA.Application',
+
+    requires: [
+        'PWA.*'
+    ],
+
+    // The name of the initial view to create. The main view will
+    // be added to the Ext.Viewport.
+    //
+    mainView: 'PWA.view.main.Main'
+});

client/app.json

@@ -0,0 +1,167 @@
+{
+  "name": "PWA",
+  "namespace": "PWA",
+  "version": "0.0.1",
+  "framework": "ext",
+  "template": "universalmodern",
+  "indexHtmlPath": "index.html",
+  "requires": [ 
+    "font-awesome"
+  ],
+
+  "builds": {
+    "desktop": {
+      "toolkit": "modern",
+      "theme": "theme-material",
+      "sass": {
+        "generated": {
+          "var": "modern/sass/save.scss",
+          "src": "modern/sass/save"
+        }
+      }
+    },
+    "phone": {
+      "toolkit": "modern",
+      "theme": "theme-material",
+      "sass": {
+        "generated": {
+          "var": "modern/sass/save.scss",
+          "src": "modern/sass/save"
+        }
+      }
+    }
+  },
+
+  "classpath": ["app/shared/src","app/${build.id}/src"],
+  "overrides": ["app/shared/overrides","app/${build.id}/overrides"],
+
+  "sass": {
+    "namespace": "PWA",
+
+    "etc": [
+      "sass/etc/all.scss"
+    ],
+    "var": [
+      "app/shared/sass/var.scss",
+      "app/${build.id}/sass/var.scss"
+    ],
+    "src": [
+      "app/shared/src/sass/src.scss",
+      "app/${build.id}/sass/src.scss"
+    ]
+  },
+
+  "resources": [
+    { "path": "resources", "output": "shared" }
+    ,{ "path": "resources/${build.id}" }
+  ],
+
+  "output": {
+    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
+    "page": "index.html",
+    "manifest": "generatedFiles/${build.id}.json",
+    "js": "generatedFiles/${build.id}/app.js",
+    "appCache": {"enable": false},
+    "resources": {
+      "path": "${build.id}/resources",
+      "shared": "resources"
+    }
+  },
+
+  "fashion": {
+    "missingParameters": "error",
+    "inliner": {
+      "enable": false
+    }
+  },
+
+  "js": [
+    {
+      "path": "app.js",
+      "bundle": true
+    }
+  ],
+  "css": [
+    {
+      "path": "${build.out.css.path}",
+      "bundle": true,
+      "exclude": ["fashion"]
+    }
+  ],
+
+  "loader": {
+    "cache": false,
+    "cacheParam": "_dc"
+  },
+
+  "production": {
+    "output": {
+      "appCache": {
+        "enable": true,
+        "path": "cache.appcache"
+      }
+    },
+    "loader": {
+      "cache": "${build.timestamp}"
+    },
+    "cache": {
+      "enable": true
+    },
+    "compressor": {
+      "type": "yui"
+    }
+  },
+
+  "testing": {},
+
+  "development": {
+    "watch": {
+      "delay": 250
+    }
+  },
+
+  "bootstrap": {
+    "base": "${app.dir}",
+    "microloader": "bootstrap.js",
+    "css": "bootstrap.css"
+},
+
+  "cache": {
+    "enable": false,
+    "deltas": "${build.id}/deltas"
+  },
+
+  "appCache": {
+    "cache": ["index.html"],
+    "network": ["*"],
+    "fallback": []
+  },
+
+
+  "archivePath": "archive/${build.id}",
+
+  "ignore": ["(^|/)CVS(/?$|/.*?$)"],
+  "id": "577caa96-ffa4-4dc3-b804-c492c5d89d51",
+
+  "progressive": {
+    "manifest": {
+        "name": "Sencha",
+        "short_name": "Sencha Employee Directory",
+        "icons": [{
+            "src": "resources/icon-small.png",
+            "sizes": "96x96"
+        }, {
+            "src": "resources/icon-medium.png",
+            "sizes": "192x192"
+        }, {
+            "src": "resources/icon-large.png",
+            "sizes": "256x256"
+        }],
+        "theme_color": "#054059",
+        "background_color": "#054059",
+        "display": "standalone",
+        "orientation": "portrait",
+        "start_url": "/index.html"
+    }
+  }
+}

client/app/desktop/overrides/Readme.md

@@ -0,0 +1 @@
+# PWA

client/app/desktop/sass/var.scss

@@ -0,0 +1,4 @@
+//$base-color:#025B80; //Themer Blue
+//$base-color:#EF5350; //red-ish
+//$base-color:#8D6E63; //brown-ish
+//$base-color:#26A69A; //green-ish

client/app/desktop/src/Application.js

@@ -0,0 +1,27 @@
+Ext.define('PWA.Application', {
+	extend: 'Ext.app.Application',
+	name: 'PWA',
+	requires: ['PWA.*'],
+
+	launch: function () {
+		Ext.ariaWarn = Ext.emptyFn
+		Ext.getBody().removeCls('launching')
+		var elem = document.getElementById("splash")
+		if (elem && elem.parentNode) 
+		{ 
+			elem.parentNode.removeChild(elem); 
+		}
+
+		Ext.Viewport.add([{xtype: 'mainview'}])
+	},
+
+	onAppUpdate: function () {
+		Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
+			function (choice) {
+				if (choice === 'yes') {
+					window.location.reload();
+				}
+			}
+		);
+	}
+});

client/app/desktop/src/Application.scss

@@ -0,0 +1,92 @@
+// $deep-blue: #32404e;
+// $b01:#88a8c3;
+// $b02: red;
+// $b03: #085878;
+//$muted-blue: #4bacd6;
+////$Sencha-blue: #094158;
+
+$Sencha: #24bcf8;
+
+//$HKHA: #f7101d;
+
+//$base_color: lighten($Sencha-blue,25%);
+// $color: white;
+// //$base_foreground_color: red;
+
+//$panel-navigation-background-color: darken($base_color,25%);
+//$base-app-color: darken($base_color,0%);
+
+//$panel_header_background_color: $base-app-color;
+
+//.x-titlebar {
+//	background-color: $base-app-color !important;
+//} 
+
+//http://www.0to255.com/064158
+//https://www.w3schools.com/colors/colors_converter.asp
+//https://codepen.io/baudoin/pen/HdliD
+
+
+// $xenable-font-awesome: dynamic(true);
+
+// $auth-background-image: dynamic(url('/resources/images/glowing-cube.jpg'));
+// $auth-background-image: dynamic(url('/resources/images/starfish.jpg'));
+
+// // Defining Colors
+
+// $deep-blue: #32404e;
+
+// $dark_chocolate : #5D4446;
+
+// $white_chocolate: #A99386;
+// $milk_chocolate :       #523027;
+// $caramel_chocolate:       #9C6D51;
+// $silver_spoons: #a79c8e;
+// $strawberry_chocolate: #f1bbba;
+// $strawberry_mousse: #EB9F9F;
+
+// // ***** Sencha Sass Variable Below *****
+
+// // Global Colors
+// //$base_color : $dark_chocolate; 
+// //$base_foreground_color : $white_chocolate; 
+// $neutral_color : $white_chocolate;
+// $body_background_color : lighten($caramel_chocolate,50%);
+
+// // Window Colors
+// $window_body_background_color : $white_chocolate;
+// $window_header_background_color: $dark_chocolate;
+
+// // Panel Colors
+// $panel_body_background_color : lighten($base_color,45%);
+// $panel_header_background_color: $dark_chocolate;
+
+// // Grid Colors
+// $grid-row-cell-focus-color: $strawberry_mousse;
+// $grid-row-cell-selected-background-color: $strawberry_chocolate;
+// $grid-row-cell-focus-background-color: lighten($strawberry_chocolate, 15%);
+
+// // Buttons
+// $button-default-base-color : $milk_chocolate;
+// $button_toolbar_color : $milk_chocolate;
+
+// // Progress Bars
+// $progress_bar_background_color: $strawberry_mousse; 
+
+// // Toolbar
+// $toolbar-background-color: lighten($white_chocolate,30%);
+
+// // Tab Panel
+// $tab_base_color: $milk_chocolate;
+// $tab_color: lighten($white_chocolate,25%);
+// $tab_font_size: 18px;
+
+// // ***** Fonts  **********
+
+// // Importing Google Fonts
+// @import url(http://fonts.googleapis.com/css?family=Chewy);
+
+// $chewy: 'Chewy', cursive;;
+// $font-family: $chewy;
+// $font-size: 14px;
+// $color: $white_chocolate;

client/app/desktop/src/model/Readme.md

@@ -0,0 +1 @@
+# PWA

client/app/desktop/src/store/Readme.md

@@ -0,0 +1 @@
+# PWA

client/app/desktop/src/util/Common.js

@@ -0,0 +1,8 @@
+Ext.define('PWA.util.Common', {
+	alternateClassName: ['Common'],
+	singleton: true,
+
+	log: function(msg) {
+		console.log(msg);
+	}
+});

client/app/desktop/src/util/Readme.md

@@ -0,0 +1 @@
+# PWA