Reorganizes the project with clean MVC structure

This commit is contained in:
2016-02-11 17:04:15 +01:00
parent 143274f369
commit e109e116f5
18 changed files with 187 additions and 219 deletions

View File

@@ -1,3 +1,3 @@
{
"directory": "static/bower_components"
"directory": "webapp/bower_components"
}

View File

@@ -18,3 +18,19 @@ gulp.task('test', function() {
gulp.task('autotest', function() {
return gulp.watch(['webapp/js/**/*.js','test/specs/*.js'], ['test']);
});
gulp.task('build', function() {
return gulp.src('./webapp/html/index.html')
.pipe(plugins.inject(
gulp.src(['./webapp/js/**/*.js']).pipe(plugins.angularFilesort()),
{
ignorePath: '/webapp'
}
))
.pipe(gulp.dest('./webapp'));
});
gulp.task('autobuild', function() {
return gulp.watch(['webapp/js/**/*.js','webapp/html/index.html'], ['build']);
});

View File

@@ -5,6 +5,8 @@
"devDependencies": {
"bower": "^1.7.7",
"gulp": "^3.9.1",
"gulp-angular-filesort": "^1.1.1",
"gulp-inject": "^3.0.0",
"gulp-jasmine": "^2.2.1",
"gulp-karma": "0.0.5",
"gulp-load-plugins": "^1.2.0",

View File

@@ -119,11 +119,14 @@ func (a *appData) buildRouter() http.Handler {
return
}
io.Copy(w, rc)
_, err = io.Copy(w, rc)
if err != nil {
panic(fmt.Sprintf("internal error: %s", err))
}
})))
dirs := []string{"css", "js", "img", "fonts", "html", "bower_components"}
dirs := []string{"css", "js", "img", "bower_components"}
for _, d := range dirs {
router.ServeFiles(path.Join("/", d, "/*filepath"), http.Dir(filepath.Join("webapp", d)))
}
@@ -137,7 +140,11 @@ func (a *appData) buildRouter() http.Handler {
}
defer closeOrPanic(f, filepath.Join("webapp", "index.html"))
io.Copy(w, f)
_, err = io.Copy(w, f)
if err != nil {
panic(fmt.Sprintf("internal error: %s", err))
}
})))
return router

20
webapp/directives.js Normal file
View File

@@ -0,0 +1,20 @@
var directives = angular.module('satbd.satellite.bar.directives')
directives.directive('album', function() {
return {
scope: {
id: '@album-id'
}
templateUrl: 'js/directives/album.html',
restrict: 'E',
};
});
directives.controller('albumCtrl', function($scope,$html) {
$scope.init = function() {
$http.get('/api/albums/'+ $scope.id)
.success(function(data) {
$scope.album = data;
});
};
});

56
webapp/html/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="icon" href="https://satellite.bar/images/sat.ico" />
<link href="/css/satbd.sateliite.bar.css" rel="stylesheet" />
<title>satbd: explorez la betheque de sat</title>
</head>
<body ng-app="satbd.satellite.bar">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" ng-controller="NavBarCtrl">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img alt="brand" src="//satellite.bar/images/satellitenuit.png"/></a>
</div>
<div id="navbar" class="navbar-collapse" uib-collapse="isCollapsed">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/recents')}"><a href="/#/recents" >Récents</a></li>
<li ng-class="{active: isActive('/series')}"><a href="/#/series">Par Séries</a></li>
<li ng-class="{active: isActive('/authors')}"><a href="/#/authors">Par Autheurs</a></li>
</ul>
<form class="navbar-form navbar-right" role="search" ng-submit="search(searchTerms)">
<div class="input-group">
<input type="text" class="form-control" ng-model="searchTerms" placeholder="Chercher ...">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
<button type="button" class="btn btn-default" ng-click="openModal('lg')">
<span class="glyphicon glyphicon-question-sign" aria-label="help"></span>
</button>
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid" ng-view>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>

View File

