Robware/View/Gallery/manage.view

@Title{Gallery}@
@CSS{
	#main-header .header{
		box-shadow:none !important;
	}

	#tabs{
		background:#f44336;
		margin:-20px;
		margin-bottom:10px;
		position:fixed;
		width:100%;
		box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
		overflow-x:auto;
		white-space:nowrap;
	}

	#tabs a{
		display:inline-block;
		color:#ffcdd2;
		padding:15px 30px;
		text-decoration:none;
		text-transform: uppercase;
	}
	
	#tabs a.active{
		color:#fff;
		border-bottom:3px solid #fff;
	}
	
	.image{
		width:25%;
		display:inline-block;
		vertical-align:top;
		text-align:center;
	}
	
	.image.selected>div{
		background:#e57373;
	}
	
	.image.selected>div:hover{
		background:#ef5350;
	}
	
	.image input[type=checkbox]{
		display:none;
	}
	
	.image>div:hover{
		background:#bdbdbd;
	}
	
	.image>div{
		margin:5px;
		padding:5px;
		background:#e0e0e0;
	}
}@
@CSSMed{
	@media(orientation:portrait){
		.image{
			width:33.3%;
		}
	}
}@
@CSSSmall{
	@media(orientation:portrait){
		#albums td:nth-child(3), #albums th:nth-child(3){
			display:none;
		}
		
		.image{
			width:50%;
		}
	}
	
	@media(orientation:landscape){
		.image{
			width:33.3%;
		}
	}
	
	#albums td:first-child, #albums th:first-child{
		display:none;
	}
	
	table{
		width:100%;
	}
	
	#albums td:last-child, #albums th:last-child, #albums td:nth-child(3), #albums th:nth-child(3){
		width:1px;
	}
}@
@ButtonsRight{
	<button onclick="Navigate('/gallery/createalbum/')" title="Create Album">
		<img src="/images/add_album.svg" alt="Add Album" />
	</button>
}@
@JavaScript{
	$(function(){
		$("#tabs-content").css("margin-top",$("#tabs").height()+"px");
	
		$("#tabs>a").click(function(){
			$("#tabs-content>*").hide();
			$($(this).attr("href")).show();
			$("#tabs>a").removeClass("active");
			$(this).addClass("active");
			
			return false;
		});
		
		$("#tabs a.active").click();
		
		$(".image input[type=checkbox]").click(function(){
			return false;
		});
		
		function SetupSelectedImageClass(elem){
			var tick=elem.find("input[type=checkbox]");
			if (tick.prop("checked"))
				elem.addClass("selected");
			else
				elem.removeClass("selected");
		}
		
		function ApplyImageClick(){
			$(".image").click(function(){
				var tick=$(this).find("input[type=checkbox]");
				tick.prop("checked",!tick.prop("checked"));

				SetupSelectedImageClass($(this));
			});
		}
		
		$(".image").each(function(e){ // refresh hack
			SetupSelectedImageClass($(this));
		});
		
		$("#selectAlbumOld").change(function(){
			$.ajax("/gallery/jsonLoadAlbum/"+this.selectedIndex).done(function(data){
				var images=JSON.parse(data);
				html="";
				for (i=0;i<images.length;i++)
					html+='<div class="image">'+
						'<div>'+
							'<img src="/'+images[i].ThumbnailPath+'" alt="'+images[i].ImageTitle+'" />'+
							'<span>'+images[i].ImageTitle+'</span>'+
							'<input type="checkbox" value="'+images[i].ImageId+'" name="selected[]" />'+
						'</div>'+
					'</div>';
				if (html=="")
					html="<p>There are no images in this album</p>";
				$("#imageSelector").html(html);
				ApplyImageClick();
			});
		});
		
		ApplyImageClick();
	});
}@
@Body{
<div id="tabs">
	<a href="#images">Images</a><a href="#albums">Albums</a><a class="active" href="#organise">Organise</a>
</div>
<div id="tabs-content" style="margin-top:55px"> 
	<div id="images">
		<h3>New Image</h3>
		<form action="/gallery/upload/" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td><label for="imageTitle">Image title:</label></td>
					<td><input type="text" name="imageTitle" id="imageTitle" value="<?=$image->ImageTitle?>" /></td>
				</tr>
				<tr>
					<td><label for="imageDesc">Image description</label></td>
					<td><textarea name="imageDesc" id="imageDesc"><?=$image->ImageDescription?></textarea></td>
				</tr>
				<tr>
					<td><label for="imageFile">Select image:</label></td>
					<td><input type="file" name="imageFile" id="imageFile" /></td>
				</tr>
				<tr>
					<td colspan="2" align="right">
						<button type="submit" title="Upload" name="imageUpload">
							<img src="/images/send.svg" alt="Upload" />
						</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div id="albums">
		<form action="" method="post" id="manageForm">
			<input type="hidden" name="formSubmitted" value="yes" />
			<table>
				<tr>
					<th>ID</th>
					<th>Title</th>
					<th>Timestamp</th>
					<th>Actions</th>
				</tr>
				<?php foreach ($albums as $album){?>
				<tr>
					<td><?=$album->AlbumId?></td>
					<td><a href="/gallery/view/<?=$album->AlbumUrl?>"><?=$album->AlbumTitle?></a></td>
					<td><?=$album->AlbumTimestamp?></td>
					<td>
						<button value="<?=$album->AlbumId?>" name="delete" title="Delete">
							<img src="/images/delete.svg" alt="Delete" />
						</button>
						<button value="/blog/edit/<?=$album->AlbumId?>" name="edit" title="Edit" class="jsNav">
							<img src="/images/edit.svg" alt="Edit" />
						</button>
					</td>
				</tr>
				<?php } ?>
			</table>
		</form>
	</div>
	<div id="organise">
		<form action="/gallery/move" method="post">
			<label for="selectAlbumOld">Move from album </label>
			<select id="selectAlbumOld" name="selectAlbumOld">
				<option value="0">No album</option>
				<?php foreach ($albums as $album)
					echo '<option value="',$album->AlbumId,'">',$album->AlbumTitle,'</option>';
				?>
			</select>
			<label for="selectAlbumNew"> to album </label>
			<select id="selectAlbumNew" name="selectAlbumNew">
				<option value="0">No album</option>
				<?php foreach ($albums as $album)
					echo '<option value="',$album->AlbumId,'">',$album->AlbumTitle,'</option>';
				?>
			</select>
			<input type="submit" name="moveImages" value="go" />
			<div id="imageSelector">
				<?php
				foreach ($images as $image)
					echo '<div class="image">',
							'<div>',
								'<img src="/',$image->ThumbnailPath,'" alt="',$image->ImageTitle,'" />',
								'<span>',$image->ImageTitle,'</span>',
								'<input type="checkbox" value="',$image->ImageId,'" name="selected[]" />',
							'</div>',
						'</div>';
				?>
			</div>
		</form>
	</div>
</div>
}@