From b8be0b919308be2b3ae48ef7cbc75b2e895739a9 Mon Sep 17 00:00:00 2001
From: Jaden Diefenbaugh <blakcap@users.noreply.github.com>
Date: Fri, 10 Feb 2017 12:31:19 +0100
Subject: [PATCH] add basic UI & frontend logic/state for exp groups
---
.../app/controllers/groupsController.js | 20 +++++++
.../app/controllers/reportController.js | 8 ++-
.../reports/app/services/reportService.js | 13 +++--
.../templates/reports/panels/viewer.html | 52 ++++++++++++++++++-
4 files changed, 84 insertions(+), 9 deletions(-)
diff --git a/beat/web/reports/static/reports/app/controllers/groupsController.js b/beat/web/reports/static/reports/app/controllers/groupsController.js
index e86abf8a5..ced3af8c9 100644
--- a/beat/web/reports/static/reports/app/controllers/groupsController.js
+++ b/beat/web/reports/static/reports/app/controllers/groupsController.js
@@ -23,5 +23,25 @@
angular.module('reportApp').controller('GroupsController', ['$scope', 'ReportService', function ($scope, ReportService){
let vm = this;
+ // testing stuffs
+ ReportService.createGroup('great');
+ ReportService.addExperimentToGroup('exp1', 'great');
vm.test = 'test';
+
+ // ReportService stuff to be used directly in ui
+ vm.groups = ReportService.groups;
+ vm.removeExperimentFromGroup = ReportService.removeExperimentFromGroup;
+ vm.addExperimentToGroup = ReportService.addExperimentToGroup;
+ vm.createGroup = function(name) {
+ ReportService.createGroup(name);
+ vm.newGroupName = '';
+ }
+ vm.deleteGroup = ReportService.deleteGroup;
+
+ // createGroup input val
+ vm.newGroupName = '';
+ // report's experiments
+ vm.experiments = $scope.report_experiments;
+
+ console.log(vm);
}]);
diff --git a/beat/web/reports/static/reports/app/controllers/reportController.js b/beat/web/reports/static/reports/app/controllers/reportController.js
index 092c25aef..9b2d12c9f 100644
--- a/beat/web/reports/static/reports/app/controllers/reportController.js
+++ b/beat/web/reports/static/reports/app/controllers/reportController.js
@@ -130,7 +130,9 @@ angular.module('reportApp').controller('reportController',['$scope', 'reportFact
function getExperimentDataReportNumber(report_number){
experimentFactory.getAllExperimentResults($scope.url_prefix, report_number)
.then(function (experiments){
- $scope.report_experiments = experiments;
+ Object.entries(experiments).forEach(([name, exp]) => {
+ $scope.report_experiments[name] = exp;
+ });
$scope.report.all_experiments = experiments;
var experiment_aliases = Object.keys(experiments);
for(var i = 0; i < experiment_aliases.length; i++){
@@ -173,7 +175,9 @@ angular.module('reportApp').controller('reportController',['$scope', 'reportFact
function getExperimentDataForAuthor(all_experiments){
experimentFactory.getAllExperimentResultsForAuthor($scope.user, $scope.report_id, $scope.url_prefix)
.then(function (experiments){
- $scope.report_experiments = experiments;
+ Object.entries(experiments).forEach(([name, exp]) => {
+ $scope.report_experiments[name] = exp;
+ });
$scope.report.all_experiments = experiments;
var experiment_aliases = Object.keys(experiments);
for(var i = 0; i < experiment_aliases.length; i++){
diff --git a/beat/web/reports/static/reports/app/services/reportService.js b/beat/web/reports/static/reports/app/services/reportService.js
index cf60718d8..cbf7a0ac7 100644
--- a/beat/web/reports/static/reports/app/services/reportService.js
+++ b/beat/web/reports/static/reports/app/services/reportService.js
@@ -36,7 +36,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
// has a name and a list of experiments that belong to it
class Group {
constructor (name) {
- this.name = name;
+ this._name = name;
this.experimentNames = new Set();
}
@@ -47,7 +47,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
// get the group name
get name () {
- return this.name;
+ return this._name;
}
// check if an exp is in this group
@@ -67,7 +67,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
};
// gets groups
- reportServiceInstance.groups = () => groupData.map(g => g.name);
+ reportServiceInstance.groups = groupData;
// create a new group for the report
// returns false if it already exists
@@ -87,7 +87,10 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
// delete a group
reportServiceInstance.deleteGroup = (name) => {
- groupData = groupData.filter(g => g.name !== name);
+ let idx = groupData.indexOf(groupData.find(g => g.name === name));
+ if (idx > -1) {
+ groupData.splice(idx, 1);
+ }
};
// fetch group info from the api
@@ -129,7 +132,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
// helper to assert that a group exists
function checkForGroup (groupName) {
- if(!reportServiceInstance.groups().includes(groupName)){
+ if(!groupData.find(g => g.name === groupName)){
throw new Error(`Could not find group "${JSON.stringify(groupName)}"`);
}
}
diff --git a/beat/web/reports/templates/reports/panels/viewer.html b/beat/web/reports/templates/reports/panels/viewer.html
index eb2f33919..334a62278 100644
--- a/beat/web/reports/templates/reports/panels/viewer.html
+++ b/beat/web/reports/templates/reports/panels/viewer.html
@@ -64,8 +64,56 @@
class="panel-collapse collapse{% if not owner %} in{% endif %}"
role="tabpanel"
aria-labelledby="groups-heading">
- <div class="panel-body">
- {$ groups.test $}
+ <div class="panel-body panel-group">
+ <div class='row'>
+ <div class='col-lg-6'>
+ <div class="input-group">
+ <span class="input-group-btn">
+ <button ng-click='groups.createGroup(groups.newGroupName)' class="btn btn-default" type="button">Create</button>
+ </span>
+ <input ng-model='groups.newGroupName' type="text" class="form-control" placeholder="Group name...">
+ </div>
+ </div>
+ </div>
+ <div ng-repeat='group in groups.groups' class='panel panel-default'>
+ <div class='panel-heading'>
+ <h4 class='panel-title'>{$ group.name $}</h4>
+ </div>
+ <div class='panel-body'>
+ <button
+ class='btn btn-danger'
+ ng-click='groups.deleteGroup(group.name)'>
+ Delete Group
+ </button>
+ <div class="dropdown pull-left">
+ <button
+ class="btn btn-default dropdown-toggle"
+ type="button"
+ id="dropdownMenu1"
+ data-toggle="dropdown"
+ aria-haspopup="true"
+ aria-expanded="true">
+ Add Experiment To Group
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+ <li ng-click='groups.addExperimentToGroup(expName, group.name)' ng-repeat='(expName, exp) in groups.experiments'>
+ <a href='#'>{$ expName $}</a>
+ </li>
+ </ul>
+ </div>
+ <ul class='list-group' style='margin-top: 1em'>
+ <li class='list-group-item' ng-repeat='expName in group.experiments'>
+ {$ expName $}
+ <button
+ class='btn btn-danger'
+ ng-click='groups.removeExperimentFromGroup(expName, group.name)'>
+ Remove Experiment
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
</div>
</div>
--
GitLab