Skip to content

Advanced sass #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Advanced sass #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0df0e3
added authentication
Dec 1, 2015
77b9f24
initial commit
Dec 2, 2015
f034611
finished adding CRUD
Dec 2, 2015
9f1d162
added advanced Sass
Dec 11, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions README.md
View file
Open in desktop

This file was deleted.

25 changes: 25 additions & 0 deletions walter_nicholas/app/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
body {
background: lightgrey;
}

td {
border: 1px solid black;
width: 200px;
height: 40px;
font-size: 1.3em;
background: white;
text-align: center;
}

.deleteTasksButton, .updateButton {
width: 200px;
height: 40px;
font-size: 1.2em;
}

.deleteTasksButton {
color: red;
}

#taskTable {
}
87 changes: 87 additions & 0 deletions walter_nicholas/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/application.css">
<meta charset="UTF-8">
<title>Task Finder</title>
</head>
<body data-ng-app="taskApp">
<h1 class="title">Task Finder</h1>
<main data-ng-controller="tasksController" data-ng-init="retrieveTasks()">

<div class="login" ng-if="!token">
<label>username:</label><input id="newUsername" type="text" maxlength="10" value=""><br>
<label>password:</label><input id="newPassword" type="text" maxlength="10" value=""><br>
<label>repeated: </label><input id="repeated" type="text" maxlength="10" value=""><br>

<button data-ng-click="signUp()">sign up</button><br><br>

<label>username:</label><input id="username" type="text" maxlength="10" value=""><br>
<label>password:</label><input id="password" type="text" maxlength="10" value=""><br>
<button data-ng-click="signIn()">sign in</button>
</div>
<div class="login loggedIn" ng-if="token">
Logged in as {{username}}.<br>
</div>

<div class="sortButtonsContainer">
<button data-ng-click="retrieveTasks()">show all</button><br>

<button data-ng-click="showTasksByPriority()">show tasks with priority less than or equal to:</button>
<select id="priority">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br>

<button data-ng-click="showTasksByCompletion()">show tasks with completion status:</button>
<select id="completionStatus">
<option value=true>true</option>
<option value=false>false</option>
</select><br>
</div>

<form name="newTaskForm" class="formContainer" data-ng-submit="createTask(newTask)">
<h2>New Task:</h2>

<label for="newTaskDescription">Description:</label>
<input type="text" id="newTaskDescription" required data-ng-model="newTask.description">

<label for="newTaskLocation">Location:</label>
<select id="newTaskLocation" data-ng-model="newTask.location" placeholder="work">
<option value="work">work</option>
<option value="school">school</option>
<option value="home">home</option>
<option value="other">other</option>
</select>

<label for="newTaskPriority">Priority:</label>
<select id="newTaskPriority" data-ng-model="newTask.priority">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br>

<button type="submit" data-ng-disabled="newTaskForm.$invalid">Create New Task</button>
</form>

<br><br>
<table id="taskTable">
<tr><td> Description </td><td> Location </td><td> Priority </td><td> Completed </td><td> Delete Tasks </td></tr>
<tr data-ng-repeat="task in tasks">
<td> {{task.description}} </td>
<td> {{task.location}} </td>
<td> {{task.priority}} </td>
<td><button class="updateButton" data-ng-click="updateTask(task)"> {{task.completed}} </button></td>
<td><button class="deleteTasksButton" data-ng-click="deleteTask(task)"> Delete </button></td>
</table>

</main>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="/bundle.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions walter_nicholas/app/js/entry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
require('angular/angular');
var angular = window.angular;

