CopperWire
/
daktylos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
							<html>
<?php include("header.php") ?>
<style type="text/css">
	#resume-upload {
		display: none;
	}

	.upload-info {
		margin-left: 10px;
		margin-right: 10px;
		padding: 5px;
		border-bottom: 1px solid gray;
		/*border-radius: 10%;*/
		/*box-shadow: 0px 3px 5px lightgray;*/
	}

	.upload-info p {
		margin: 0px;
		font-family: "Open Sans";
		font-size: 12px;
	}
</style>

<div class="sidebar">
	<!--<button class="add-bucket-modal button"><i class="fa fa-compass"></i> Add New Region</button>-->
	<button class="create-project-modal button"><i class="fa fa-plus"></i> Create New Project</button>
	<button class="upload-data-modal button"><i class="fa fa-cloud-upload"></i> Upload Data</button>
	<div id="active-uploads">
		<h1>Unfinished Uploads</h1>
		<?php if(empty($active_uploads)) { echo "No current uploads."; } ?>
		<?php foreach($active_uploads as $upload) :
			$startTimestamp = strtotime($upload['uploadtime']);
		?>
			<div class='upload-info'>
				<p class="upload-project-name">Project: <?=$upload['project_name']?></p>
				<p class="upload-user"> Started by: <span title="<?=$upload['username']?>"><?=$upload['user_name']?></span></p>
				<p class="upload-file-count">Files remaining: <?=$upload["count"]?></p>
				<p class="upload-started-date">Start date: <?=date("Y-m-d", $startTimestamp)?></p>
				<p class="upload-started-time">Start time: <?=date("H:i:s T", $startTimestamp)?></p>
				<p class="upload-user"> User: <?=$upload['user_name']?> (<?=$upload['username']?>)</p>
			</div>
		<?php endforeach; ?>
	</div>
