casbah
Version:
Contract Administration Site * Be Architecural Heroes *
162 lines (130 loc) • 4.85 kB
HTML
<style>
.picBox{ max-height:400px; max-width:100%;}
.columns2{column-count:2;}
.columns4{column-count:4;}
.checklistArch{column-count:4; line-height: 120%;font-size:10pt;}
.topMarginZero{margin-top:0;}
@media print {
div.panel, div.panel-default {
page-break-after: always ;
}
}
.segoe, h1, h2, h3, h4{font-family:segoe UI, sans-serif;}
</style>
<script type='text/javascript'>
//ensure project number set. What about empty uploads folder ie. uninitialized
if (typeof localStorage.getItem("project_number")=="undefined") {
var pnum=prompt("Project number");
if (pnum!=="" && pnum!=null) {localStorage.getItem("project_number", pnum)}
}
//handlebars template engine setup
Handlebars.registerHelper("collection_log_head", function(str, options){
return collection_log.head;
});
////////////////////////
var collection_log={};
collection_log.hi=new casbah.Highlighter("highlite");
collection_log.refresh=function(){
//var fd=jQuery.param({command:"LOG", project_number:localStorage("project_number")});
var fd=new FormData();
fd.append("action","LOG");
fd.append("project_number", localStorage.getItem("project_number"));
$.ajax({
data:fd,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
error:function(err){console.log("Error getting photo album names:",err);},
success:function(result){
if(typeof result.files=="undefined") result.names=[];
var html=collection_log.template(result);
$("#collection_log_placeholder").html(html);
},
type:"POST",
url:"/gallery"
});
};
collection_log.add=function(){
var name=prompt("Name of new photo collection");
if (name == "" || name == null){return;}
var fd=new FormData();
fd.append("action", "ADD");
fd.append("collection_name", name);
fd.append("project_number", localStorage.getItem("project_number"));
$.ajax({
data:fd,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
error:function(err){console.log("collection log error:",err);},
success:function(result){
if(typeof result.files=="undefined") result.names=[];
var html=collection_log.template(result);
$("#collection_log_placeholder").html(html);
},
type:"POST",
url:"/gallery"
});
};
collection_log.goto=function(ev){
var name=$(ev.target).text();
localStorage.setItem("collection_name", name);
casbah.view("collection.html");
};
collection_log.drop=function(ev){
ev.preventDefault();
var folder=$(ev.target).text();
var fd=new FormData();
fd.append("action","UPLOAD");
fd.append("project_number", localStorage.getItem("project_number"));
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
console.log("name:", ev.dataTransfer.files[i].name);
console.log("filetype:", ev.dataTransfer.files[i].type);
fd.append(ev.dataTransfer.files[i].name, ev.dataTransfer.files[i]);
}
//https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
//processData:false prevents 'append called on an object that does not implement interface FormData' error
fd.append("collection_name", folder);
fd.append("upload_file",true);
$.ajax({
data:fd,
contentType:false,
error:function(err){console.log("Error uploading:",err);},
processData:false,
success:function(result){ console.log("Success uploading");},
type:"POST",
url:"/gallery"
});
};
collection_log.template=Handlebars.compile($("#collection_log").html());
collection_log.head=$("#collection_log_head").html();
//Render page
collection_log.refresh();
</script>
<div id="collection_log_placeholder"></div>
<template id="collection_log" type="text/x-handlebars-template">
<div class="container">{{{photoLogHead}}}
<div class="panel panel-default page">
<div class="panel-heading" >project name</div>
<div class="panel-body">
The following is a list of photograph collections for this project. Click on each one to open. Drop image files on each one to ammend. Click <a onclick="collection_log.add();">here</a> to create a new sheet-set.
</div>
<!-- List group -->
<ul class="list-group">
{{#each dirs}}
<li class="list-group-item"
onmouseenter="collection_log.hi.light(this);"
onmouseleave="collection_log.hi.dark(this);"
ondragover="collection_log.hi.light(this);"
ondragleave="collection_log.hi.dark(this);"
onclick="collection_log.goto(event);"
ondrop="collection_log.drop(event);"
>{{this}}</li>
{{/each}}
</ul>
</div>
</div>
</template>
<template id="collection_log_head" type="text/x-handlebars-template">
<div class="row">
<div class="col-xs-8"><img src='/uploads/logo.png'></div>
<div class="col-xs-4"><h2 class="topMarginZero segoe">Collection Log</h2></div>
</div>
</template>