diff --git a/Supervisor portal/README.md b/Supervisor portal/README.md new file mode 100644 index 0000000..62ae036 --- /dev/null +++ b/Supervisor portal/README.md @@ -0,0 +1,2 @@ +1. Run this code using any server (node or tomcat) +2. Main view file is index.html diff --git a/Supervisor portal/app/app.js b/Supervisor portal/app/app.js new file mode 100644 index 0000000..4d6af59 --- /dev/null +++ b/Supervisor portal/app/app.js @@ -0,0 +1,4 @@ +angular.module('supervisorApp',['ui.router']) +.config(['routesProvider', function(routesProvider){ + +}]); \ No newline at end of file diff --git a/Supervisor portal/app/controllers/homeController.js b/Supervisor portal/app/controllers/homeController.js new file mode 100644 index 0000000..5d03b1a --- /dev/null +++ b/Supervisor portal/app/controllers/homeController.js @@ -0,0 +1,32 @@ +angular.module('supervisorApp') +.controller('homeController',['$scope','$rootScope','workersJson',function($scope,$rootScope,workersJson){ + var vm = {} + this.vm = vm; + vm.page = {} + vm.page.data = {}; + vm.page.data.supervisorName = 'John'; + vm.page.data.workers = workersJson.workers; + vm.page.data.selectedIndex = -1; + var resetInfo = function(){ + vm.page.data.taskName = undefined; + vm.page.data.taskDuration = undefined; + vm.page.data.selectedIndex = - 1; + vm.page.data.selectedAvailableWorker = undefined; + } + vm.selectWorker = function(worker,selectedIndex){ + resetInfo(); + if(worker.taskAssigned === ''){ + vm.page.data.selectedAvailableWorker = worker.name; + vm.page.data.selectedIndex = selectedIndex; + } + } + vm.assignTask = function(){ + vm.page.data.workers[8]['taskAssigned'] = vm.page.data.taskName; + vm.page.data.workers[8]['taskDuration'] = vm.page.data.taskDuration; + resetInfo(); + + } + vm.ringTheBell = function(){ + ringWorker.postMessage(vm.page.data.workers); + } +}]) \ No newline at end of file diff --git a/Supervisor portal/app/directives/workers-list-view.js b/Supervisor portal/app/directives/workers-list-view.js new file mode 100644 index 0000000..809c211 --- /dev/null +++ b/Supervisor portal/app/directives/workers-list-view.js @@ -0,0 +1,38 @@ +angular.module('supervisorApp') +.directive('workersListView',[function(){ + var config = {}; + config.restrict = 'E'; + config.templateUrl = function(){ + return '/views/partial/workersListView.html' + } + config.scope = { + worker : '=', + selectedWorker : '&', + assignTask : '&' + } + config.compile = function($element,$attrs){ + return { + pre : function(scope,element,attrs){ + element.on('click',function(e){ + if(scope.worker.taskAssigned === ''){ + angular.element(element[0].querySelector('div.panel-body')).css('background-color', '#FFB6C1'); + scope.$apply(function(){ + scope.selectedWorker(); + }); + }else{ + alert('Please Select Available Worker'); + } + }); + }, + post : function(scope,element,attrs){ + scope.$watch(function(){ + return scope.worker.taskAssigned; + },function(){ + angular.element(element[0].querySelector('div.panel-body')).css('background-color', 'transparent'); + }) + } + } + + } + return config; +}]) \ No newline at end of file diff --git a/Supervisor portal/app/services/clientService.js b/Supervisor portal/app/services/clientService.js new file mode 100644 index 0000000..9edcdd6 --- /dev/null +++ b/Supervisor portal/app/services/clientService.js @@ -0,0 +1,6 @@ +angular.module('supervisorApp') +.service('clientService', ['$http','$q', function($http,$q){ + this.getWorkersJson = function(){ + return $http.get('/data/workersJson.json'); + } +}]); \ No newline at end of file diff --git a/Supervisor portal/app/services/routes.js b/Supervisor portal/app/services/routes.js new file mode 100644 index 0000000..2255932 --- /dev/null +++ b/Supervisor portal/app/services/routes.js @@ -0,0 +1,19 @@ +angular.module('supervisorApp') +.provider('routes', ['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) { + $stateProvider.state('home',{ + url : '/home', + templateUrl : function($stateParams){ + return 'views/home.html' + }, + controller : 'homeController as homectrl', + resolve : { + workersJson : ['clientService',function(clientService){ + return clientService.getWorkersJson().then(response => response.data); + }] + } + }); + $urlRouterProvider.otherwise('/home'); + this.$get = function(){ + return {}; + }; +}]); \ No newline at end of file diff --git a/Supervisor portal/css/style.css b/Supervisor portal/css/style.css new file mode 100644 index 0000000..c56c204 --- /dev/null +++ b/Supervisor portal/css/style.css @@ -0,0 +1,12 @@ +.text-bold { + font-weight: bold;; +} +.offsetT20{ + margin-top: 20px; +} +.offsetT10{ + margin-top: 10px; +} +.offsetL5{ + margin-left: 5px; +} \ No newline at end of file diff --git a/Supervisor portal/data/workersJson.json b/Supervisor portal/data/workersJson.json new file mode 100644 index 0000000..c88cf58 --- /dev/null +++ b/Supervisor portal/data/workersJson.json @@ -0,0 +1,54 @@ +{ + "workers": [ + { + "name": "Tim Dowd", + "mobileNumber": "+122-7485964152", + "taskAssigned": "Manage files", + "taskDuration": 5 + }, + { + "name": "Jane Mistro", + "mobileNumber": "+122-1527485964", + "taskAssigned": "Verify machine status", + "taskDuration": 10 + }, + { + "name": "Jerry Lucas", + "mobileNumber": "+122-9641527485", + "taskAssigned": "Monitor power management", + "taskDuration": 3 + }, + { + "name": "Tyra Kindo", + "mobileNumber": "+122-5964157482", + "taskAssigned": "" + }, + { + "name": "Cesar Monk", + "mobileNumber": "+122-4152748596", + "taskAssigned": "Order Management", + "taskDuration": 5 + }, + { + "name": "Zed Mills", + "mobileNumber": "+122-6415274859", + "taskAssigned": "" + }, + { + "name": "Kera Hoadely", + "mobileNumber": "+122-7596415482", + "taskAssigned": "" + }, + { + "name": "Craig Hoadely", + "mobileNumber": "+122-5967484152", + "taskAssigned": "Insert Cotton", + "taskDuration": 7 + }, + { + "name": "Dee Sather", + "mobileNumber": "+122-9647485152", + "taskAssigned": "" + } + ] +} \ No newline at end of file diff --git a/Supervisor portal/index.html b/Supervisor portal/index.html new file mode 100644 index 0000000..074998d --- /dev/null +++ b/Supervisor portal/index.html @@ -0,0 +1,19 @@ + + + Supervisor Portal + + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/Supervisor portal/views/home.html b/Supervisor portal/views/home.html new file mode 100644 index 0000000..c79ee80 --- /dev/null +++ b/Supervisor portal/views/home.html @@ -0,0 +1,43 @@ +
+
+
+
+
+

Welcome, {{homectrl.vm.page.data.supervisorName}}

+
+
+ +
+
+
+
+ +
+
+
+
+
+

Assign task to '{{homectrl.vm.page.data.selectedAvailableWorker}}'

+
+
+
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+
+
+
diff --git a/Supervisor portal/views/partial/workersListView.html b/Supervisor portal/views/partial/workersListView.html new file mode 100644 index 0000000..0be342a --- /dev/null +++ b/Supervisor portal/views/partial/workersListView.html @@ -0,0 +1,16 @@ +
+
+
+
+
{{worker.name}}
+
{{worker.mobileNumber}}
+
+
+
+

+ {{worker.taskAssigned ? worker.taskAssigned : 'Available'}} +

+
+
+
+
\ No newline at end of file diff --git a/Supervisor portal/web-worker/ring-the-bell.js b/Supervisor portal/web-worker/ring-the-bell.js new file mode 100644 index 0000000..b3ca1f2 --- /dev/null +++ b/Supervisor portal/web-worker/ring-the-bell.js @@ -0,0 +1,9 @@ +self.onmessage = function(e) { + var workers = e.data; + for(var i = 0; i < workers.length; i++){ + if(!workers[i]['taskAssigned'] && !workers[i]['taskDuration']){ + self.postMessage(workers[i]); + break; + } + } +} \ No newline at end of file diff --git a/Supervisor portal/web-worker/worker.js b/Supervisor portal/web-worker/worker.js new file mode 100644 index 0000000..5b4f6e7 --- /dev/null +++ b/Supervisor portal/web-worker/worker.js @@ -0,0 +1,5 @@ +const ringWorker = new Worker('../web-worker/ring-the-bell.js'); + +ringWorker.addEventListener('message',function(e){ +alert('Name : ' +e.data.name + ' , '+'Mobile Number : '+e.data.mobileNumber) +},false); \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..baf0606 --- /dev/null +++ b/bower.json @@ -0,0 +1,78 @@ +{ + "name": "hc-ui", + "version": "0.0.0", + "dependencies": { + "angular": "1.4.4", + "json3": "~3.3.1", + "es5-shim": "~3.1.0", + "jquery-ui": "~1.11.2", + "bootstrap": "3.3.5", + "checklist-model": "~0.1.3", + "angular-route": "~1.3.0", + "angular-ui-slider": "https://github.com/vaibhavguptaIITD/ui-slider.git", + "jquery": "2.1.3", + "angular-bootstrap": "1.2.5", + "jquery.customSelect": "https://github.com/vaibhavguptaIITD/jquery.customSelect.git", + "multiple-select": "https://github.com/wenzhixin/multiple-select.git#12658641871b6c672ece4e2e4f0b5337faa17d2d", + "flexslider": "*", + "jquery-mousewheel": "~3.1.12", + "datatables": "1.10.12", + "datatable-fixedColumns": "3.2.1", + "angular-ui-utils": "3.0.0", + "angular-ui-utils-jq": "angular-ui-utils#jq-0.1.1", + "angular-animate": "1.4.4", + "blueimp-file-upload": "~9.8.0", + "awsaccordion": "https://github.com/hcentive/awsAccordion.git", + "jquery.numeric": "./libs/jquery.numeric/jquery.numeric.js", + "jquery.rotaterator": "./libs/jquery.rotaterator/jquery.rotaterator.js", + "hc-utils": "https://github.com/hcentive/hc-utils.git#1.0.15", + "jquery.maskedinput": "~1.4.1", + "angular-datatables": "0.5.0", + "angular-ui-router": "~0.2.11", + "moment": "~2.8.3", + "angular-sanitize": "~1.3.2", + "angular-input-modified": "2.0.1", + "ui-router-extras": "https://github.com/vaibhavguptaIITD/ui-router-extras.git#master", + "angular-messages": "~1.3.5", + "angular-translate": "~2.5.2", + "ng-idle": "https://github.com/vladgurovich/ng-idle.git#develop", + "angular-promise-tracker": "~2.1.0", + "angular-unsavedChanges": "https://github.com/kuldeepkeshwar/angular-unsavedChanges.git#develop", + "jquery-placeholder": "~2.1.1", + "bootstrap-switch": "~3.3.2", + "jquery.nicescroll": "https://github.com/abhi05b/jquery.nicescroll.git#master", + "angular-scroll": "~0.7.0", + "autoNumeric": "1.9.30", + "highcharts-release": "4.1.9", + "lodash": "~3.10.1", + "Read-More-Directive": "https://github.com/hcentive/Read-More-Directive.git", + "ng-tags-input": "3.0.0", + "angular-utf8-base64": "0.0.5", + "angular-vertilize" : "1.0.1", + "password-sheriff" : "./libs/password.sheriff/password.sheriff.js", + "he": "^1.1.0", + "full-calendar" : "./libs/full-calendar/fullCalendar.js", + "angular-ui-calendar" : "latest", + "tinymce": "~4.5.1", + "angular-ui-tinymce" : "0.0.18" + }, + "devDependencies": { + "angular-mocks": "~1.3.0", + "angular-scenario": "~1.2.0" + }, + "appPath": "app", + "resolutions": { + "angular": "1.4.4", + "jquery-ui": "1.11.4", + "angular-ui-validate": "1.2.2", + "ui-indeterminate": "1.0.0", + "ui-mask": "1.6.6", + "ui-event": "1.0.0", + "ui-scrollpoint": "2.0.1", + "ui-scroll": "1.3.2", + "ui-uploader": "1.1.3", + "datatables": ">=1.8.0", + "jquery": "2.1.3", + "moment": ">=2.5.0" + } +} diff --git a/javascript-concept-practice/JavaScript-ES6/JavaScript-ES6-Tutorial.js b/javascript-concept-practice/JavaScript-ES6/JavaScript-ES6-Tutorial.js new file mode 100644 index 0000000..3bc5408 --- /dev/null +++ b/javascript-concept-practice/JavaScript-ES6/JavaScript-ES6-Tutorial.js @@ -0,0 +1,211 @@ +/* + JavaScript ES6 Tutorial #3 - The Let Keyword +*/ +window.onload = function(){ + + var x = 10; + + if(x > 5){ + let x = 5; + console.log('Inside ',x) + } + console.log('Outside ',x) +} + +for(var i = 0;i < 4;i++){ + setTimeout(function(){ + console.log(i) + }) +} + +for(let i = 0;i < 4;i++){ + setTimeout(function(){ + console.log(i) + }) +} + + +/* + JavaScript ES6 Tutorial #4 - Default Parameters +*/ +function log(num = 10){ + console.log(num) +} + +log(); +log(20); + + + +/* + JavaScript ES6 Tutorial #5 - The Spread Operator +*/ + +var nums1 = [1,2,3],nums2 = [...nums1,4,5,6]; + +console.log(nums2) + +var addNums = function(a,b,c){ + console.log(a+b+c); +} + +addNums(...nums1); + + +/* + JavaScript ES6 Tutorial #8 - Object Literal Enhancements +*/ + +var name = 'Crystal'; +var belt = 'Black'; + +var ninja = { + name,belt, + chop(x){ + console.log('you chopped the enemy ',x,' times'); + }, + ['myString'] : 'myString', + get myNumber(){ + return this._myNumber + }, + set myNumber(x){ + this._myNumber = Number(x) + } +} + +console.log(ninja) +ninja.chop(10); + +console.log(ninja.myString); // => 'value 1' +ninja.myNumber = '15'; +console.log(ninja.myNumber); // => 15 + + +/* + JavaScript ES6 Tutorial #7 - New String Methods + + repeat + startsWith + endsWith + includes +*/ + +var str = 'goodbye'; + +console.log(str.repeat(2)); +console.log(str.startsWith('goo',0)); +console.log(str.endsWith('goodb',str.length - 2)); +console.log(str.includes('goo')); + + +/* + JavaScript ES6 Tutorial #9 - Arrow Functions +*/ +var ninjaGreeting = (name) => { + console.log('Hello, ',name); +} + +ninjaGreeting('JavaScript'); + + +var ninja = { + ['name'] : 'JavaScript', + chop(x){ + let that = this; + setTimeout(function(){ + console.log(that.name,' chopped the enemy.') + }) + } +} + +ninja.chop(); + +/* + JavaScript ES6 Tutorial #10 - Sets +*/ + +var names = new Set(); + +names.add('JavaScript').add('Java').add('Servers'); +console.log(names) +names.delete('Servers'); +console.log(names.size) +console.log(names.has('JavaScript')); +console.log(names) +names.clear(); +console.log(names) + +var listOfNames = [...names]; + +console.log(listOfNames) + +/* + JavaScript ES6 Tutorial #11 - Generators +*/ + +console.log('## JavaScript ES6 Tutorial #11 - Generators ##') + +function* gen(){ + yield console.log('A'); + yield console.log('B'); + yield console.log('C'); + console.log('All Done'); +} + +var myGen = gen(); +myGen.next(); +myGen.next(); +myGen.next(); +myGen.next(); + + +function* gen1(){ + yield 'A'; + yield 'B'; + yield 'C'; + return 'All Done'; +} + +var myGen1 = gen1(); +console.log(myGen1.next()); +console.log(myGen1.next()); +console.log(myGen1.next()); +console.log(myGen1.next()); + + +function *foo(x) { + var y = 2 * (yield (x + 1)); + var z = yield (y / 3); + return (x + y + z); +} + +var it = foo( 5 ); + +// note: not sending anything into `next()` here +console.log( it.next()); // { value:6, done:false } +console.log( it.next( 12 ) ); // { value:8, done:false } +console.log( it.next( 13 ) ); // { value:42, done:true } + +var anotherGenerator = function*(i){ + yield i + 1; + yield i + 2; + yield i + 3; +} + +var generator = function*(i){ + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + + +console.log(gen.next()) + +console.log(gen.next()) +console.log(gen.next()) +console.log(gen.next()) + +console.log(gen.next()) + diff --git a/javascript-concept-practice/Web-Workers/.DS_Store b/javascript-concept-practice/Web-Workers/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/javascript-concept-practice/Web-Workers/.DS_Store differ diff --git a/javascript-concept-practice/Web-Workers/Example-2-1-highPrime.js b/javascript-concept-practice/Web-Workers/Example-2-1-highPrime.js new file mode 100644 index 0000000..445c218 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-2-1-highPrime.js @@ -0,0 +1,16 @@ +//Example 2-1. highPrime.js, a brute force prime number calculator that //can be used as a Web Worker. +// +// A simple way to find prime numbers +// +var n = 1; +search: while (true) { + n += 1; + for (var i = 2; i <= Math.sqrt(n); i += 1) { + if (n % i == 0) { + continue search; + } + } + // found a prime! + postMessage(n); +} + diff --git a/javascript-concept-practice/Web-Workers/Example-2-2-highPrime.html b/javascript-concept-practice/Web-Workers/Example-2-2-highPrime.html new file mode 100644 index 0000000..dfc2ae9 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-2-2-highPrime.html @@ -0,0 +1,36 @@ + + + + Web Worker: The highest prime number + + + +

Web Worker: The highest prime number

+
The highest prime number discovered so far is: + +
+ + + + + diff --git a/javascript-concept-practice/Web-Workers/Example-3-1-tweet.html b/javascript-concept-practice/Web-Workers/Example-3-1-tweet.html new file mode 100644 index 0000000..2ab7af0 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-3-1-tweet.html @@ -0,0 +1,85 @@ + + + + + + Web Workers: Pull Tweets and save them in local storage + + + + + + +

Web Workers: Pull Tweets and save them in local storage

+
In this example we used a Web Worker in order to read tweets and save them using localStorage.
+ Let's have a look how it's working internally by opening Chrome DevTool on the 'Resources' tab.
+ Then, click on Local Storage and you will see the data of the tweets saved by tweet-id.
+ For more info: www.w3.org/TR/workers +
+
+
+
+ + + + diff --git a/javascript-concept-practice/Web-Workers/Example-3-2-tweet.js b/javascript-concept-practice/Web-Workers/Example-3-2-tweet.js new file mode 100644 index 0000000..badba4e --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-3-2-tweet.js @@ -0,0 +1,39 @@ +// +// Pull Tweets and send them so the parent page could save them in the localStorage +var connections = 0; // count active connections +var updateDelay = 30000; // = 30sec delay +var user = "greenido"; + +function getURL(user) { + return 'http://twitter.com/statuses/user_timeline/' + user + + '.json?count=' + 12 + '&callback=processTweets'; +} + +function readTweets() { + try { + var url = getURL(user); + postMessage("Worker Status: Attempting To Read Tweets for user - " + user + + " from: "+ url); + importScripts(url); + } + catch (e) { + postMessage("Worker Status: Error - " + e.message); + setTimeout(readTweets, updateDelay); + } +} + +function processTweets(data) { + var numTweets = data.length; + if (numTweets > 0) { + postMessage("Worker Status: New Tweets - " + numTweets); + postMessage(data); + } else { + postMessage("Worker Status: New Tweets - 0"); + } + setTimeout(readTweets, updateDelay); +} + +// +// start the party in the worker +// +readTweets(); diff --git a/javascript-concept-practice/Web-Workers/Example-3-3-highPrime.html b/javascript-concept-practice/Web-Workers/Example-3-3-highPrime.html new file mode 100644 index 0000000..2f39244 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-3-3-highPrime.html @@ -0,0 +1,91 @@ + + + + Web Worker: The highest prime number + + + + + + + +

Web Worker: The highest prime number

+
+

The prime numbers

+ +
+
+
+ + + +
+ + + + + diff --git a/javascript-concept-practice/Web-Workers/Example-3-4-highPrime.js b/javascript-concept-practice/Web-Workers/Example-3-4-highPrime.js new file mode 100644 index 0000000..252467f --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-3-4-highPrime.js @@ -0,0 +1,50 @@ + // + // A simple way to find prime numbers + // Please note the self refers to the worker context inside the worker. + self.addEventListener('message', function(e) { + var data = e.data; + var shouldRun = true; + + switch (data.cmd) { + case 'stop': + postMessage('Worker stopped the prime calculation (Al Gore is happy now) ' + + data.msg ); + shouldRun = false; + self.close(); // Terminates the worker. + break; + case 'start': + postMessage("Worker start working up to: " + data.upto + " (" + new Date()+ ")
"); + var numbers = isPrime(data.upto); + postMessage("Got back these numbers: "+ numbers + "
"); + break; + default: + postMessage('Dude, unknown cmd: ' + data.msg); + }; + }, false); + + // simple calculation of primes (not the most efficient - but works) + function isPrime(number) { + var numArray = ""; + var thisNumber; + var divisor; + var notPrime; + var thisNumber = 3; + while(thisNumber < number) { + var divisor = parseInt( thisNumber / 2); + var notPrime = 0; + while(divisor > 1) { + if(thisNumber % divisor == 0) { + notPrime = 1; + divisor = 0; + } + else { + divisor = divisor - 1; + } + } + if(notPrime == 0) { + numArray += (thisNumber + " "); + } + thisNumber = thisNumber + 1; + } + return numArray; + } diff --git a/javascript-concept-practice/Web-Workers/Example-4-3-inlineWorker.html b/javascript-concept-practice/Web-Workers/Example-4-3-inlineWorker.html new file mode 100644 index 0000000..828e8ac --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-4-3-inlineWorker.html @@ -0,0 +1,78 @@ + + + + + Web Worker: Inline worker example + + + + + + + +

Web Worker: Inline worker example

+ +
+ This is an example for inline worker that we creating 'on the fly' without the need to fetch + our JavaScript code of the worker from another file.
+ It is useful method to create a self-contained page without having to create separate worker file.
+ With the new BlobBuilder interface, you can "inline" your worker in the same HTML file as your + main logic by creating a BlobBuilder and appending the worker code as a string. +
+ +
+ + + + + + diff --git a/javascript-concept-practice/Web-Workers/Example-5-1-sharedWorker.html b/javascript-concept-practice/Web-Workers/Example-5-1-sharedWorker.html new file mode 100644 index 0000000..f372a74 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-5-1-sharedWorker.html @@ -0,0 +1,55 @@ + + + + + Shared Web Workers: Basic Example + + + +

Shared Web Workers: Basic Example

+
+ To create a shared Web Worker, you pass a JavaScript file name to a new instance of the SharedWorker object: +
var worker = new SharedWorker("jsworker.js"); +
+ Our web shared Web Worker will count the connection and return the data back to our listener in this page. You might want to open the Chrome DevTools in order to see the process. + +
+ + + + + + + diff --git a/javascript-concept-practice/Web-Workers/Example-5-2-sharedWorker.js b/javascript-concept-practice/Web-Workers/Example-5-2-sharedWorker.js new file mode 100644 index 0000000..d1c1268 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-5-2-sharedWorker.js @@ -0,0 +1,15 @@ +// This is the code for: 'sharedWorker1.js' file +// Shared workers that handle the connections and Welcome each new script + +var connections = 0; // count active connections +self.addEventListener("connect", function(e) { + var port = e.ports[0]; + connections++; + port.addEventListener("message", function(e) { + port.postMessage("Welcome to " + e.data + + " (On port #" + connections + ")"); + }, false); + // + //port.start(); +}, false); + diff --git a/javascript-concept-practice/Web-Workers/Example-5-3-b-sharedWorkerTweet .html b/javascript-concept-practice/Web-Workers/Example-5-3-b-sharedWorkerTweet .html new file mode 100644 index 0000000..516df87 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-5-3-b-sharedWorkerTweet .html @@ -0,0 +1,87 @@ + + + + + + Shared Web Workers: Twitter Example + + + + + + +

Shared Web Workers: inner iframe

+ +
+ Inner iframe that in the real world could be another tab/window of our web app. +
+
+
+ + + diff --git a/javascript-concept-practice/Web-Workers/Example-5-3-b-sharedWorkerTweet.html b/javascript-concept-practice/Web-Workers/Example-5-3-b-sharedWorkerTweet.html new file mode 100644 index 0000000..89cdf86 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-5-3-b-sharedWorkerTweet.html @@ -0,0 +1,98 @@ + + + + + + Shared Web Workers: Twitter Example + + + + + + +

Shared Web Workers: inner iframe

+ +
+ Inner iframe that in the real world could be another tab/window of our web app. +
+
+
+ + + diff --git a/javascript-concept-practice/Web-Workers/Example-5-3-sharedWorkerTweet.html b/javascript-concept-practice/Web-Workers/Example-5-3-sharedWorkerTweet.html new file mode 100644 index 0000000..33c785b --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-5-3-sharedWorkerTweet.html @@ -0,0 +1,103 @@ + + + + + + Shared Web Workers: Twitter Example + + + + + + +

Shared Web Workers: Twitter Example

+ +
In this example we used a Shared Worker in order to read tweets and then send them to the main UI thread.
You will see the messages that we are getting from the SharedWorker and then the tweets for @greenido user (yep, that's my user on Twitter)
+ Let’s have a look how it's working internally by opening Chrome DevTool on the Console tab. +
+
+
+
+ + > + + + + diff --git a/javascript-concept-practice/Web-Workers/Example-5-4-sharedWorkerTweet.js b/javascript-concept-practice/Web-Workers/Example-5-4-sharedWorkerTweet.js new file mode 100644 index 0000000..676ee34 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-5-4-sharedWorkerTweet.js @@ -0,0 +1,64 @@ +// +// Shared workers that handle the connections and Welcome each new script +// @author Ido Green +// @date 11/11/2011 +var connections = 0; // count active connections +var updateDelay = 60000; // = 1min delay +var port; +var user; + +function getURL(user) { + return 'http://twitter.com/statuses/user_timeline/' + user + + '.json?count=' + 12 + '&callback=processTweets'; +} + +function readTweets() { + try { + var url = getURL(user); + port.postMessage("Worker: Attempting To Read Tweets for user - " + user + + " from: "+ url); + importScripts(url); + } + catch (e) { + port.postMessage("Worker: Error - " + e.message); + setTimeout(readTweets, updateDelay); // lets do it every 2min + } +} + +function processTweets(data) { + if (data.length > 0) { + port.postMessage("Worker: New Tweets - " + data.length); + port.postMessage(data); + } else { + port.postMessage("Worker: New Tweets - 0"); + } + setTimeout(readTweets, updateDelay); +} + + + +// +// The controller that manage the actions/commands/connections +// +self.addEventListener("connect", function (e) { + port = e.ports[0]; + connections++; + port.addEventListener("message", function (e) { + var data = e.data; + switch (data.cmd) { + case 'start': + port.postMessage("Worker: Starting You are connection number:"+ connections); + user = data.user; + readTweets(); + break; + case 'stop': + port.postMessage("Worker: Stopping"); + self.close(); + break; + default: + port.postMessage("Worker: Error - Unknown Command"); + }; + + }, false); + port.start(); +}, false); diff --git a/javascript-concept-practice/Web-Workers/Example-6-1-BIG_data_worker.html b/javascript-concept-practice/Web-Workers/Example-6-1-BIG_data_worker.html new file mode 100644 index 0000000..723fec6 --- /dev/null +++ b/javascript-concept-practice/Web-Workers/Example-6-1-BIG_data_worker.html @@ -0,0 +1,171 @@ + + + + +Big Data In Worker Example + + + + +

Big Data (using transferable objects) In Web Worker Example

+
+ What is 'Big Data' and Web Worker got to do with each other? +
+ TODO... +

This demo illustrates transferable objects. + Transferable objects are objects that are not copied (e.g. using something like structured cloning). + Instead, the data is transferred from one context to another. The 'version' from the calling context is no longer available once transferred + to the new context. For example, when transferring an ArrayBuffer from main app to Worker, the + original ArrayBuffer from the main thread is cleared and no longer usable. + This vastly improves performance of sending data to a Worker.

+

This demo sends a 32MB ArrayBuffer to a worker and back using a prefixed version of postMessage() + that supports transferable objects: webkitPostMessage(). + If your browser doesn't support transferables, the sample falls back to old-skool structured cloning.

+

Support: Chrome Dev Channel 17+

+
+
+ +
+

Transferable Objects are lightning fast! The prefixed [window|worker].webkitPostMessage() + now supports sending an ArrayBuffer as a transferable.

+ + + + 

+

+
+
+
+
+
+
diff --git a/javascript-concept-practice/Web-Workers/Example-6-1-BIG_data_worker.js b/javascript-concept-practice/Web-Workers/Example-6-1-BIG_data_worker.js
new file mode 100644
index 0000000..848995f
--- /dev/null
+++ b/javascript-concept-practice/Web-Workers/Example-6-1-BIG_data_worker.js
@@ -0,0 +1,71 @@
+
+
+// Take care of vendor prefixes.
+self.postMessage = self.webkitPostMessage || self.postMessage;
+
+var ready = false;
+
+function time() {
+  var now = new Date();
+  var time = /(\d+:\d+:\d+)/.exec(now)[0] + ':';
+  for (var ms = String(now.getMilliseconds()), i = ms.length - 3; i < 0; ++i) {
+    time += '0';
+  }
+  return time + ms;
+}
+
+function source() {
+    return 'The Worker: ';
+}
+
+self.onmessage = function(e) {
+  if (!ready) {
+    initComplete();
+    return;
+  }
+  var USE_TRANSFERRABLE = true;
+  var dataLength;
+
+  var uInt8View = null;
+  if (e.data.copy !== undefined) {
+    // not a copy case
+    USE_TRANSFERRABLE = false;
+    uInt8View = new Uint8Array(e.data.ourArray);
+    dataLength = e.data.ourArray.byteLength;
+  } 
+  else {
+    uInt8View = new Uint8Array(e.data);
+    e.data.byteLength = e.data.byteLength;
+  }
+
+  // Here we are 'computing' something important on the data. 
+  // In our case - just play with %
+  for (var i=0; i < dataLength; i++ ) {
+    uInt8View[i] = uInt8View[i] % 2;
+  }
+  
+  if (USE_TRANSFERRABLE) {
+    self.postMessage(uInt8View.buffer, [uInt8View.buffer]);
+  } else {
+    self.postMessage(e.data.ourArray);
+  }
+};
+
+self.onerror = function(message) {
+  log('worker error');
+};
+
+function log(msg) {
+  var object = {
+    type: 'debug',
+    msg: source() + msg + ' [' + time() + ']'
+  };
+  self.postMessage(object);
+}
+
+function initComplete() {
+  ready = true;
+  log('READY!');
+}
+
+//setupArray();
\ No newline at end of file
diff --git a/javascript-concept-practice/Web-Workers/Example-pi.html b/javascript-concept-practice/Web-Workers/Example-pi.html
new file mode 100644
index 0000000..41b320b
--- /dev/null
+++ b/javascript-concept-practice/Web-Workers/Example-pi.html
@@ -0,0 +1,98 @@
+
+
+ 
+   Web Worker: The Run After Pi
+   
+   
+   
+ 
+ 
+ 
+   
+   
Web Worker: The Run After Π

+   

+    
The Calaulated Π

+     
+     

+   

+   

+     
+     
+
+     
+     
+   

+   
+
+ 
+
+
diff --git a/javascript-concept-practice/Web-Workers/Example-pi.js b/javascript-concept-practice/Web-Workers/Example-pi.js
new file mode 100644
index 0000000..f070bde
--- /dev/null
+++ b/javascript-concept-practice/Web-Workers/Example-pi.js
@@ -0,0 +1,33 @@
+ //
+ // A simple way to find prime numbers
+ // Please note the self refers to the worker context inside the worker.
+ self.addEventListener('message', function(e) {
+   var data = e.data;
+   var shouldRun = true;
+
+   switch (data.cmd) {
+     case 'stop':
+       postMessage('Worker stopped the Pi calculation ' + data.msg + "
");
+       shouldRun = false;
+       self.close(); // Terminates the worker.
+       break;
+     case 'start':
+       postMessage("Working on Π with: " + data.upto + " cycles
");
+       var numbers = calculatePi(data.upto);
+       postMessage("pi: "+ numbers + "
");
+       break;
+     default:
+       postMessage('Dude, unknown cmd: ' + data.msg);
+   };
+ }, false);
+
+ // simple calculation Pi base on Leibniz formula for Pi
+ function calculatePi(cycles) {
+  var pi = 0;
+  var n  = 1;
+  for (var i=0; i <= cycles; i++) {
+    pi = pi + (4/n) - (4 / (n+2));
+    n  = n  + 4;
+  }
+  return pi;
+ }
diff --git a/javascript-concept-practice/Web-Workers/README b/javascript-concept-practice/Web-Workers/README
new file mode 100644
index 0000000..a7882b7
--- /dev/null
+++ b/javascript-concept-practice/Web-Workers/README
@@ -0,0 +1,13 @@
+#Web Workers Examples
+======================
+[More inforamtion on my blog: http://greenido.wordpress.com/tag/webworker/
+
+##What is it?
+=============
+It's a set of examples I've created to show the power of web workers in short/simple way.
+Please feel free to let me know if you have some other good/simple examples and I'll be happy to add them to this collection.
+
+##Feedback
+==========
+In case you find some bug and/or have suggestions - please feel free to ping me on (http://plus.ly/greenido]) or at @greenido
+Be strong.
diff --git a/javascript-concept-practice/Web-Workers/README.md b/javascript-concept-practice/Web-Workers/README.md
new file mode 100644
index 0000000..5b1dd28
--- /dev/null
+++ b/javascript-concept-practice/Web-Workers/README.md
@@ -0,0 +1,16 @@
+Web Workers Examples
+======================
+Detailed inforamtion on my blog: http://greenido.wordpress.com/tag/webworker/
+
+What is it?
+=============
+It's a set of examples I've created to show the power of web workers in short/simple way.
+Please feel free to let me know if you have some other good/simple examples and I'll be happy to add them to this collection.
+
+Feedback
+==========
+In case you find some bug and/or have suggestions - please feel free to ping me on [+GreenIdo](http://plus.google.com/+greenido) or [@greenido](http://twitter.com/greenido)
+Be strong.
+
+
+[![Analytics](https://ga-beacon.appspot.com/UA-65622529-1/Web-Workers-Examples-/main)](https://github.com/igrigorik/ga-beacon)
diff --git a/javascript-concept-practice/Web-Workers/unresponsive-msg.html b/javascript-concept-practice/Web-Workers/unresponsive-msg.html
new file mode 100644
index 0000000..1de3a05
--- /dev/null
+++ b/javascript-concept-practice/Web-Workers/unresponsive-msg.html
@@ -0,0 +1,49 @@
+
+
+
+ Get the unresponsive message
+
+
+
+
+
+ 
Get the unresponsive message

+ 
The highest prime number discovered so far is: 
+	 
+ 

+ 
+
+ 
+
+ 
+
+
+
+
diff --git a/javascript-concept-practice/index.html b/javascript-concept-practice/index.html
index 1266aef..66b86e3 100644
--- a/javascript-concept-practice/index.html
+++ b/javascript-concept-practice/index.html
@@ -13,6 +13,9 @@
         
         
         
-        
+        
+        
+            
+            
     
 
\ No newline at end of file
diff --git a/javascript-concept-practice/javascript-advance/Web-Workers/doHandlerWork.js b/javascript-concept-practice/javascript-advance/Web-Workers/doHandlerWork.js
new file mode 100644
index 0000000..dd5ebf6
--- /dev/null
+++ b/javascript-concept-practice/javascript-advance/Web-Workers/doHandlerWork.js
@@ -0,0 +1,15 @@
+// This is the code for: 'sharedWorker1.js' file
+// Shared workers that handle the connections and Welcome each new script
+ 
+var connections = 0; // count active connections  
+self.addEventListener("connect", function(e) {  
+   var port = e.ports[0];  
+   connections++;  
+   port.addEventListener("message", function(e) {  
+       port.postMessage("Welcome to " + e.data +
+		" (On port #" + connections + ")");  
+   }, false); 
+   //  
+   port.start();  
+}, false);
+
diff --git a/javascript-concept-practice/javascript-advance/Web-Workers/doWork.js b/javascript-concept-practice/javascript-advance/Web-Workers/doWork.js
new file mode 100644
index 0000000..03f37f4
--- /dev/null
+++ b/javascript-concept-practice/javascript-advance/Web-Workers/doWork.js
@@ -0,0 +1,26 @@
+self.onmessage = function(e) {
+	var USE_TRANSFERRABLE = true;
+  	var dataLength;	
+
+  	var uInt8View = null;
+
+  	if (e.data.copy !== undefined) {
+   	 	USE_TRANSFERRABLE = false;
+    	uInt8View = new Uint8Array(e.data.ourArray);
+    	dataLength = e.data.ourArray.byteLength;
+  	} 
+  	else{
+    		uInt8View = new Uint8Array(e.data);
+    		e.data.byteLength = e.data.byteLength;
+  		}
+
+  		 for (var i=0; i < dataLength; i++ ) {
+		    uInt8View[i] = uInt8View[i] % 2;
+		  }
+  
+		  if (USE_TRANSFERRABLE) {
+		    self.postMessage(uInt8View.buffer, [uInt8View.buffer]);
+		  } else {
+		    self.postMessage(e.data.ourArray);
+		  }
+}
\ No newline at end of file
diff --git a/javascript-concept-practice/javascript-advance/Web-Workers/index.html b/javascript-concept-practice/javascript-advance/Web-Workers/index.html
new file mode 100644
index 0000000..875aad6
--- /dev/null
+++ b/javascript-concept-practice/javascript-advance/Web-Workers/index.html
@@ -0,0 +1,55 @@
+
+
+ 
+   
+   Shared Web Workers: Basic Example
+ 
+ 
+ 
+   
Shared Web Workers: Basic Example

+   

+     To create a shared Web Worker, you pass a JavaScript file name to a new instance of the SharedWorker object:
+     
var worker = new SharedWorker("jsworker.js");
+     

+     Our web shared Web Worker will count the connection and return the data back to our listener in this page. You might want to open the Chrome DevTools in order to see the process.
+     
+   

+   
+
+   
+
+   
+ 
+
diff --git a/javascript-concept-practice/javascript-advance/Web-Workers/sharedWorker.js b/javascript-concept-practice/javascript-advance/Web-Workers/sharedWorker.js
new file mode 100644
index 0000000..e69de29
diff --git a/javascript-concept-practice/javascript-advance/Web-Workers/worker.js b/javascript-concept-practice/javascript-advance/Web-Workers/worker.js
new file mode 100644
index 0000000..de6354d
--- /dev/null
+++ b/javascript-concept-practice/javascript-advance/Web-Workers/worker.js
@@ -0,0 +1,47 @@
+var worker = new Worker('doWork.js');
+
+// set some constants/vars
+var SIZE = 1024 * 1024 * 32; // 32MB for our data
+var arrayBuffer = null;
+var uInt8View = null;
+var originalLength = null;
+var startTime = 0;
+function seconds(since) {
+  return (new Date() - since) / 1000.0;
+}
+
+worker.onmessage = function(e){
+	if (!e.data.type) {
+      var elapsed = seconds(startTime);
+   	}
+   	var data = e.data;
+   	console.log('postMessage roundtrip took: ' + (elapsed * 1000) + ' ms')
+}
+
+function setupArray() {
+  arrayBuffer = new ArrayBuffer(SIZE);
+  uInt8View = new Uint8Array(arrayBuffer);
+  originalLength = uInt8View.length;
+  for (var i = 0; i < originalLength; ++i) {
+    uInt8View[i] = i;
+  }
+}
+
+var test = function(useIt){
+	 var useTransferrable = useIt;
+  	 setupArray();
+  	 if (useTransferrable) {
+    	console.log ("## Using Transferrable object method on size: " + uInt8View.length);
+    	worker.postMessage(uInt8View.buffer, [uInt8View.buffer]);
+	  } else {
+	    console.log ("## Using old COPY method on size: "+ uInt8View.length);
+	    worker.postMessage({'copy': 'true', 'ourArray': uInt8View.buffer}); //uInt8View.buffer
+	  }
+}
+
+//test(false);
+setTimeout(function(){
+	test(true);	
+})
+
+
diff --git a/javascript-concept-practice/javascript-advance/workers/doWork.js b/javascript-concept-practice/javascript-advance/workers/doWork.js
new file mode 100644
index 0000000..770f467
--- /dev/null
+++ b/javascript-concept-practice/javascript-advance/workers/doWork.js
@@ -0,0 +1,3 @@
+self.addEventListener('message',function(e){
+	self.postMessage(e.data);
+},false)
\ No newline at end of file
diff --git a/javascript-concept-practice/javascript-advance/workers/worker.js b/javascript-concept-practice/javascript-advance/workers/worker.js
new file mode 100644
index 0000000..8d61e77
--- /dev/null
+++ b/javascript-concept-practice/javascript-advance/workers/worker.js
@@ -0,0 +1,7 @@
+var worker = new Worker('javascript-advance/workers/doWork.js'); 
+
+worker.addEventListener('message',function(e){
+	console.log('Worker said : ',e.data);
+},false);
+
+worker.postMessage('Hello World');
\ No newline at end of file