Add title/desc edit interface.
This commit is contained in:
		
							parent
							
								
									18bb48f681
								
							
						
					
					
						commit
						ad9407ea82
					
				
					 2 changed files with 132 additions and 5 deletions
				
			
		|  | @ -665,7 +665,6 @@ def get_user_json(username): | ||||||
| @session_manager.give_token | @session_manager.give_token | ||||||
| def post_album_add_tag(albumid): | def post_album_add_tag(albumid): | ||||||
|     ''' |     ''' | ||||||
|     Edit the album's title and description. |  | ||||||
|     Apply a tag to every photo in the album. |     Apply a tag to every photo in the album. | ||||||
|     ''' |     ''' | ||||||
|     response = {} |     response = {} | ||||||
|  | @ -685,6 +684,21 @@ def post_album_add_tag(albumid): | ||||||
|     return jsonify.make_json_response(response) |     return jsonify.make_json_response(response) | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | @site.route('/album/<albumid>/edit', methods=['POST']) | ||||||
|  | @session_manager.give_token | ||||||
|  | def post_album_edit(albumid): | ||||||
|  |     ''' | ||||||
|  |     Edit the title / description. | ||||||
|  |     ''' | ||||||
|  |     album = P_album(albumid) | ||||||
|  | 
 | ||||||
|  |     title = request.form.get('title', None) | ||||||
|  |     description = request.form.get('description', None) | ||||||
|  |     album.edit(title=title, description=description) | ||||||
|  |     response = {'title': album.title, 'description': album.description} | ||||||
|  |     return jsonify.make_json_response(response) | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
| def post_photo_add_remove_tag_core(photoid, tagname, add_or_remove): | def post_photo_add_remove_tag_core(photoid, tagname, add_or_remove): | ||||||
|     photo = P_photo(photoid, response_type='json') |     photo = P_photo(photoid, response_type='json') | ||||||
|     tag = P_tag(tagname, response_type='json') |     tag = P_tag(tagname, response_type='json') | ||||||
|  |  | ||||||
|  | @ -6,6 +6,7 @@ | ||||||
|     <title>Album {{album.display_name}}</title> |     <title>Album {{album.display_name}}</title> | ||||||
|     <meta charset="UTF-8"> |     <meta charset="UTF-8"> | ||||||
|     <link rel="stylesheet" href="/static/common.css"> |     <link rel="stylesheet" href="/static/common.css"> | ||||||
|  |     <script src="/static/common.js"></script> | ||||||
| 
 | 
 | ||||||
| <style> | <style> | ||||||
| p | p | ||||||
|  | @ -17,6 +18,25 @@ p | ||||||
|     /* overriding common.css here */ |     /* overriding common.css here */ | ||||||
|     display: block; |     display: block; | ||||||
| } | } | ||||||
|  | #title_editor, | ||||||
|  | #description_editor | ||||||
|  | { | ||||||
|  |     width: 100%; | ||||||
|  |     max-width: 800px; | ||||||
|  | } | ||||||
|  | #description_editor textarea | ||||||
|  | { | ||||||
|  |     width: 100%; | ||||||
|  |     height: 100%; | ||||||
|  | } | ||||||
|  | #description_editor | ||||||
|  | { | ||||||
|  |     height: 100px; | ||||||
|  | } | ||||||
|  | .hidden | ||||||
|  | { | ||||||
|  |     display: none; | ||||||
|  | } | ||||||
| </style> | </style> | ||||||
| </head> | </head> | ||||||
| 
 | 
 | ||||||
|  | @ -24,15 +44,34 @@ p | ||||||
| <body> | <body> | ||||||
| {{header.make_header(session=session)}} | {{header.make_header(session=session)}} | ||||||
| <div id="content_body"> | <div id="content_body"> | ||||||
|     <h2>{{album.title}}</h2> |     <h2> | ||||||
|     <p>{{album.description}}</p> |     {% if album.title %} | ||||||
|     {% set parent=album.parent() %} |         <span id="title_text">{{album.title}}</span> | ||||||
|  |     {% else %} | ||||||
|  |         <span id="title_text">Album {{album.id}}</span> | ||||||
|  |     {% endif %} | ||||||
|  |     <input id="title_editor" class="hidden" type="text" value="{{album.title}}" placeholder="title"> | ||||||
|  |     <button id="edit_button" class="green_button" onclick="start_editing()">edit</button> | ||||||
|  |     </h2> | ||||||
|  | 
 | ||||||
|  |     <p id="description_text">{{album.description}}</p> | ||||||
|  | 
 | ||||||
|  |     <div id="description_editor" class="hidden"> | ||||||
|  |     <textarea id="description_editor_box" placeholder="description">{{album.description}}</textarea> | ||||||
|  |     <span> | ||||||
|  |         <button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button> | ||||||
|  |         <button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button> | ||||||
|  |     </span> | ||||||
|  |     </div> | ||||||
|  | 
 | ||||||
|     {% set viewparam = "?view=list" if view == "list" else "" %} |     {% set viewparam = "?view=list" if view == "list" else "" %} | ||||||
|  |     {% set parent = album.parent() %} | ||||||
|     {% if parent %} |     {% if parent %} | ||||||
|     <h3>Parent: <a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></h3> |     <h3>Parent: <a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></h3> | ||||||
|     {% else %} |     {% else %} | ||||||
|     <h3>Parent: <a href="/albums">Albums</a></h3> |     <h3>Parent: <a href="/albums">Albums</a></h3> | ||||||
|     {% endif %} |     {% endif %} | ||||||
|  | 
 | ||||||