@@ -1,96 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="icon" href="https://satellite.bar/images/sat.ico" />
<link href="/css/satbd.sateliite.bar.css" rel="stylesheet" />
<title>satbd: explorez la betheque de sat</title>
</head>
<body ng-app="satbd.satellite.bar" ng-controller="GlobalCtrl" >
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" ng-controller="NavbarCollapseCtrl">
<script type="text/ng-template" id="help.html">
<div class="modal-header">
<h3 class="modal-title">Aide</h3>
</div>
<div class="modal-body">
<p> Bientôt disponible </p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>
</script>
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img alt="brand" src="//satellite.bar/images/satellitenuit.png"/></a>
</div>
<div id="navbar" class="navbar-collapse" uib-collapse="isCollapsed">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('recents')}"><a ng-click="recents()" >Récents</a></li>
<li ng-class="{active: isActive('collections')}"><a ng-click="collections()">Par Collection</a></li>
<li ng-class="{active: isActive('authors')}"><a ng-click="authors()">Par Auteurs</a></li>
</ul>
<form class="navbar-form navbar-right" role="search" ng-submit="search()">
<div class="input-group">
<input type="text" class="form-control" ng-model="searchQuery" placeholder="Chercher ...">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
<button type="button" class="btn btn-default" ng-click="openModal('lg')">
<span class="glyphicon glyphicon-question-sign" aria-label="help"></span>
</button>
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid" >
<!-- search results -->
<div class="search row" ng-controller="SearchCtrl" ng-show="showResults" ng-cloak>
<h3> {{searchResults.total_hits}} résultats en {{searchResults.took/1000000000}} secondes </h3>
<div class="col-xs-12" ng-repeat="hit in searchResults.hits">
<h3> {{hit.fields["série"]}} - {{hit.fields.titre}} </h3>
<ul>
<li><label>Référence:</label>{{hit.fields.ref}}</li>
<li><label>Description:</label>{{hit.fields.description}}</li>
<li><label>Collection:</label> {{hit.fields.collection}}</li>
<li><label>Note:</label> {{hit.fields.Note}} / 5.0 </li>
</ul>
<ul>
<li ng-repeat="(name,fragments) in hit.fragments" ><label>{{name}}</label>
<ul>
<li ng-repeat="f in fragments" ng-bind-html="f"></li>
</ul>
</li>
</div>
<!-- <p> <label>JSON:</label> {{searchResultsJSON}} </p>-->
</div>
</div>
<!-- Recent Albums -->
<div class="recent row" ng-controller="RecentCtrl" ng-cloak>
<div class="album col-xs-6 col-sm-4 col-md-3 col-lg-2" ng-repeat="id in albumIDs" ng-controller="RecentAlbumCtrl" ng-init="init_by_id(id)">
<img class="cover img-responsive img-rounded center-block" ng-src="{{album.CoverURL}}">
</div>
</div>
</div>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/satbd.satellite.bar.js"></script>
</body>
</html>

17
webapp/js/controllers.js Normal file
View File

@@ -0,0 +1,17 @@
'use strict';
var controllers = angular.module('satbd.satellite.bar.controllers',[
'ui.bootstrap',
'ngAnimate'
]);
controllers.controller('NavBarCtrl',function($scope,$location) {
$scope.isCollapsed = true;
$scope.isActive = function(loc) {
return loc === $location.path();
};
$scope.search = function(searchTerms) {
$location.url('/search?q='+ encodeURIComponent(searchTerms));
}
});

View File