</div>
<div class="content">
	<div id="message-center"></div>
	<table>
		<tr>
			<th>Id</th>
			<th style="width: 160px;">Region</th>
			<th style="width: 160px;">Project Folder</th>
			<th style="width: 160px;">Display Name</th>
			<th style="width: 160px;">Account Access</th>
			<th style="width: 160px;">Actions</th>
		</tr>
		<?php foreach($projects as $project) : ?>
			<?php if (empty($project)) continue; ?>
			<tr class="display-row">
				<td><?=$project['project_id']?></td>
				<td><?=$project['bucket']?></td>
				<td><?=$project['folder']?></td>
				<td><?=$project['display_name']?></td>
				<td><?php if(empty($project['clients'])) { echo "no assigned clients"; } else { ?>
					<?php foreach($project['clients'] as $client) : ?>
						<div class="domain"><?=$client['subdomain']?></div>
					<?php endforeach; ?>
					<?php }?></td>
					<td>
						<button class="edit button" data-data="<?=$project['project_id']?>">Edit</button>
					</td>
				</tr>
				<tr class="edit-row">
					<td><?=$project['project_id']?></td>
					<td>
						<select name="bucket" autocomplete="off">
							<option>---Region---</option>
							<?php foreach($buckets as $bucketValue => $bucketName) : ?>
								<option value="<?=$bucketValue?>" <?=($project['bucket'] == $bucketValue) ? 'selected="selected"': ''?>><?=$bucketName?></option>
							<?php endforeach; ?>
						</select>
					</td>
					<td><input type="text" name="folder" value="<?=$project['folder']?>" /></td>
					<td><input type="text" name="display_name" value="<?=$project['display_name']?>" /></td>
					<td><?php if(empty($project['clients'])) { echo "no assigned clients"; } else { ?>
						<?php foreach($project['clients'] as $client) : ?>
							<div class="domain"><?=$client['subdomain']?><button class="remove-client" data-data="<?=$project['project_id']?>" data-client="<?=$client['client_id']?>">X</button></div>
						<?php endforeach; ?>
						<?php } ?>
						<input type="text" name="subdomain" /><button class="add-client" data-data="<?=$project['project_id']?>">+</button></td>
						<td>
							<button class="save button" data-data="<?=$project['project_id']?>">Save</button>
							<button class="cancel button">Cancel</button>
						</td>
					</tr>
				<?php endforeach; ?>
			</table>
		</div>
		<div class="modal-overlay"></div>
		<div class="modal-popup"><button class="modal-close">X</button>
			<!-- <form id="add-bucket-form" autocomplete="off" style="display:none;">
			<h1>Add Bucket</h1>
			<hr />
			<div class="modal-message"></div>
				<div class="input-row centered"><input name="bucket-name" type="text" placeholder="bucket name" autocomplete="off" /></div>
				<div class="input-row centered"><button class="add-bucket">Add Bucket</button></div>
			</form> -->

			<form id="create-project-form" autocomplete="off" style="display:none;">
				<h1>Create New Project</h1>
				<hr />
				<div class="modal-message"></div>
				<div class="input-row centered">
					<select name="bucket" autocomplete="off">
						<option>---Region---</option>
						<?php foreach($buckets as $bucketValue => $bucketName) : ?>
							<option value="<?=$bucketValue?>"><?=$bucketName?></option>
						<?php endforeach; ?>
					</select></div>
					<div class="input-row centered"><input name="project" type="text" placeholder="project name" autocomplete="off" /></div>
					<div class="input-row centered"><input name="display_name" type="text" placeholder="display name" autocomplete="off" /></div>
					<div class="input-row centered"><button class="create-project">Create Project</button></div>
				</form>

				<form id="upload-data-form" autocomplete="off" style="display:none;" enctype="multipart/form-data">
					<h1>Upload Data</h1>
					<hr />
					<div class="modal-message"></div>
					<div class="input-row centered">
						<select name="project_id" autocomplete="off"<?=($resume)? ' disabled="disabled"': ""?>>
							<option>---Project---</option>
							<?php foreach($projects as $project) : ?>
								<option value="<?=$project['project_id']?>"><?=$project['display_name']?></option>
							<?php endforeach; ?>
						</select></div>
						<div id="resume-upload" class="input-row centered alert-notification">To resume an upload, please select the previous folder used for this project.
							<input type="hidden" name="resume" value="false" />
						</div>

						<div class="input-row centered drop-zone">
							<!--<p>Drop files here</p>-->
							<input name="dir" id="dir-input" type="file" webkitdirectory directory multiple/><br/>
							<div id="loading-spinner" style="display:none;"><div class="sk-fading-circle"><div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div></div>	
							<div class="input-row centered"><button class="upload-data" disabled="disabled">Upload Data</button></div>
							<div id="dir-info"></div>
							<div id="upload-messages">
								<p><span id="progress-number">0</span> files remaining</p>
								<div id="upload-console"></div>
								<div id="error-messages"></div>
							</div>
						</div>
					</form>
				</div>
			</body>
			<script type="text/javascript" src="/js/resumefilemanager.js"></script>
			<script type="text/javascript">
				document.addEventListener("DOMContentLoaded", function(event) { 
					bindButtons();

					<?php foreach($abandoned_uploads as $upload): ?>
			showUnfinishedUploadDialog(<?=$upload['project_id']?>, "<?=$upload['project_name']?>", "<?=$upload['upload_timestamp']?>", <?=$upload['count']?>);
			<?php endforeach; ?>

					handleResume(<?=$resume?>);
					<?php if($superadmin): ?>
					superadminNotice();
				<?php endif; ?>
			});


				function handleResume(projectId) {
					if(typeof projectId != typeof undefined) {
						var uploadDataForm = document.getElementById("upload-data-form");
						var selectFields = uploadDataForm.getElementsByTagName("select");
						selectFields.project_id.value = parseInt(projectId);
						var inputFields = uploadDataForm.getElementsByTagName("input");
						inputFields.resume.value = true;
						document.getElementById("resume-upload").style.display = "block";
						uploadDataModalButton_click();

						//open modal
						//select project
						//display upload resume message
					}
				};

				function bindButtons() {
	// var addBucketModalButton = document.getElementsByClassName("add-bucket-modal")[0];
 //		addBucketModalButton.addEventListener("click", addBucketModalButton_click);

 var createProjectModalButton = document.getElementsByClassName("create-project-modal")[0];
 createProjectModalButton.addEventListener("click", createProjectModalButton_click);

 var uploadDataModalButton = document.getElementsByClassName("upload-data-modal")[0];
 uploadDataModalButton.addEventListener("click", uploadDataModalButton_click);

		// var dropZone = document.getElementsByClassName('drop-zone')[0];
		// dropZone.addEventListener("dragover", dropZone_drag);
		// dropZone.addEventListener("drop", dropZone_drop);
		// dropZone.addEventListener("dragenter", dropZone_drag);
		// dropZone.addEventListener("dragend", dropZone_dragend);
		// dropZone.addEventListener("dragleave", dropZone_dragend);
		// dropZone.addEventListener("drop", dropZone_dragend);

		var createProjectButton = document.getElementsByClassName("create-project")[0];
		createProjectButton.addEventListener("click", createProjectButton_click);

		var uploadDataButton = document.getElementsByClassName("upload-data")[0];
		uploadDataButton.addEventListener("click", uploadDataButton_click);

		var editButtons = document.getElementsByClassName("edit");
		for(var i = 0; i < editButtons.length; i++) {
			editButtons[i].addEventListener("click", editButton_click);
		}

		var cancelButtons = document.getElementsByClassName("cancel");
		for(var i = 0; i < cancelButtons.length; i++) {
			cancelButtons[i].addEventListener("click", cancelButton_click);
		}

		var saveButtons = document.getElementsByClassName("save");
		for(var i = 0; i < saveButtons.length; i++) {
			saveButtons[i].addEventListener("click", saveButton_click);
		}

		var addClientButtons = document.getElementsByClassName("add-client");
		for(var i = 0; i < addClientButtons.length; i++) {
			addClientButtons[i].addEventListener("click", addClientButton_click);
		}

		var removeClientButtons = document.getElementsByClassName("remove-client");
		for(var i = 0; i < removeClientButtons.length; i++) {
			removeClientButtons[i].addEventListener("click", removeClientButton_click);
		}

		var overlay = document.getElementsByClassName("modal-overlay")[0];
		overlay.addEventListener("click", closeModal_click);

		var closeModal = document.getElementsByClassName("modal-close")[0];
		closeModal.addEventListener("click", closeModal_click);
	}

	function addBucketModalButton_click(event) {
		// document.getElementById("add-bucket-form").style.display = "block";
		document.getElementById("upload-data-form").style.display = "none";
		document.getElementById("create-project-form").style.display = "none";
		var overlay = document.getElementsByClassName("modal-overlay")[0];
		var popup = document.getElementsByClassName("modal-popup")[0];
		overlay.classList.add("make-visible");
		popup.classList.add("make-visible");
	}

	function createProjectModalButton_click(event) {
		// document.getElementById("add-bucket-form").style.display = "none";
		document.getElementById("upload-data-form").style.display = "none";
		document.getElementById("create-project-form").style.display = "block";

		var overlay = document.getElementsByClassName("modal-overlay")[0];
		var popup = document.getElementsByClassName("modal-popup")[0];
		overlay.classList.add("make-visible");
		popup.classList.add("make-visible");
	}

	function uploadDataModalButton_click(event) {
		// document.getElementById("add-bucket-form").style.display = "none";
		document.getElementById("upload-data-form").style.display = "block";
		document.getElementById("create-project-form").style.display = "none";
		var overlay = document.getElementsByClassName("modal-overlay")[0];
		var popup = document.getElementsByClassName("modal-popup")[0];
		overlay.classList.add("make-visible");
		popup.classList.add("make-visible");
	}

	function createProjectButton_click(event) {
		event.preventDefault();

		var form = this.parentNode.parentNode;
		var inputFields = form.getElementsByTagName("input");
		var selectFields = form.getElementsByTagName("select");
		var bucket = selectFields.bucket.value;
		var project = inputFields.project.value;
		var displayName = inputFields.display_name.value;

		var postData = {"bucket": bucket, "display_name": displayName, "project": project};
		var promise = ajaxPost("/api/addproject", postData);
		promise.success = function(response) {
			var message = document.getElementsByClassName("modal-message")[0];
			if(response.hasOwnProperty("error")) {
				message.innerHTML = response.error;	
				if(response.hasOwnProperty("exception")) {
					console.warn(response.exception);
				}
			} else {
				location.reload();
			}
		};

		promise.failure = function(response) {
			console.warn("Communication failure", response);
		};
	}

	function uploadDataButton_click(event) {
		event.preventDefault();

		var form = this.parentNode.parentNode.parentNode;
		var inputFields = form.getElementsByTagName("input");
		var selectFields = form.getElementsByTagName("select");
		var projectId = selectFields.project_id.value;
		var isResume = inputFields.resume.value;
		var fileList = document.getElementById('dir-input').files;

		if(isResume != "true") {

			var logData = {};
			logData.project_id = projectId;
			logData.uploadtime = (new Date()).toISOString();
			
			window.requestAnimationFrame(function() { 
				writeBatchedLogs(logData, fileList, 0); 
			});

		} else {
			fileManager.resumeUpload(projectId);
		}
	}

	function writeBatchedLogs(logData, fileList, offset) {
		var batchsize = 500;
		uploadLog("Building upload list ("+ Math.min(offset + batchsize, fileList.length) + ")");
		var logFileList = [];
		for(var i = offset; i < Math.min(offset + batchsize, fileList.length); i++) {
			logFileList.push(fileList[i].webkitRelativePath);
		}
		logData.filelist = JSON.stringify(logFileList);
		var promise = ajaxPost("/api/logupload", logData);
		promise.success = function(event) {
			if(fileList.length > offset+batchsize) {
				window.requestAnimationFrame(function() { 
					writeBatchedLogs(logData, fileList, offset + batchsize); 
				});
			} else {
				fileManager.resumeUpload(logData.project_id);
			}
		};
	}

	// function uploadComplete() {
	// 	if(parseInt(document.getElementById('progress-number').innerHTML) >= persistentUploadData.restoreCount) {
	// 		var uploadOutput = document.getElementById("upload-messages");
	// 		var completeNode = document.createElement("p");
	// 		completeNode.innerHTML = "Upload complete!";
	// 		uploadOutput.appendChild(completeNode);
	// 	}
	// }

	// function delayedUploadAwsFile(index, isResume) {
	// 	var file = document.getElementById('dir-input').files[index];
	// 	var projectId = persistentUploadData.uploadProject;
	// 	var data = {};
	// 	data.filePath = file.webkitRelativePath;
	// 	data.fileType = file.type;
	// 	data.project_id = projectId;
	// 	data.resume = isResume;
	// 	var promise = ajaxPost("/api/putfileaccesstoken", data);
	// 	promise.success = function(authEvent) {
	// 		if(authEvent.status == 2) {
	// 			//subtract value from total files
	// 			persistentUploadData.restoreCount--;
	// 			document.getElementById('total-files').innerHTML = persistentUploadData.restoreCount;

	// 			if(index + 10 < persistentUploadData.uploadCount) {
	// 				window.requestAnimationFrame(function() {
	// 					delayedUploadAwsFile(index + 10, isResume);
	// 				});
	// 			} else {
	// 				uploadComplete();
	// 			}
	// 			return;
	// 		}
	// 		var fileList2 = document.getElementById('dir-input').files;
	// 		fileReader = new FileReader();
	// 		fileReader.onload = function(fileEvent) {
	// 			var fileData = fileEvent.target.result;
	// 			var contentType = file.type;
	// 			var headers = authEvent.headers;
	// 			headers['content-type'] = contentType;

	// 			var putPromise = ajaxPut(authEvent.url, fileData, headers);
	// 			putPromise.success = function(event) {
	// 				document.getElementById("progress-number").innerHTML = parseInt(document.getElementById("progress-number").innerHTML) + 1;
	// 				var data = {"project_id": projectId, "filepath": file.webkitRelativePath};
	// 				ajaxPost('/api/confirmupload', data);
	// 			};

	// 			putPromise.failure = function(event) {
	// 				var errorOutput = document.getElementById("upload-messages");
	// 				var errorNode = document.createElement("p");
	// 				errorNode.innerHTML = "Failed to upload " + authEvent.clean_file + ".";
	// 				errorOutput.appendChild(errorNode);
	// 				console.error("Failed to upload " + authEvent.clean_file + ".");
	// 				//save take url, fileData and headers
	// 				persistentUploadData.uploadError.push(index);
	// 			};

	// 			putPromise.finally = function(event) {
	// 				var errorIndex = persistentUploadData.uploadError.indexOf(index);
	// 				if(errorIndex > -1) {
	// 					persistentUploadData.uploadError.splice(errorIndex, 1);						
	// 					window.requestAnimationFrame(function() {
	// 						delayedUploadAwsFile(index, isResume);
	// 					});
	// 				}

	// 				if(index + 10 < persistentUploadData.uploadCount) {
	// 					window.requestAnimationFrame(function() {
	// 						delayedUploadAwsFile(index + 10, isResume);
	// 					});
	// 				} else {
	// 					uploadComplete();
	// 				}
	// 			}
	// 		};
	// 		fileReader.readAsArrayBuffer(file);
	// 	};
	// 	promise.failure = function(event) {
	// 		var errorOutput = document.getElementById("upload-messages");
	// 		var errorNode = document.createElement("p");
	// 		errorNode.innerHTML = "Failed to get auth token for " + authEvent.clean_file + ".";
	// 		errorOutput.appendChild(errorNode);
	// 		console.error("Failed to get auth token for " + authEvent.clean_file + ".");
	// 	};
	// }


	// function resumeUploadAwsFile(index, filesToResume) {
	// 	var file = document.getElementById('dir-input').files[index];
	// 	var projectId = persistentUploadData.uploadProject;
	// 	var data = {};
	// 	data.filePath = file.webkitRelativePath;
	// 	data.fileType = file.type;
	// 	data.project_id = projectId;
	// 	data.resume = true;

	// 	if(filesToResume.indexOf(data.filePath) == -1) {
	// 		//file is duplicate
	// 		if(index + 10 < persistentUploadData.uploadCount) {
	// 			window.requestAnimationFrame(function() {
	// 				resumeUploadAwsFile(index + 10, filesToResume);
	// 			});
	// 		} else {
	// 			uploadComplete();
	// 		}
	// 		return;
	// 	}

	// 	filesToResume.splice(data.filePath, 1);
	// 	var promise = ajaxPost("/api/putfileaccesstoken", data);
	// 	promise.success = function(authEvent) {
	// 		if(authEvent.status == 2) {
	// 			//subtract value from total files
	// 			persistentUploadData.restoreCount--;
	// 			document.getElementById('total-files').innerHTML = persistentUploadData.restoreCount;
	// 			if(index + 10 < persistentUploadData.uploadCount) {
	// 				window.requestAnimationFrame(function() {
	// 					resumeUploadAwsFile(index + 10, filesToResume);
	// 				});
	// 			} else {
	// 				uploadComplete();
	// 			}
	// 			return;
	// 		}
	// 		var fileList2 = document.getElementById('dir-input').files;
	// 		fileReader = new FileReader();
	// 		fileReader.onload = function(fileEvent) {
	// 			var fileData = fileEvent.target.result;
	// 			var headers = authEvent.headers;
				
	// 			var putPromise = ajaxPut(authEvent.url, fileData, headers);
	// 			putPromise.success = function(event) {
	// 				document.getElementById("progress-number").innerHTML = parseInt(document.getElementById("progress-number").innerHTML) + 1;
	// 				var data = {"project_id": projectId, "filepath": file.webkitRelativePath};
	// 				ajaxPost('/api/confirmupload', data);
	// 				document.getElementById("loading-spinner").style.display="none";
	// 			};

	// 			putPromise.failure = function(event) {
	// 				var errorOutput = document.getElementById("upload-messages");
	// 				var errorNode = document.createElement("p");
	// 				errorNode.innerHTML = "Failed to upload " + authEvent.clean_file + ".";
	// 				errorOutput.appendChild(errorNode);
	// 				console.error("Failed to upload " + authEvent.clean_file + ".");
	// 				//save take url, fileData and headers
	// 				persistentUploadData.uploadError.push(index);
	// 			};

	// 			putPromise.finally = function(event) {
	// 				var errorIndex = persistentUploadData.uploadError.indexOf(index);
	// 				if(errorIndex > -1) {
	// 					persistentUploadData.uploadError.splice(errorIndex, 1);
	// 					window.requestAnimationFrame(function() {
	// 						resumeUploadAwsFile(index, filesToResume);
	// 					});
	// 				}

	// 				if(index + 10 < persistentUploadData.uploadCount) {
	// 					window.requestAnimationFrame(function() {
	// 						resumeUploadAwsFile(index + 10, filesToResume);
	// 					});
	// 				} else {
	// 					uploadComplete();
	// 				}
	// 			}
	// 		};
	// 		fileReader.readAsArrayBuffer(file);
	// 	};
	// 	promise.failure = function(event) {
	// 		var errorOutput = document.getElementById("upload-messages");
	// 		var errorNode = document.createElement("p");
	// 		errorNode.innerHTML = "Failed to get auth token for " + authEvent.clean_file + ".";
	// 		errorOutput.appendChild(errorNode);
	// 		console.error("Failed to get auth token for " + authEvent.clean_file + ".");
	// 	};
	// }


	function readableFileSize(rawsize) {
		var readable = "";
		if (rawsize > 1024 * 1024 * 1024) {
			readable = (Math.round(rawsize * 100 / (1024 * 1024 * 1024)) / 100).toString() + ' GB';
		} else if (rawsize > 1024 * 1024) {
			readable = (Math.round(rawsize * 100 / (1024 * 1024)) / 100).toString() + ' MB';
		} else if (rawsize > 1024) {
			readable = (Math.round(rawsize * 100 / 1024) / 100).toString() + ' KB';
		} else {
			readable = rawsize + ' bytes';
		}

		return readable;
	}
	// function printFiles(e) {
	// 	var fileList = document.getElementById('dir-input').files;
	// 	var total = 0;
	// 	for (var i = 0, file; file = fileList[i]; i++) {
	// 		total += file.size;
	// 	}
	// 	document.getElementById('dir-info').innerHTML = "Total size: " + readableFileSize(total);
	// 	document.getElementById('progress-number').innerHTML = 0;
	// 	document.getElementById('total-files').innerHTML = fileList.length;
	// }

	document.getElementById('dir-input').addEventListener("click", function() {
		document.getElementById("loading-spinner").style.display="block";
	});

	document.getElementById('dir-input').addEventListener("change", function() {
		fileManager.process();
		document.getElementById("loading-spinner").style.display="none";
		document.getElementsByClassName("upload-data")[0].disabled = false;
	});


	function addClientButton_click(event) {
		var projectId = this.getAttribute("data-data");
		var inputFields = this.parentNode.getElementsByTagName("input");
		var subdomain = inputFields.subdomain.value;

		var postData = {"project_id": projectId, "subdomain": subdomain};
		var promise = ajaxPost("/api/addprojecttoaccount", postData);
		promise.success = function(response) {
			location.reload();
		};

		promise.failure = function(response) {
			console.warn("Communication failure", response);
		};
	}

	function removeClientButton_click(event) {
		var projectId = this.getAttribute("data-data");
		var clientId = this.getAttribute("data-client");

		var postData = {"project_id": projectId, "client_id": clientId};
		var promise = ajaxPost("/api/removeprojectfromaccount", postData);
		promise.success = function(response) {
			location.reload();
		};

		promise.failure = function(response) {
			console.warn("Communication failure", response);
		};
	}

	function editButton_click(event) {
		this.parentNode.parentNode.style="display: none";
		this.parentNode.parentNode.nextElementSibling.style="display: table-row";
	}

	function cancelButton_click(event) {
		this.parentNode.parentNode.style="display: none";
		this.parentNode.parentNode.previousElementSibling.style="display: table-row";
	}

	function saveButton_click(event) {
		this.parentNode.parentNode.style.display="none";
		this.parentNode.parentNode.previousElementSibling.style.display="table-row";

		var projectId = this.getAttribute("data-data");

		var inputFields = this.parentNode.parentNode.getElementsByTagName("input");
		var selectFields = this.parentNode.parentNode.getElementsByTagName("select");
		var bucket = selectFields.bucket.value;
		var folder = inputFields.folder.value;
		var displayName = inputFields.display_name.value;

		var postData = {};
		postData.project_id = projectId;
		postData.bucket = bucket;
		postData.folder = folder;
		postData.display_name = displayName;

		var promise = ajaxPost("/api/editproject", postData);
		promise.success = function(response) {
	// 	//TODO: instead of reload, update display section
	location.reload();
};

promise.failure = function(response) {
	console.warn("Communication failure", response);
};
}

function closeModal_click(event) {
	var overlay = document.getElementsByClassName("modal-overlay")[0];
	var popup = document.getElementsByClassName("modal-popup")[0];

	overlay.classList.remove("make-visible");
	popup.classList.remove("make-visible");
}
</script>
</html>