From b2242caabd575b9d3566e41327bdc49ded990acf Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Tue, 14 Nov 2017 23:04:57 +0100
Subject: [PATCH] Start of lists support

---
 res/static/res/script/listmaker.js        | 38 +++++++----
 res/template/fragments/api/list-post.html | 83 +++++++++++++++--------
 res/template/home.html                    |  4 +-
 3 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/res/static/res/script/listmaker.js b/res/static/res/script/listmaker.js
index c7f53ff..6a08a59 100644
--- a/res/static/res/script/listmaker.js
+++ b/res/static/res/script/listmaker.js
@@ -1,6 +1,10 @@
 
 var listItems = new Array();
 
+$("#btnCreateList").click(function (evt) {
+	createList();
+});
+
 function addToList(id, desc){
 	var listEntry = {id: id, desc: desc};
 
@@ -8,7 +12,7 @@ function addToList(id, desc){
 }
 
 function createList(){
-	var url = "/api/createlist/";
+	var url = "/api/list";
 	
 	var postData = {};
 	
@@ -20,17 +24,29 @@ function createList(){
 	if(title === null){
 		return;
 	}
-	
-	postData["title" ] = title;
+
+	var postData = {
+		"title": title,
+		"description": "yo",
+		"files": new Array()
+	};
 	
 	var arrayLength = listItems.length;
 	for (var i = 0; i < arrayLength; i++) {
-		postData["id" + i] = listItems[i]["id"];
-		postData["desc" + i] = listItems[i]["desc"];
+		postData.files[i] = {
+			"id": listItems[i]["id"],
+			"description": listItems[i]["desc"]
+		};
 	}
 	
-	$.post(url, postData, function(response){
-		listCreated(response);
+	$.ajax({
+		url: url,
+		contentType: "application/json",
+		method: "POST",
+		data: JSON.stringify(postData),
+		dataType: "json",
+		success: listCreated,
+		error: listCreated
 	});
 }
 
@@ -38,7 +54,7 @@ function listCreated(response){
 	if(response.status === "success"){
 		resultString = "<div class=\"uploadHistory\">List creation finished!<br/>"
 			+ "Your List URL: <br/>"
-			+ "<a href=\"" + response.url + "\" target=\"_blank\" style=\"font-weight: bold;\">" + response.url + "</a>"
+			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\" style=\"font-weight: bold;\">/l/" + response.id + "</a>"
 			+ "</div>";
 		
 		$('#uploads-container').prepend(
@@ -66,8 +82,4 @@ function listCreated(response){
 //	
 //	$("#txtListId").val("");
 //	$("#txtListDesc").val("");
-//});
-
-$("#btnListCreate").click(function (evt) {
-	createList();
-});
\ No newline at end of file
+//});
\ No newline at end of file
diff --git a/res/template/fragments/api/list-post.html b/res/template/fragments/api/list-post.html
index 09e8a5f..150d176 100644
--- a/res/template/fragments/api/list-post.html
+++ b/res/template/fragments/api/list-post.html
@@ -1,5 +1,5 @@
 {{define "api-list-post"}}
-<details th:fragment="details" class="api_doc_details request_post">
+<details class="api_doc_details request_post">
 	<summary>POST: /list</summary>
 	<div>
 		<h3>Description</h3>
@@ -8,45 +8,70 @@
 			viewer page.
 		</p>
 		<h3>Parameters</h3>
-		<table>
-			<tr>
-				<td>Param</td>
-				<td>Required</td>
-				<td>Location</td>
-				<td>Description</td>
-			</tr>
-			<tr>
-				<td>id</td>
-				<td>true</td>
-				<td>URL</td>
-				<td>ID of the file to delete</td>
-			</tr>
-		</table>
+		<p>
+			POST body should be a JSON object, example below. A list can contain
+			maximally 5000 files. If you try to add more the request will fail.
+		</p>
+		<h4>Example</h4>
+<pre>
+{
+	"title": "My beautiful photos",
+	"description": "An album of photos from my vacation in Austria",
+	"files": [ // Ordered array of files to add to the list
+		{
+			"id": "abc123",
+			"description": "First photo of the week, such a beautiful valley"
+		},
+		{
+			"id": "123abc",
+			"description": "The week went by so quickly, here's a photo from the plane back"
+		}
+	]
+}
+</pre>
 		<h3>Returns</h3>
 <pre>HTTP 200: OK
 {
 	"success": true,
-	"value": "file_deleted",
-	"message": "The file has been deleted."
-}</pre>
-<pre>HTTP 404: Not Found
+	"id": "yay137" // ID of the newly created list
+}
+</pre>
+<pre>HTTP 422: Unprocessable Entity
 {
 	"success": false,
 	"value": "file_not_found",
-	"message": "File ID was not found in the database."
-}</pre>
-<pre>HTTP 401: Unauthorized
+	"id": "Oh42No", // The file you tried to add with this ID does not exist
+	"message": "File Oh42No was not found in the database."
+}
+</pre>
+<pre>HTTP 413: Payload too large
 {
 	"success": false,
-	"value": "unauthorized",
-	"message": "You are not logged in."
-}</pre>
-<pre>HTTP 403: Forbidden
+	"value": "too_many_files",
+	"message": "This list contains too many files, max 5000 allowed."
+}
+</pre>
+<pre>HTTP 422: Unprocessable Entity
 {
 	"success": false,
-	"value": "forbidden",
-	"message": "This is not your file."
-}</pre>
+	"value": "json_parse_failed",
+	"message": "The JSON object in the request body could not be read."
+}
+</pre>
+<pre>HTTP 413: Payload too large
+{
+	"success": false,
+	"value": "title_too_long",
+	"message": "The title of this list is too long, max 300 characters allowed."
+}
+</pre>
+<pre>HTTP 413: Payload too large
+{
+	"success": false,
+	"value": "description_too_long",
+	"message": "The description of this list or one of the files in the list is too long, max 3000 characters allowed."
+}
+</pre>
 	</div>
 </details>
 {{end}}
\ No newline at end of file
diff --git a/res/template/home.html b/res/template/home.html
index 8aa4b30..2e69bca 100644
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -51,7 +51,7 @@
 				<div id="uploads-completed"></div>
 			</div>
 			<div class="highlight bg-dark border-bottom">
-				<a id="btnOpenAsList" href="#">Open uploaded files as list</a>
+				<a id="btnCreateList" href="#">Create list with uploaded files</a>
 			</div>
 			
 			<h1>Pixeldrain Public Beta<img src="/res/img/sia.png" style="height: 40px;"/></h1>
@@ -145,7 +145,7 @@
 		<script type="text/javascript">var API_URL = "/api";</script>
 		<script src="/res/script/Cookie.js"></script>
 		<script src="/res/script/home.js"></script>
-		<script src="/res/script/openlist.js"></script>
+		<script src="/res/script/listmaker.js"></script>
 		{{template "analytics"}}
 	</body>
 </html>