Elgato_dark/zeppelin
1
0
Fork 0
mirror of https://github.com/apache/zeppelin synced 2026-05-24 09:38:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Refactor Navbar controller to controller pattern + data factory

Browse source
This commit is contained in:
Damien Corneau 2015-06-11 15:39:06 +09:00
parent 5a40c4c6b0
commit b21cc69267
9 changed files with 202 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
zeppelin-web/src/app/app.controller.js Normal file
View file

@ -0,0 +1,115 @@
/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
/**
* @ngdoc function
* @name zeppelinWebApp.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the zeppelinWebApp
*
* @author anthonycorbacho
*/
angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, WebSocket, $rootScope, $window) {
$rootScope.compiledScope = $scope.$new(true, $rootScope);
$scope.WebSocketWaitingList = [];
$scope.connected = false;
$scope.looknfeel = 'default';
var init = function() {
$scope.asIframe = (($window.location.href.indexOf('asIframe') > -1) ? true : false);
};
init();
/**
* Web socket
*/
WebSocket.onopen(function() {
console.log('Websocket created');
$scope.connected = true;
if ($scope.WebSocketWaitingList.length > 0) {
for (var o in $scope.WebSocketWaitingList) {
WebSocket.send(JSON.stringify($scope.WebSocketWaitingList[o]));
}
}
});
WebSocket.onmessage(function(event) {
var payload;
if (event.data) {
payload = angular.fromJson(event.data);
}
console.log('Receive << %o, %o, %o', payload.op, payload, $scope);
var op = payload.op;
var data = payload.data;
if (op === 'NOTE') {
$rootScope.$broadcast('setNoteContent', data.note);
} else if (op === 'NOTES_INFO') {
$rootScope.$broadcast('setNoteMenu', data.notes);
} else if (op === 'PARAGRAPH') {
$scope.$broadcast('updateParagraph', data);
} else if (op === 'PROGRESS') {
$rootScope.$broadcast('updateProgress', data);
} else if (op === 'COMPLETION_LIST') {
$rootScope.$broadcast('completionList', data);
} else if (op === 'ANGULAR_OBJECT_UPDATE') {
$rootScope.$broadcast('angularObjectUpdate', data);
}
});
WebSocket.onerror(function(event) {
console.log('error message: ', event);
$scope.connected = false;
});
WebSocket.onclose(function(event) {
console.log('close message: ', event);
$scope.connected = false;
});
/** Send info to the websocket server */
var send = function(data) {
if (WebSocket.currentState() !== 'OPEN') {
$scope.WebSocketWaitingList.push(data);
} else {
console.log('Send >> %o, %o', data.op, data);
WebSocket.send(JSON.stringify(data));
}
};
/** get the childs event and sebd to the websocket server */
$rootScope.$on('sendNewEvent', function(event, data) {
if (!event.defaultPrevented) {
send(data);
event.preventDefault();
}
});
$rootScope.$on('setIframe', function(event, data) {
if (!event.defaultPrevented) {
$scope.asIframe = data;
event.preventDefault();
}
});
$rootScope.$on('setLookAndFeel', function(event, data) {
if (!event.defaultPrevented && data && data !== '') {
$scope.looknfeel = data;
event.preventDefault();
}
});
});

3
zeppelin-web/src/app/app.js
View file

