Skip to content

Commit

Permalink
New Changes!
Browse files Browse the repository at this point in the history
You can create and remove proyects, change their name and everything !
AppleLAN committed Jan 8, 2015
1 parent 6037ff9 commit cbcdd1a
Showing 4 changed files with 235 additions and 62 deletions.
162 changes: 162 additions & 0 deletions ToDo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="eng" ng-app="ToDo">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>todo</title>
<style>
body {
padding: 20px;
background-color: #BDF1F1;
}

button {
padding: 10px;
background-color: #28baba;
color: #ffffff !important;
font-family: helvetica,arial !important;
font-size: 20px;
line-height: 24px;
border-style: groove;
border-radius: 15px;
border-color: #4C6060; }

li {
padding: 10px;
background-color: #ffffff;
color: #333333;
font-family: helvetica,arial;
font-size: 20px;
line-height: 24px;
border-style: groove;
border-radius: 15px;
border-color: #4C6060; }

form {
padding: 5px; }

.done {
text-decoration: line-through;
color: #ccc; }
</style>
</head>
<body id="change">
<div ng-controller="todoController" ng-init="init()">

<input class="color" value="" onblur="pick()" id="colorpick">
<form name="frm" ng-submit="addTodo()">
<input type="text" name="newTodo" ng-model="newTodo" required/>
<button ng-disabled="frm.$invalid">Go</button>
</form>
<button class="btn btn-default btn-sm" ng-click="saveInput()">Save</button>
<button class="btn btn-default btn-sm" ng-click="loadInput()">Load</button>
<button class="btn btn-default btn-sm" ng-click="clearCompleted()">Clear Completed</button>
<button class="btn btn-default btn-sm" ng-click="showCompleted()">Show Completed</button>
<button class="btn btn-default btn-sm" ng-click="exportPartialData()">Export Partial Data</button>
<button class="btn btn-default btn-sm" ng-click="exportFullData()">Export Full Data</button>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"/>
<span ng-class="{'done':todo.done}">{{todo.title}}</span>
</li>
</ul>
</div>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script src="http://alasql.org/console/alasql.min.js"></script>
<script src="http://alasql.org/console/xlsx.core.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script src="http://gregpike.net/demos/angular-local-storage/src/angular-local-storage.js"></script>
<script>
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col,16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}
var cook = null;
function pick(){
var elem = document.getElementById("colorpick").value;
cook = document.cookie="#" + elem;
var colour = document.getElementById("change");
colour.style.background = cook;
var buttonBackgroundColor = LightenDarkenColor(cook, -50);
var buttonelement = document.getElementsByTagName('button');
for(var i=0;i<buttonelement.length;i++){
buttonelement[i].style.background= buttonBackgroundColor;
}

}
var ToDo =angular.module('ToDo',['ngStorage']);
ToDo.controller('todoController', function($scope, $localStorage){
$scope.todos = [];
$scope.Saved = [];
$scope.exportPartialData = function () {
alasql('SELECT * INTO XLSX("PartialReport.xlsx",{headers:true}) FROM ?',[$scope.todos]);
};
$scope.exportFullData = function () {
$scope.full=$scope.todos
$scope.full.concat($scope.Saved);
alasql('SELECT * INTO XLSX("FullReport.xlsx",{headers:true}) FROM ?',[$scope.full]);
};
$scope.addTodo = function(){
$scope.todos.push({'title' : $scope.newTodo, 'done' :false})
$scope.newtodo = ''
}
$scope.clearCompleted = function(){
$scope.todos = $scope.todos.filter(function(item){
if(item.done){
$scope.Saved.push(item);
}
return !item.done
})
}
$scope.showCompleted = function(){
alert($scope.Saved.length)
}
$scope.saveInput = function() {
$localStorage.Saved = $scope.todos;
}
$scope.loadInput = function() {
$scope.todos = $localStorage.Saved;
}
$scope.init = function(){
if($localStorage.Saved != undefined)
$scope.todos = $localStorage.Saved;
else
$scope.todos = [
{'title':'Build a ToDo app', 'done' :false}
];
};
window.onbeforeunload = function (event) {
var message = 'Sure you want to leave?';
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
event.returnValue = message;
$localStorage.Saved = $scope.todos;

}
return message;
}
});
</script>
</body>
</html>
92 changes: 67 additions & 25 deletions TodoTest.html
Original file line number Diff line number Diff line change
@@ -6,8 +6,9 @@
<meta name="description" content="">
<meta name="author" content="Alan Buscaglia">
<link rel="icon" href="favicon.ico">
<title>Todo App Alpha</title>
<title>Todo App Beta</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

</head>
@@ -24,7 +25,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ToDoApp Alpha</a>
<p class="navbar-brand">ToDoApp Beta</p>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@@ -39,21 +40,13 @@
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Done <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="clearCompleted()">Clear</a></li>
<li class="divider"></li>
<li><a href="#" ng-click="showCompleted()">Show</a></li>
</ul>
<a href="#" ng-click="clearCompleted()" role="button" >Clear </a>

</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Export <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" ng-click="exportPartialData()">Partial</a></li>
<li class="divider"></li>
<li><a href="#" ng-click="exportFullData()">Full</a></li>
</ul>
<a href="#" ng-click="exportData()">Export</a>

</li>

<li class="dropdown">
@@ -74,14 +67,16 @@
</div>
</nav>

<div class="container" >
<div class="container" >

<div role="tabpanel">

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" >
<ul class="nav nav-tabs" role="tablist" >

<li role='presentation' ng-class="{'active' : tab.active}" ng-repeat="tab in tabs"><a href="#" aria-controls="default" role="tab" data-toggle="tab" ng-click="selectTab(tab)">{{tab.title}}</a></li>
<li ng-click="addTab()" role="presentation" data-toggle="tooltip" data-placement="bottom" title="New Proyect"><a href="#">+</a></li>
<li ng-click="addTab()" role="presentation" data-toggle="tooltip" data-placement="bottom" title="New Proyect" ><a id="openProyectConfig" href="#">+</a></li>
<li ng-click="removeTab()" role="presentation" data-toggle="tooltip" data-placement="bottom" title="Delete Current Proyect" ><a href="#">-</a></li>
</ul>

<!-- Tab panes -->
@@ -141,6 +136,26 @@ <h3>Select your favourite color&hellip;</h3>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="proyectPanel" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Proyect</h4>
</div>
<div class="modal-body">
<h3>Choose Name&hellip;</h3>
<input size="35" type="text" id="newTabName" ng-model="newTabName" name="" required placeholder="Enter Proyect new Name">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveProyectChanges()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</div>

<!-- Bootstrap core JavaScript
@@ -198,7 +213,9 @@ <h3>Select your favourite color&hellip;</h3>
$scope.Saved = [];
$scope.tabs = [];


$scope.hide = function(){
$scope.show = false;
}

var Files = $resource('/files/:id', { id: "@id" });
angular.extend($scope, {
@@ -211,14 +228,16 @@ <h3>Select your favourite color&hellip;</h3>
});
}
});
$scope.exportPartialData = function () {
alasql('SELECT * INTO XLSX("PartialReport.xlsx",{headers:true}) FROM ?',[$scope.todos]);
$scope.exportData = function () {
if($scope.todos.length!=0){
alasql('SELECT * INTO XLSX("Report.xlsx",{headers:true}) FROM ?',[$scope.todos]);
swal("Done!", "All Exported!..", "success")
}
else
swal("Error!", "Nothing to Export!..", "error")

};
$scope.exportFullData = function () {
$scope.full=$scope.todos
$scope.full.concat($scope.Saved);
alasql('SELECT * INTO XLSX("FullReport.xlsx",{headers:true}) FROM ?',[$scope.full]);
};

$scope.import = function () {
var file = $scope.uploadedfile;
var result = alasql('SELECT * FROM XLSX(file,{headers:true})');
@@ -230,13 +249,18 @@ <h3>Select your favourite color&hellip;</h3>
$scope.newtodo = ''
}
$scope.clearCompleted = function(){
$scope.Saved=[];
$scope.todos = $scope.todos.filter(function(item){
if(item.done){
$scope.Saved.push(item);
}
return !item.done
})
$scope.currentTab.todos = $scope.todos;
if($scope.Saved.length!=0)
swal("Done!", "All Clear!..", "success")
else
swal("Error!", "Nothing to Clear!..", "error")
}

$scope.showCompleted = function(){
@@ -245,11 +269,13 @@ <h3>Select your favourite color&hellip;</h3>
$scope.saveInput = function() {
$localStorage.Saved = $scope.tabs;
$localStorage.TabSaved = $scope.currentTab;
swal("Done!", "All Saved!..", "success")

}
$scope.loadInput = function() {
$scope.tabs = $localStorage.Saved;
$scope.currentTab = $localStorage.TabSaved;
swal("Done!", "All Loaded!..", "success")
}
$scope.init = function(){
if($localStorage.Saved != undefined){
@@ -275,11 +301,23 @@ <h3>Select your favourite color&hellip;</h3>
};
$scope.addTab = function(){
$scope.todos = [];
$scope.show = true;
var tab = {'title' : 'default', 'todos': $scope.todos, 'active': true};
$scope.tabs.push(tab);
$scope.currentTab.active = false;
$scope.currentTab = tab;
}
$scope.removeTab = function(){
if($scope.tabs.length != 0)
swal("Done!", "Deleted!..", "success")
else
swal("Error", "Nothing to Delete!..", "error")
$scope.tabs = $scope.tabs.filter(function(item){
return item != $scope.currentTab
});
$scope.todos=[];

}

$scope.selectTab = function(sTab)
{
@@ -293,6 +331,10 @@ <h3>Select your favourite color&hellip;</h3>
$localStorage.SavedColor = cook;
swal("Good job!", "All Saved!..", "success")
}
$scope.saveProyectChanges = function(){
$scope.currentTab.title = $scope.newTabName;
swal("Name Changed!", "All Saved!..", "success")
}

window.onbeforeunload = function (event) {
var message = 'Sure you want to leave?';
4 changes: 4 additions & 0 deletions js/custom.js
Original file line number Diff line number Diff line change
@@ -19,5 +19,9 @@ $(function () {
e.preventDefault();
$('#configurationPanel').modal();
});
$('#openProyectConfig').click(function(e){
e.preventDefault();
$('#proyectPanel').modal();
});

})
39 changes: 2 additions & 37 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,38 +1,3 @@
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
body{
font-family: helvetica, arial, sans-serif !important;
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
/*# sourceMappingURL=style.css.map */

0 comments on commit cbcdd1a

Please sign in to comment.