var taskApp = angular.module('taskApp', []);
// require('./controllers/controllers')(taskApp);
require('./tasks/tasks')(taskApp);
148 changes: 148 additions & 0 deletions walter_nicholas/app/js/tasks/controllers/tasks_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
module.exports = function(app) {
app.controller('tasksController', ['$scope', '$http', function($scope, $http) {
$scope.tasks = [];
var defaults = {location: 'work', priority: 1};
$scope.newTask = Object.create(defaults);
$scope.token = false;
$scope.username = '';

$scope.signUp = function() {
$scope.username = $('input[id="newUsername"]').val();
var password = $('input[id="newPassword"]').val();
var repeated = $('input[id="repeated"]').val();
if(!($scope.username != '' && password != '' && repeated != '')) alert('Fill out all fields');
else if(repeated != password) alert('password != repeated');
else {
var newUser = {"username": $scope.username, "password": password};

var successCb = function(res) {
if(res.data.token) $scope.token = res.data.token;
};
var errorCb = function(err) {
console.log(err.data.msg);
alert(err.data.msg);
};

var req = {
method: 'POST',
url:'/api/signup',
data: newUser
};

$http(req).then(successCb, errorCb);
}
};

// $scope.signIn = function() {
// $scope.username = $('input[id="username"]').val();
// var password = $('input[id="password"]').val();
// if(!($scope.username != '' && password != '')) alert('Fill out all fields.');
// else {

// var successCb = function(res) {
// if(res.data.token) $scope.token = res.data.token;
// };

// var errorCb = function(err) {
// console.log(err.data)
// };

// var user = $scope.username;
// var req = {
// method: 'GET',
// url: '/api/signin'
// headers: {"Authorization": "Basic " + btoa(user + ":" + password)}
// };

// $http(req).then(successCb, errorCb);

// var newUser = {"username": $scope.username, "password": password};
// $http.post('/api/signup', newUser)
// .then(function(res) {
// if(res.data.token) $scope.token = res.data.token;
// }, function(err) {
// console.log(err.data)
// });
// }
// };


$scope.showTasksByPriority = function() {
var priority = $('select[id="priority"]').val();

$http.get('/api/tasks/priority/' + priority)
.then(function(res) {
$scope.tasks = res.data;
}, function(err) {
console.log(err.data);
});
};

$scope.showTasksByCompletion = function() {
var status = $('select[id="completionStatus"]').val();

$http.get('/api/tasks/completed/' + status)
.then(function(res) {
$scope.tasks = res.data;
}, function(err) {
console.log(err.data);
});
};

$scope.createTask = function(task) {
$http.post('/api/tasks', task)
.then(function(res) {
$scope.tasks.push(res.data);
$scope.newTask = Object.create(defaults);
}, function(err) {
console.log(err.data)
});
};

$scope.retrieveTasks = function() {
$http.get('/api/tasks')
.then(function(res) {
$scope.tasks = res.data;
}, function(err) {
console.log(err.data);
});
};

$scope.updateTask = function(task) {
if(task.completed) task.completed = false;
else task.completed = true;
$http.put('/api/tasks/' + task._id, task)
.then(function(res) {
console.log('task completion status updated.');
}, function(err) {
console.log(err.data);
});
};

$scope.deleteTask = function(task) {
if(!($scope.token)) alert('Must be logged in to delete tasks.');
else {
$scope.tasks.splice($scope.tasks.indexOf(task), 1);

var successCb = function(res) {
console.log('task deleted.')
};

var errorCb = function(err) {
console.log(err.data.msg);
$scope.retrieveTasks();
};

var req = {
method: 'POST',
url:'/api/tasks/delete/' + task._id,
data: {token: $scope.token}
};

$http(req).then(successCb, errorCb);

}
};

}]);
};
3 changes: 3 additions & 0 deletions walter_nicholas/app/js/tasks/tasks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = function(app) {
require('./controllers/tasks_controller')(app);
};
43 changes: 43 additions & 0 deletions walter_nicholas/app/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
$a-variable-height: 40px;

@mixin center {
text-align: center;
margin-left: auto;
margin-right: auto;
}

@mixin container($bg, $radius, $height, $width) {
text-align: center;
background: $bg;
border: 1px solid black;
border-radius: $radius;
height: $height;
width: $width;
margin: 12px;
}

@mixin border($radius) {
border: 1px solid black;
border-radius: $radius;
}

body {
background: cornsilk;
}

h1 {
font-size: 3em;
}

h2 {
font-size: 2em;
}

td {
@include border(3px);
width: 200px;
height: $a-variable-height;
font-size: 1.3em;
background: white;
text-align: center;
}
Loading