@ -110,7 +110,8 @@ angular
$routeProvider
.when('/', {
templateUrl: 'app/home/home.html'
templateUrl: 'app/home/home.html',
controller: 'HomeCtrl'
})
.when('/notebook/:noteId', {
templateUrl: 'app/notebook/notebook.html',

110
zeppelin-web/src/app/home/home.controller.js
View file

@ -13,108 +13,10 @@
*/
'use strict';
/**
* @ngdoc function
* @name zeppelinWebApp.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the zeppelinWebApp
*
* @author anthonycorbacho
*/
angular.module('zeppelinWebApp')
.controller('MainCtrl', function($scope, WebSocket, $rootScope, $window) {
$rootScope.compiledScope = $scope.$new(true, $rootScope);
$scope.WebSocketWaitingList = [];
$scope.connected = false;
$scope.looknfeel = 'default';
var init = function() {
$scope.asIframe = (($window.location.href.indexOf('asIframe') > -1) ? true : false);
};
init();
/**
* Web socket
*/
WebSocket.onopen(function() {
console.log('Websocket created');
$scope.connected = true;
if ($scope.WebSocketWaitingList.length > 0) {
for (var o in $scope.WebSocketWaitingList) {
WebSocket.send(JSON.stringify($scope.WebSocketWaitingList[o]));
}
}
setInterval(function(){
$rootScope.$emit('sendNewEvent', {op: 'PING'})
}
,60000);
});
WebSocket.onmessage(function(event) {
var payload;
if (event.data) {
payload = angular.fromJson(event.data);
}
console.log('Receive << %o, %o, %o', payload.op, payload, $scope);
var op = payload.op;
var data = payload.data;
if (op === 'NOTE') {
$scope.$broadcast('setNoteContent', data.note);
} else if (op === 'NOTES_INFO') {
$scope.$broadcast('setNoteMenu', data.notes);
} else if (op === 'PARAGRAPH') {
$scope.$broadcast('updateParagraph', data);
} else if (op === 'PROGRESS') {
$scope.$broadcast('updateProgress', data);
} else if (op === 'COMPLETION_LIST') {
$scope.$broadcast('completionList', data);
} else if (op === 'ANGULAR_OBJECT_UPDATE') {
$scope.$broadcast('angularObjectUpdate', data);
}
});
WebSocket.onerror(function(event) {
console.log('error message: ', event);
$scope.connected = false;
});
WebSocket.onclose(function(event) {
console.log('close message: ', event);
$scope.connected = false;
});
/** Send info to the websocket server */
var send = function(data) {
if (WebSocket.currentState() !== 'OPEN') {
$scope.WebSocketWaitingList.push(data);
} else {
console.log('Send >> %o, %o', data.op, data);
WebSocket.send(JSON.stringify(data));
}
};
/** get the childs event and sebd to the websocket server */
$rootScope.$on('sendNewEvent', function(event, data) {
if (!event.defaultPrevented) {
send(data);
event.preventDefault();
}
});
$rootScope.$on('setIframe', function(event, data) {
if (!event.defaultPrevented) {
$scope.asIframe = data;
event.preventDefault();
}
});
$rootScope.$on('setLookAndFeel', function(event, data) {
if (!event.defaultPrevented && data && data !== '') {
$scope.looknfeel = data;
event.preventDefault();
}
});
angular.module('zeppelinWebApp').controller('HomeCtrl', function($scope, notebookListDataFactory, websocketMsgSrv) {
var vm = this;
vm.notes = notebookListDataFactory;
vm.websocketMsgSrv = websocketMsgSrv;
});

11
zeppelin-web/src/app/home/home.html
View file

@ -3,7 +3,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
@ -12,7 +12,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="box width-full home">
<div class="box width-full home" ng-controller="HomeCtrl as home">
<div class="zeppelin">
<div class="zeppelin2"></div>
</div>
@ -26,10 +26,11 @@ limitations under the License.
<div class="col-md-4">
<h4>Notebook</h4>
<div ng-controller="NavCtrl">
<h5><a href="javascript:void(0);" ng-click="createNewNote()" style="text-decoration: none;"><i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
<div>
<h5><a href="javascript:void(0);" ng-click="home.websocketMsgSrv.createNotebook()" style="text-decoration: none;">
<i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
<ul style="list-style-type: none;">
<li ng-repeat="note in notes track by $index"><i style="font-size: 10px;" class="icon-doc"></i>
<li ng-repeat="note in home.notes.list track by $index"><i style="font-size: 10px;" class="icon-doc"></i>
<a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
</li>
</ul>

37
zeppelin-web/src/components/navbar/navbar.controller.js
View file

@ -25,32 +25,33 @@
* @author anthonycorbacho
*/
angular.module('zeppelinWebApp').controller('NavCtrl', function($scope, $rootScope, $routeParams) {
angular.module('zeppelinWebApp').controller('NavCtrl', function($scope, $rootScope, $routeParams, notebookListDataFactory, websocketMsgSrv) {
/** Current list of notes (ids) */
$scope.notes = [];
var vm = this;
vm.notes = notebookListDataFactory;
vm.websocketMsgSrv = websocketMsgSrv;
$('#notebook-list').perfectScrollbar({suppressScrollX: true});
/** Set the new menu */
$scope.$on('setNoteMenu', function(event, notes) {
$scope.notes = notes;
notebookListDataFactory.setNotes(notes);
});
var loadNotes = function() {
$rootScope.$emit('sendNewEvent', {op: 'LIST_NOTES'});
};
loadNotes();
function loadNotes() {
$rootScope.$broadcast('sendNewEvent', {op: 'LIST_NOTES'});
}
/** Create a new note */
$scope.createNewNote = function() {
$rootScope.$emit('sendNewEvent', {op: 'NEW_NOTE'});
};
/** Check if the note url is equal to the current note */
$scope.isActive = function(noteId) {
function isActive(noteId) {
if ($routeParams.noteId === noteId) {
return true;
}
return false;
};
}
vm.loadNotes = loadNotes;
vm.isActive = isActive;
vm.loadNotes();
});

6
zeppelin-web/src/components/navbar/navbar.html
View file

@ -11,15 +11,15 @@
</a>
</div>
<div class="collapse navbar-collapse" ng-controller="NavCtrl">
<div class="collapse navbar-collapse" ng-controller="NavCtrl as navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Notebook <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0);" ng-click="createNewNote()"><i class="fa fa-plus"></i> Create new note</a></li>
<li><a href="javascript:void(0);" ng-click="navbar.websocketMsgSrv.createNotebook()"><i class="fa fa-plus"></i> Create new note</a></li>
<li class="divider"></li>
<div id="notebook-list" class="scrollbar-container">
<li ng-repeat="note in notes track by $index" ng-class="{'active' : isActive(note.id)}">
<li ng-repeat="note in navbar.notes.list track by $index" ng-class="{'active' : isActive(note.id)}">
<a href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
</li>
</div>

26
zeppelin-web/src/components/notebookListDataFactory/notebookList.datafactory.js Normal file
View file

@ -0,0 +1,26 @@
/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
angular.module('zeppelinWebApp').factory('notebookListDataFactory', function() {
var notes = {};
notes.list = [];
notes.setNotes = function(notesList) {
notes.list = angular.copy(notesList);
};
return notes;
});

22
zeppelin-web/src/components/websocketEvents/websocketMsg.service.js Normal file
View file

@ -0,0 +1,22 @@
/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
angular.module('zeppelinWebApp').service('websocketMsgSrv', function($rootScope) {
this.createNotebook = function() {
$rootScope.$broadcast('sendNewEvent', {op: 'NEW_NOTE'});
};
});

3
zeppelin-web/src/index.html
View file

@ -102,6 +102,7 @@ limitations under the License.
<!-- endbuild -->
<!-- build:js({.tmp,src}) scripts/scripts.js -->
<script src="app/app.js"></script>
<script src="app/app.controller.js"></script>
<script src="app/home/home.controller.js"></script>
<script src="app/notebook/notebook.controller.js"></script>
<script src="app/interpreter/interpreter.controller.js"></script>
@ -112,6 +113,8 @@ limitations under the License.
<script src="components/ngenter/ngenter.directive.js"></script>
<script src="components/dropdowninput/dropdowninput.directive.js"></script>
<script src="components/resizable/resizable.directive.js"></script>
<script src="components/websocketEvents/websocketMsg.service.js"></script>
<script src="components/notebookListDataFactory/notebookList.datafactory.js"></script>
<!-- endbuild -->
</body>
</html>