mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-01-23 02:36:05 +00:00
most basic version of daily planner added
This commit is contained in:
Johannes Millan
parent
fca96d641e
commit
905d07c417
8 changed files with 145 additions and 27 deletions
|
|
@ -55,6 +55,9 @@ TODO configure more restrictive Content-Security-Policy
|
|||
<script src="bower_components/angular-aria/angular-aria.js"></script>
|
||||
<script src="bower_components/angular-resource/angular-resource.js"></script>
|
||||
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
|
||||
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
|
||||
<script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
|
||||
<script src="bower_components/ngstorage/ngStorage.js"></script>
|
||||
<!-- endbower -->
|
||||
<!-- endbuild -->
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
* Main module of the application.
|
||||
*/
|
||||
|
||||
(function () {
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
|
|
@ -16,12 +16,7 @@
|
|||
'ngAria',
|
||||
'ngResource',
|
||||
'ui.router',
|
||||
'LocalStorageModule'
|
||||
])
|
||||
.config(initLocalStorage);
|
||||
|
||||
function initLocalStorage(localStorageServiceProvider) {
|
||||
localStorageServiceProvider
|
||||
.setPrefix('superProductivity');
|
||||
}
|
||||
'ngStorage',
|
||||
'dndLists'
|
||||
]);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,3 +1,38 @@
|
|||
daily-planner {
|
||||
display: block;
|
||||
|
||||
.task-list {
|
||||
min-height: 100px;
|
||||
list-style: none;
|
||||
|
||||
// add a little padding to top and bottom, to make drag dropping easier
|
||||
padding: 20px 0;
|
||||
|
||||
.dndDraggingSource {
|
||||
display: none;
|
||||
}
|
||||
.dndPlaceholder {
|
||||
background-color: #ddd;
|
||||
display: block;
|
||||
min-height: 42px;
|
||||
}
|
||||
&__backlog {
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
}
|
||||
|
||||
.task {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
&.is-selected {
|
||||
background-color: #dff0d8;
|
||||
color: #3c763d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,49 @@
|
|||
<div class ="daily-planner">
|
||||
<div ng-if="!step || step ===0">
|
||||
<div class="daily-planner">
|
||||
<div ng-if="!vm.step || vm.step ===0">
|
||||
<div class="input">
|
||||
<div class="info">What do you want to do today?</div>
|
||||
<form ng-submit="vm.addTask()">
|
||||
<input class="text-input"
|
||||
ng-model="vm.newTask">
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<h2>Tasks for today</h2>
|
||||
|
||||
<ul class="task-list"
|
||||
dnd-list="vm.listModel.lists.today">
|
||||
<li class="task"
|
||||
dnd-draggable="task"
|
||||
dnd-effect-allowed="move"
|
||||
dnd-moved="vm.listModel.lists.today.splice($index, 1);"
|
||||
ng-class="{'is-selected': vm.listModel.selected === task}"
|
||||
ng-repeat="task in vm.listModel.lists.today">
|
||||
{{ task.title }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="info">
|
||||
If you're done, you should spend some time prioritizing your tasks, by ordering them via drag and drop.
|
||||
</div>
|
||||
|
||||
<h2>Tasks Backlog (for some other time)</h2>
|
||||
<ul class="task-list task-list__backlog"
|
||||
dnd-list="vm.listModel.lists.backlog">
|
||||
<li class="task"
|
||||
dnd-draggable="task"
|
||||
dnd-effect-allowed="move"
|
||||
dnd-moved="vm.listModel.lists.backlog.splice($index, 1);"
|
||||
ng-class="{'is-selected': vm.listModel.selected === task}"
|
||||
ng-repeat="task in vm.listModel.lists.backlog | limitTo:vm.limitBacklogTo">
|
||||
{{ task.title }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button ng-click="vm.limitBacklogTo = false"
|
||||
ng-hide="vm.limitBacklogTo === false || vm.listModel.lists.backlog.length ===0">Show All {{ vm.listModel.lists.backlog.length }} items
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -5,26 +5,24 @@
|
|||
* # dailyPlanner
|
||||
*/
|
||||
|
||||
(function() {
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('superProductivity')
|
||||
.directive('dailyPlanner', dailyPlanner);
|
||||
.module('superProductivity')
|
||||
.directive('dailyPlanner', dailyPlanner);
|
||||
|
||||
/* @ngInject */
|
||||
function dailyPlanner() {
|
||||
return {
|
||||
templateUrl: 'scripts/daily-planner/daily-planner-d.html',
|
||||
bindToController: true,
|
||||
controller: DailyPlannerCtrl,
|
||||
controllerAs: 'vm',
|
||||
link: linkFn,
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
|
||||
}
|
||||
};
|
||||
templateUrl: 'scripts/daily-planner/daily-planner-d.html',
|
||||
bindToController: true,
|
||||
controller: DailyPlannerCtrl,
|
||||
controllerAs: 'vm',
|
||||
link: linkFn,
|
||||
restrict: 'E',
|
||||
scope: {}
|
||||
};
|
||||
|
||||
function linkFn(scope, element, attrs) {
|
||||
|
||||
|
|
@ -32,8 +30,46 @@
|
|||
}
|
||||
|
||||
/* @ngInject */
|
||||
function DailyPlannerCtrl() {
|
||||
var vm = this;
|
||||
function DailyPlannerCtrl($localStorage, $scope) {
|
||||
let vm = this;
|
||||
|
||||
$localStorage.$default({
|
||||
tasks: [],
|
||||
backlogTasks: []
|
||||
});
|
||||
|
||||
vm.limitBacklogTo = 3;
|
||||
vm.tasks = $localStorage.tasks;
|
||||
vm.backlogTasks = $localStorage.backlogTasks;
|
||||
|
||||
vm.listModel = {
|
||||
selected: null,
|
||||
lists: {
|
||||
today: vm.tasks,
|
||||
backlog: vm.backlogTasks
|
||||
}
|
||||
};
|
||||
|
||||
$scope.models = {
|
||||
selected: null,
|
||||
lists: { "A": [], "B": [] }
|
||||
};
|
||||
|
||||
// Generate initial model
|
||||
for (var i = 1; i <= 3; ++i) {
|
||||
$scope.models.lists.A.push({ label: "Item A" + i });
|
||||
$scope.models.lists.B.push({ label: "Item B" + i });
|
||||
}
|
||||
|
||||
vm.addTask = function () {
|
||||
vm.tasks.push({
|
||||
title: vm.newTask,
|
||||
id: Math.random().toString(36).substr(2, 10)
|
||||
});
|
||||
console.log('I am here!', vm.tasks);
|
||||
|
||||
vm.newTask = '';
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ html {
|
|||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@
|
|||
"angular-aria": "^1.5.0",
|
||||
"angular-resource": "^1.5.0",
|
||||
"angular-ui-router": "latest",
|
||||
"angular-local-storage": "^0.5.2"
|
||||
"angular-local-storage": "^0.5.2",
|
||||
"angular-drag-and-drop-lists": "^2.0.0",
|
||||
"ngstorage": "^0.3.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"angular-mocks": "^1.5.0"
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ module.exports = function(config) {
|
|||
'app/bower_components/angular-aria/angular-aria.js',
|
||||
'app/bower_components/angular-resource/angular-resource.js',
|
||||
'app/bower_components/angular-ui-router/release/angular-ui-router.js',
|
||||
'app/bower_components/angular-local-storage/dist/angular-local-storage.js',
|
||||
'app/bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js',
|
||||
'app/bower_components/ngstorage/ngStorage.js',
|
||||
'app/bower_components/angular-mocks/angular-mocks.js',
|
||||
// endbower
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue