前回に引き続きサンプルに機能を追加した。
ひとつのディレクトリに大量のファイルがある時、一定数のファイルリストしか戻してこないので、
listFilesリクエストにpageoffsetを与えて改ページして、表示しきれないファイルリストを表示できるようにした。
今回から、さすがに長くなってきたので、htmlとjavascirptを別ファイルにした。
動作するサンプルはこちら
htmlとjsをまとめたzipファイルはこちら
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pogoplugTest</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js">
</script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>pogoplug api サンプル</h1>
<form id="loginForm" action="GET">
Step1:ログインします。
<div>
<ul>
<li>
mail: <input type="text" id="mailAddress" />
</li>
<li>
password: <input type="password" id="password" />
</li>
</ul>
</div><input type="button" id="login" value="Login" />
</form>
<form id="deviceLists" action="GET">
Step2:登録されているpogoplugのリストを取得します。<input type="button" id="getdevices" value="getDevices" />
</form>
<form id="serviceLists" action="GET">
Step2:選択したdeviceにぶらさがっているサービス(ストレージ等）のリストを取得します。
<div id="devicedata">
</div>
<input type="button" id="getservices" value="getServices" />
</form>
<form id="fileLists" action="GET">
Step3:選択したserviceのルートにあるファイルの一覧を取得します。
<div id="servicedata">
</div>
<input type="button" id="getfiles" value="getFiles" />
</form>
<form id="downloadform" action="GET">
Step4:リンクをクリックするとダウンロードできます。<br />
ボタンを押すと、そのディレクトリに移動します。<br />
下の方向ボタンで、ページを切り替えて表示しきれなかったファイルリストを表示します。<br />
<input type="button" id="previousPage" value="<<" />
<input type="button" id="nextPage" value=">>" />
<div id="filedata">
</div>
</form>
</body>
</html>
main.js
$(document).ready(function(){
var valtoken = "";
$("#deviceLists").hide();
$("#serviceLists").hide();
$("#fileLists").hide();
$("#downloadform").hide();
//Loginボタンをクリックしたときに発行されます。
//valtokenを取得することで、次以降のステップのサービスが利用できるようにします。
$("#login").click(function(){
$.get("https://service.pogoplug.com/svc/api/loginUser?email="
+ $("#mailAddress").val() +
"&password=" + $("#password").val(), function(data){
jsondata = jQuery.parseJSON(data);
valtoken = jsondata.valtoken ;
$("#loginForm").hide();
$("#deviceLists").show();
});
});
//getDevicesボタンをクリックしたときに発行されます。
//ぶら下がっているpogoplugのリストをセレクトボックスに表示し、、次以降のステップで選択できるようにします。
$("#getdevices").click(function(){
$.get("https://service.pogoplug.com/svc/api/listDevices?valtoken="
+ valtoken, function(data){
jsondata = jQuery.parseJSON(data);
var $select = $('<select id="devices" />');
$.each(jsondata.devices, function() {
$('<option value='+ this.deviceid +' />').append(
this.name
).appendTo($select);
});
$('#devicedata').empty().append($select);
$("#deviceLists").hide();
$("#serviceLists").show();
});
});
//getServicesボタンをクリックしたときに発行されます。
//選択したpogoplugにぶら下がっているストレージ等のリストをセレクトボックスに表示し、、次以降のステップで選択できるようにします。
$("#getservices").click(function(){
$.get("https://service.pogoplug.com/svc/api/listServices?valtoken="
+ valtoken + "&deviceid=" + $("#devices").val(), function(data){
jsondata = jQuery.parseJSON(data);
var $select = $('<select id="services" />');
$.each(jsondata.services, function() {
$('<option value='+ this.serviceid +' />').append(
this.name
).appendTo($select);
});
$('#servicedata').empty().append($select);
$("#serviceLists").hide();
$("#fileLists").show();
});
});
var pageIndex = 0;
function createQueryForMoveDirectory(targetId)
{
pageIndex = 0;
return createQueryForListFiles(targetId);
}
function createQueryForNextPage()
{
pageIndex++;
if(parentList.length == 0)
{
return createQueryForListFiles(null,pageIndex);
}else{
return createQueryForListFiles(parentList[parentList.length -1],pageIndex);
}
}
function createQueryForPreviousPage()
{
if(pageIndex > 0){
pageIndex--;
}
if(parentList.length == 0)
{
return createQueryForListFiles(null,pageIndex);
}else{
return createQueryForListFiles(parentList[parentList.length -1],pageIndex);
}
}
function createQueryForListFiles(parentId,pageIndex)
{
var listFilesUrl = "https://service.pogoplug.com/svc/api/listFiles?valtoken=" +
valtoken +
"&deviceid=" +
$("#devices").val() +
"&serviceid=" +
$("#services").val();
if(parentId){
listFilesUrl += "&parentid=" + parentId;
}
if(pageIndex){
listFilesUrl += "&pageoffset=" + pageIndex;
}
return listFilesUrl;
}
var parentList = [];
function createfileLink(data)
{
jsondata = jQuery.parseJSON(data);
var $ul = $('<ul />');
if (parentList.length == 1) {
$('<li />').append($('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory(), function(data){
parentList.pop();createfileLink(data);
});
}).val("..")).appendTo($ul);
}else if(parentList.length > 1)
{
$('<li />').append($('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory(parentList[parentList.length-2]), function(data){
parentList.pop();createfileLink(data);
});
}).val("..")).appendTo($ul);
}
$.each(jsondata.files, function()
{
//ファイルタイプがファイルだったらリンクを、ディレクトリだったらサブディレクトリのファイルリスト取得のリンクを作成
if(this.type == 0)
{
$('<li />').append(
$('<a href="https://service.pogoplug.com/svc/files/'
+ valtoken + '/'
+ $("#devices").val() + '/' +
$("#services").val() + '/' + this.fileid
+ '/dl/" />').text(this.name)).appendTo($ul);
}else
{
var fileid=this.fileid;
$('<li />').append(
$('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory( fileid), function(data){parentList.push(fileid);createfileLink(data);});
}).val(this.name)).appendTo($ul);
}
});
$('#filedata').html($ul);
$("#fileLists").hide();
$("#downloadform").show();
}
//getFilesボタンをクリックしたときに発行されます。
//選択したストレージのルートに存在するファイルをダウンロードするためのリンクをはります。
$("#getfiles").click(function(){
$.get(createQueryForMoveDirectory(), function(data){createfileLink(data);});
});
$("#nextPage").click(function(){
$.get(createQueryForNextPage(), function(data){createfileLink(data);});
});
$("#previousPage").click(function(){
$.get(createQueryForPreviousPage(), function(data){createfileLink(data);});
});
});