@@ -1,121 +1,12 @@
angular.module('satbd.satellite.bar', ['ui.bootstrap','ngAnimate','ngSanitize']);
angular.module('satbd.satellite.bar').controller('GlobalCtrl', function($scope,$log) {
$scope.location = '';
$scope.isActive = function(location) {
return $scope.location === location
};
$scope.recents = function() {
$scope.location='recents';
$scope.$broadcast('displayRecents')
};
$scope.collections = function() {
$scope.location='collections';
$scope.$broadcast('displayCollections')
};
$scope.authors = function() {
$scope.location='authors';
$scope.$broadcast('displayAuthors')
};
$scope.$on('onSearchQuery', function(event,query) {
if (query.length > 0) {
$scope.location='search';
$scope.$broadcast('displaySearch', query)
}
});
$scope.$on('recentsReady', function(event) {
$scope.recents();
});
'use strict';
});
angular.module('satbd.satellite.bar').controller('NavbarCollapseCtrl', function ($scope, $uibModal) {
$scope.isCollapsed = true;
$scope.openModal = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'help.html',
controller: 'HelpInstanceCtrl',
size: size,
keyboard: true,
});
};
$scope.searchQuery = '';
$scope.search = function() {
$scope.$emit('onSearchQuery',$scope.searchQuery);
};
});
angular.module('satbd.satellite.bar').controller('HelpInstanceCtrl', function($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close('');
};
});
angular.module('satbd.satellite.bar').controller('RecentCtrl', function($scope, $http,$log) {
$scope.albumIDs = [ ];
$scope.clear = function(event) { $scope.albumIDs = [] };
$scope.$on('displayAuthors', $scope.clear);
$scope.$on('displayCollections', $scope.clear);
$scope.$on('displaySearch', $scope.clear);
$scope.$on('displayRecents', function(event) {
$scope.clear();
$log.info('fetching recent albums');
$http.get('/api/recents').success(function(data){
for (var i = 0; i < 10; i++) {
$scope.albumIDs.push(data[i]);
}
});
});
$scope.$emit('recentsReady')
});
angular.module('satbd.satellite.bar').controller('RecentAlbumCtrl', function($scope, $http) {
$scope.init_by_id = function(id) {
$http.get('api/albums/'+ id).success(function (data) {
$scope.album = data;
});
};
});
angular.module('satbd.satellite.bar').controller('SearchCtrl', function($scope, $http, $log) {
$scope.showResults = false
$scope.searchResults = null;
$scope.searchResultsJSON = '';
$scope.clear = function () {
$scope.showResults = false;
$scope.searchResults = null;
$scope.searchResultsJSON = '';
};
$scope.$on('displayAuthors', $scope.clear);
$scope.$on('displayCollections', $scope.clear);
$scope.$on('displayRecents', $scope.clear);
$scope.$on('displaySearch', function(event, query) {
$log.info("Submitting query " + query);
$http.post('/api/search', {
"size": 20,
"explain": false,
"highlight":{},
"fields": ["série", "collection","titre","éditeur","ref","description","Note"],
"query": {
"query": query,
}
}).success(function(data) {
$scope.searchResults = data;
$scope.showResults = true;
}).error(function(data, code) {
$log.error("got " + code + " data: " + data);
$scope.showResults = true;
});
});
angular.module('satbd.satellite.bar',[
'ngRoute',
'satbd.satellite.bar.controllers',
'satbd.satellite.bar.views.recents',
'satbd.satellite.bar.views.series',
'satbd.satellite.bar.views.authors',
'satbd.satellite.bar.views.search'
]).config(function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/recents'});
});

View File

@@ -0,0 +1 @@
<h1>Par autheurs </h1>

View File

@@ -0,0 +1,9 @@
'use strict';
angular.module('satbd.satellite.bar.views.authors',[
'ngRoute'
]).config(function($routeProvider) {
$routeProvider.when('/authors', {
templateUrl: 'js/views/authors/authors.html',
});
})

View File

@@ -0,0 +1 @@
<h1> Albums Récents </h1>

View File

@@ -0,0 +1,20 @@
'use strict';
angular.module('satbd.satellite.bar.views.recents',[
'ngRoute'
]).config(function($routeProvider) {
$routeProvider.when('/recents', {
templateUrl: 'js/views/recents/recents.html',
controller: 'RecentsCtrl'
});
}).controller('RecentsCtrl', function( $scope, $http, $log) {
$scope.albumIDs = [];
$http.get('/api/recents')
.success(function(data) {
for (var i=0; i < 10; i++) {
$scope.albumIDs.push(data[i]);
}
}).error(function(err){
$log.error(err);
});
});

View File

@@ -0,0 +1,2 @@
<h1> Votre recherche de '{{ terms }}' n'a pas abouti</h1>
<h3>C'est toujours pas implémenté, couillon</h3>

View File

@@ -0,0 +1,12 @@
'use strict';
angular.module('satbd.satellite.bar.views.search',[
'ngRoute'
]).config(function($routeProvider) {
$routeProvider.when('/search', {
templateUrl: 'js/views/search/search.html',
controller: 'SearchCtrl'
});
}).controller('SearchCtrl', function($scope,$routeParams) {
$scope.terms=$routeParams.q;
});

View File

@@ -0,0 +1 @@
<h1>Par Séries</h1>

View File

@@ -0,0 +1,9 @@
'use strict';
angular.module('satbd.satellite.bar.views.series',[
'ngRoute'
]).config(function($routeProvider) {
$routeProvider.when('/series', {
templateUrl: 'js/views/series/series.html'
});
});