Created
September 10, 2012 11:25
-
-
Save mgronhol/3690410 to your computer and use it in GitHub Desktop.
Simple notebook with REST api using Flask
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/env pytohn | |
| from flask import Flask, request, jsonify, abort | |
| import time | |
| app = Flask( __name__ ) | |
| notes = {} | |
| next_note_id = 0 | |
| main_page = """ | |
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: Helvetica, sans-serif; | |
| } | |
| .note { | |
| border: 1px solid black; | |
| border-radius: 15px; | |
| background: #f0f0f0; | |
| box-shadow: 2px 2px 2px #ccc; | |
| margin: 1em; | |
| margin-top: 3em; | |
| margin-bottom: 3em; | |
| width: 20em; | |
| padding: 1em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .note-snippet { | |
| border: 1px solid black; | |
| border-radius: 15px; | |
| background: #f0f0f0; | |
| box-shadow: 2px 2px 2px #ccc; | |
| margin: 1em; | |
| width: 10em; | |
| padding: 1em; | |
| cursor: pointer; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| input[type="text"] { | |
| font-size: 14pt; | |
| padding: 5px; | |
| margin: 0.3em; | |
| } | |
| textarea { | |
| font-size: 14pt; | |
| padding: 5px; | |
| margin: 0.3em; | |
| } | |
| form { | |
| margin: 1em; | |
| border: 1px solid black; | |
| border-radius: 15px; | |
| padding: 1em; | |
| width: 20em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #wrapper { | |
| width: 50%; | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| </style> | |
| <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> | |
| <script> | |
| var API_URL = "http://localhost:5000/"; | |
| function create_note( id, title, content ){ | |
| var elem = document.createElement( "div" ); | |
| $(elem).data( "id", id ); | |
| var elem_title = document.createElement( "div" ); | |
| $(elem_title).text( title ); | |
| var elem_content = document.createElement( "div" ); | |
| $(elem_content).text( content ); | |
| $(elem).addClass( "note" ); | |
| $(elem_title).addClass( "title" ); | |
| $(elem_content).addClass( "content" ); | |
| elem.appendChild( elem_title ); | |
| elem.appendChild( elem_content ); | |
| return elem; | |
| } | |
| function create_note_snippet( id, title ){ | |
| var elem = document.createElement( "div" ); | |
| $(elem).data( "id", id ); | |
| var elem_title = document.createElement( "div" ); | |
| $(elem_title).text( title ); | |
| $(elem).addClass( "note-snippet" ); | |
| $(elem_title).addClass( "title" ); | |
| elem.appendChild( elem_title ); | |
| $(elem).on("click", function(){ | |
| var id = $(this).data( "id" ); | |
| //console.log( id ); | |
| $.get( API_URL + "notes/" + id, function(response){ | |
| //console.log( response ); | |
| var tmp = document.getElementById( "note" ); | |
| $(tmp).empty(); | |
| tmp.appendChild( create_note( response.id, response.title, response.content ) ); | |
| }); | |
| }); | |
| return elem; | |
| } | |
| function fetch_notes(){ | |
| $.get( API_URL + "notes", function( response ){ | |
| //console.log( response ); | |
| var elem = document.getElementById( "notes" ); | |
| $("#notes").empty(); | |
| for( var i in response.notes ){ | |
| var note = response.notes[i]; | |
| //console.log( note ); | |
| elem.appendChild( create_note_snippet(note.id, note.title ) ); | |
| } | |
| } ); | |
| } | |
| $(document).ready(function(){ | |
| fetch_notes(); | |
| $("form").submit(function(event){ | |
| event.preventDefault(); | |
| var title = $('#post-title').val(); | |
| var content = $('#post-content').val(); | |
| $('#post-title').val(''); | |
| $('#post-content').val(''); | |
| //console.log( "posting" ); | |
| $.post( API_URL + "notes", {title: title, content: content}, function(response){ | |
| fetch_notes(); | |
| }); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="notes"></div> | |
| <div id="note"></div> | |
| <div id="create"> | |
| <form id="post" action="" > | |
| <input type="text" id="post-title" name="title" placeholder="title" /><br/> | |
| <textarea id="post-content"></textarea><br/> | |
| <button value="Post" id="post-submit" >Post</button> | |
| </form> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| @app.route( '/' ) | |
| def index(): | |
| global main_page | |
| return main_page | |
| @app.route( '/notes', methods=['GET'] ) | |
| def list_notes(): | |
| global notes | |
| out = [] | |
| for (id, note) in notes.items(): | |
| out.append( {'id': id, 'title': note['title']} ) | |
| response = jsonify( notes = out ) | |
| response.headers['Access-Control-Allow-Origin'] = '*' | |
| return response | |
| @app.route( '/notes', methods=['POST'] ) | |
| def create_note(): | |
| global notes, next_note_id | |
| title = request.form['title'] | |
| content = request.form['content'] | |
| id = next_note_id | |
| next_note_id += 1 | |
| out = {'id': id} | |
| notes[id] = {'title': title, 'content': content, 'timestamp': time.strftime( "%Y-%m-%d %H:%M:%S" )} | |
| response = jsonify( out ) | |
| response.headers['Access-Control-Allow-Origin'] = '*' | |
| return response | |
| @app.route( '/notes/<int:note_id>', methods=['GET'] ) | |
| def view_note( note_id ): | |
| global notes | |
| if note_id not in notes: | |
| abort( 404 ) | |
| out = notes[note_id] | |
| out['id'] = note_id | |
| response = jsonify( out ) | |
| response.headers['Access-Control-Allow-Origin'] = '*' | |
| return response | |
| @app.route( '/notes/<int:note_id>', methods=['PUT'] ) | |
| def update_note( note_id ): | |
| global notes | |
| if note_id not in notes: | |
| abort( 404 ) | |
| title = request.form['title'] | |
| content = request.form['content'] | |
| notes[note_id]['title'] = title | |
| notes[note_id]['content'] = content | |
| notes[note_id]['timestamp'] = time.strftime( "%Y-%m-%d %H:%M:%S" ) | |
| response = jsonify( response = "Ok." ) | |
| response.headers['Access-Control-Allow-Origin'] = '*' | |
| return response | |
| if __name__ == '__main__': | |
| app.run() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment