In Short: When I do some changes it should reflect whether reload the browser or not..
On flask Rest Server has some list of task, Which I want to show on client browser. Each task has some status like Done and In Progress. So on client site, user will able to update the status of task. Initially each task is In Progress. If User click on the button Done then it will show status of task done. Similarly if any task is Done then it can show as mark In Progress. Please see the DEMO on Plunker.
When I reload the browser the my change should reflex. Like if I make a task as DONE, then it will always show done. If We reload the browser still it show DONE. In DEMO it will not show like that because it is not REST server, but on my machine which is rest server, when I changed status of some task and reload browser, changes are not reflect. Please help me how to maintain the status of task using $http.put.
In Demo I am using the local json file, there is not database. All are list in rest-server, please see the following file for rest-server..
Flask-REST Server
import six
from flask import Flask, jsonify, abort, request, make_response, url_for, render_template
from flask.ext.httpauth import HTTPBasicAuth
app = Flask(__name__, static_url_path="")
auth = HTTPBasicAuth()
@auth.get_password
def get_password(username):
if username == 'admin':
return '1234'
return None
@auth.error_handler
def unauthorized():
return make_response(jsonify({'error': 'Unauthorized access'}), 403)
@app.errorhandler(400)
def bad_request(error):
return make_response(jsonify({'error': 'Bad request'}), 400)
@app.errorhandler(404)
def not_found(error):
return make_response(jsonify({'error': 'Not found'}), 404)
tasks = [
{
'id': 1,
'title': 'Learn Django',
'description': 'There is greate office documentation on django',
'done': False
},
{
'id': 2,
'title': 'Learn Python',
'description': 'Need to find a good Python tutorial on the web',
'done': False
},
{
'id': 3,
'title': 'Learn Flask',
'description': 'There is http://blog.miguelgrinberg.com',
'done': False
},
{
'id': 4,
'title': 'Angular',
'description': 'Best tutorial for Angularjs is codeschools',
'done': False
}
]
def make_public_task(task):
new_task = {}
for field in task:
if field == 'id':
new_task['uri'] = url_for('get_task', task_id=task['id'],
_external=True)
else:
new_task[field] = task[field]
return new_task
@app.route('/')
#@auth.login_required
def index():
return render_template('index.html')
@app.route('/todo/api/v1.0/tasks', methods=['GET'])
#@auth.login_required
def get_tasks():
return jsonify({'tasks': [make_public_task(task) for task in tasks]})
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
#@auth.login_required
def get_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
return jsonify({'task': make_public_task(task[0])})
@app.route('/todo/api/v1.0/tasks', methods=['POST'])
#@auth.login_required
def create_task():
if not request.json or 'title' not in request.json:
abort(400)
task = {
'id': tasks[-1]['id'] + 1,
'title': request.json['title'],
'description': request.json.get('description', ""),
'done': False
}
tasks.append(task)
return jsonify({'task': make_public_task(task)}), 201
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['PUT'])
#@auth.login_required
def update_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
if not request.json:
abort(400)
if 'title' in request.json and \
not isinstance(request.json['title'], six.string_types):
abort(400)
if 'description' in request.json and \
not isinstance(request.json['description'], six.string_types):
abort(400)
if 'done' in request.json and type(request.json['done']) is not bool:
abort(400)
task[0]['title'] = request.json.get('title', task[0]['title'])
task[0]['description'] = request.json.get('description',
task[0]['description'])
task[0]['done'] = request.json.get('done', task[0]['done'])
return jsonify({'task': make_public_task(task[0])})
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['DELETE'])
#@auth.login_required
def delete_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
tasks.remove(task[0])
return jsonify({'result': True})
if __name__ == '__main__':
app.run(debug=True)
index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo By Angularjs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="tasksCtrl">
<div>
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>
<span ng-show="done" class="label label-success">Done</span>
<span ng-hide="done" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
</td>
<td ng-show="done">
<span>
<button ng-click="done = !done" class="btn">Mark In Progress</button>
</span>
</td>
<td ng-hide="done">
<span>
<button ng-click="done = !done" class="btn">Mark Done</button>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
//$http.get("data.json")
$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
/*for(var i=0; i<response.tasks[0].length;i++){
$scope.tasks.push({
uri: response.task[i].uri,
title: response.task[i].title,
description:response.task[i].description,
done: response.task[i].done
});
}*/
//console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.done = function(task) {
$http.put(task.uri(), {
'done': true
})
.success(function(result) {
updateTask(task, result.task);
//console.log(result);
//$scope.resultPut=result;
})
.error(function() {
console.log("error");
});
};
function updateTask(task, newTask) {
var index = $scope.tasks.indexOf(task);
tasks[index].uri(newTask.uri);
tasks[index].title(newTask.title);
tasks[index].title(newTask.description);
tasks[index].done(newTask.done);
}
});
</script>
</body>
</html>