|     {% set sub_albums = album.children() %} |     {% set sub_albums = album.children() %} | ||||||
|     {% if sub_albums %} |     {% if sub_albums %} | ||||||
|     <h3>Sub-albums</h3> |     <h3>Sub-albums</h3> | ||||||
|  | @ -43,7 +82,9 @@ p | ||||||
|         {% endfor %} |         {% endfor %} | ||||||
|     </ul> |     </ul> | ||||||
|     {% endif %} |     {% endif %} | ||||||
|  | 
 | ||||||
|     {% set photos = album.photos() %} |     {% set photos = album.photos() %} | ||||||
|  |     {% if photos or sub_albums %} | ||||||
|     <span> |     <span> | ||||||
|         Download: |         Download: | ||||||
|         {% if photos %} |         {% if photos %} | ||||||
|  | @ -57,6 +98,8 @@ p | ||||||
|             </a> |             </a> | ||||||
|         {% endif %} |         {% endif %} | ||||||
|     </span> |     </span> | ||||||
|  |     {% endif %} | ||||||
|  | 
 | ||||||
|     {% if photos %} |     {% if photos %} | ||||||
|         <h3>Photos</h3> |         <h3>Photos</h3> | ||||||
|         {% if view != "list" %} |         {% if view != "list" %} | ||||||
|  | @ -75,10 +118,80 @@ p | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| <script type="text/javascript"> | <script type="text/javascript"> | ||||||
|  | var edit_button = document.getElementById("edit_button"); | ||||||
|  | var save_button = document.getElementById("save_button"); | ||||||
|  | var cancel_button = document.getElementById("cancel_button"); | ||||||
|  | 
 | ||||||
|  | var title_text = document.getElementById("title_text"); | ||||||
|  | var title_editor = document.getElementById("title_editor"); | ||||||
|  | var description_text = document.getElementById("description_text"); | ||||||
|  | var description_editor = document.getElementById("description_editor"); | ||||||
|  | var description_editor_box = document.getElementById("description_editor_box"); | ||||||
|  | 
 | ||||||
|  | bind_box_to_button(title_editor, save_button); | ||||||
|  | 
 | ||||||
|  | var title_is_blank = "{{album.title}}" === ""; | ||||||
|  | var blank_title_text = "Album {{album.id}}"; | ||||||
|  | 
 | ||||||
| function submit_tag(callback) | function submit_tag(callback) | ||||||
| { | { | ||||||
|     add_photo_tag('{{album.id}}', add_tag_box.value, callback); |     add_photo_tag('{{album.id}}', add_tag_box.value, callback); | ||||||
|     add_tag_box.value = ""; |     add_tag_box.value = ""; | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | function start_editing() | ||||||
|  | { | ||||||
|  |     edit_button.classList.add("hidden"); | ||||||
|  |     title_text.classList.add("hidden"); | ||||||
|  |     title_editor.classList.remove("hidden"); | ||||||
|  |     description_text.classList.add("hidden"); | ||||||
|  |     description_editor.classList.remove("hidden"); | ||||||
|  | 
 | ||||||
|  |     if (title_is_blank) | ||||||
|  |     { | ||||||
|  |         title_editor.value = ""; | ||||||
|  |     } | ||||||
|  |     else | ||||||
|  |     { | ||||||
|  |         title_editor.value = title_text.innerText; | ||||||
|  |     } | ||||||
|  |     title_editor.focus(); | ||||||
|  |     description_editor_box.value = description_text.innerText; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function finish_editing(do_save) | ||||||
|  | { | ||||||
|  |     if (do_save === true) | ||||||
|  |     { | ||||||
|  |         console.log("save"); | ||||||
|  |         var title = title_editor.value; | ||||||
|  |         var description = description_editor_box.value; | ||||||
|  |         if (title === "") | ||||||
|  |         { | ||||||
|  |             document.title = "Album {{album.id}}"; | ||||||
|  |             title_text.innerText = blank_title_text; | ||||||
|  |             title_is_blank = true; | ||||||
|  |         } | ||||||
|  |         else | ||||||
|  |         { | ||||||
|  |             document.title = "Album " + title; | ||||||
|  |             title_text.innerText = title; | ||||||
|  |             title_is_blank = false; | ||||||
|  |         } | ||||||
|  |         description_text.innerText = description; | ||||||
|  | 
 | ||||||
|  |         var url = "/album/{{album.id}}/edit"; | ||||||
|  |         var data = new FormData(); | ||||||
|  |         data.append("title", title); | ||||||
|  |         data.append("description", description); | ||||||
|  |         callback = function(){}; | ||||||
|  |         post(url, data, callback); | ||||||
|  |     } | ||||||
|  |     edit_button.classList.remove("hidden"); | ||||||
|  |     title_text.classList.remove("hidden"); | ||||||
|  |     title_editor.classList.add("hidden"); | ||||||
|  |     description_text.classList.remove("hidden"); | ||||||
|  |     description_editor.classList.add("hidden"); | ||||||
|  | } | ||||||
| </script> | </script> | ||||||
| </html> | </html> | ||||||
		Loading…
	
		Reference in a new issue