Skip to content

Instantly share code, notes, and snippets.

@Papillard
Forked from anonymous/app.css
Last active August 29, 2015 14:27
Show Gist options
  • Save Papillard/3e874c87e1e21dfda018 to your computer and use it in GitHub Desktop.
Save Papillard/3e874c87e1e21dfda018 to your computer and use it in GitHub Desktop.
Playing with trello part 2 (read/write)
body {
text-align: center;
padding: 50px;
font-size: 20px;
}
ul {
list-style: none;
}
ul li {
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #E6E6E6;
}
.fa {
margin-right: 10px;
}
.fa-check {
color: green;
}
.fa-times {
color: red;
}
$(document).on("ready", function(){
var getInfos = function(boardId){
var url = trelloApiUrl + "boards/" + boardId + "/lists?key=" + apiKey;
$.ajax({
type: "GET",
url: url,
success: function(data) {
getCards(data[0].id);
getCards(data[1].id);
listenTaskForm(data[0].id);
listenTaskClick();
},
error: function(data) {
console.log('Lists not found');
}
});
}
var listenTaskClick = function(){
$(".todo").on("click", "li", function(e){
// récupérer l'id Trello de l'élément
var id = $(this).data("id");
var listId = $(this).data("list");
var url = trelloApiUrl + "cards/" + id + "?key=" + apiKey + "&token=" + token;
var todoListId = "55c...46";
var doneListId = "55cb...8c9";
if (listId == todoListId) {
targetListId = doneListId;
} else {
targetListId = todoListId;
}
$.ajax({
url: url,
type: "PUT",
data: { idList: targetListId },
success: function(data){
console.log(data);
},
error: function(data){
console.log("an error occurred");
}
});
$(this).find("i").toggleClass("fa-times").toggleClass("fa-check");
$(this).data("list", targetListId);
})
}
var listenTaskForm = function(listId) {
$(".todo-form").on("submit", function(e){
e.preventDefault();
var url = trelloApiUrl + "cards/?key=" + apiKey + "&token=" + token;
var taskName = $(".todo-input").val();
var data = {
name: taskName,
due: null,
idList: listId,
urlSource: null
}
$.post(url, data, function(data){
appendTask(data);
});
});
}
var getCards = function(listId) {
var getCardsUrl = trelloApiUrl + "lists/" + listId + "/cards?key=" + apiKey;
$.ajax({
type: "GET",
async: false,
url: getCardsUrl,
success: function(data) {
fillList(data);
},
error: function(data) {
console.log('Cards not found');
}
});
}
var appendTask = function(card) {
var todoListId = "55c...46";
var openTag = "<li data-id='" + card.id + "' data-list='" + card.idList + "'>"
if (card.idList == todoListId) {
var $task = $(openTag + "<i class='fa fa-times'></i>" + card.name + "</li>");
} else {
var $task = $(openTag + "<i class='fa fa-check'></i>" + card.name + "</li>");
}
$(".todo").append($task);
}
var fillList = function(cards) {
for (var i = 0; i < cards.length; i++ ){
appendTask(cards[i]);
}
}
var trelloApiUrl = "https://api.trello.com/1/";
// Get app key
// See https://trello.com/app-key
var apiKey = "ab36........827";
// Get a user token for read/write authorization
// See https://trello.com/docs/gettingstarted/index.html#getting-a-token-from-a-user
var token = "87f0.......ad90";
// Write your todo board id
var boardId = "jr...hH";
getInfos(boardId);
});
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<title>Todo list Trello</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1 class="board-name">Todo list</h1>
<form action="" class="todo-form">
<input type="text" placeholder="Enter a new task" class="form-control todo-input">
<input type="submit" value="Add task" class="btn btn-success">
</form>
<ul class="todo">
</ul>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment