index.mobile.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta http-equiv="cache-control" content="no-cache" />
  7. <meta http-equiv="expires" content="0" />
  8. <meta http-equiv="pragma" content="no-cache" />
  9. <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
  10. <title>Transmission Web Control Mobile</title>
  11. <!-- Style sheet -->
  12. <link rel="stylesheet" type="text/css" href="tr-web-control/style/base.mobile.css?v=20180906" />
  13. <link rel="stylesheet" type="text/css" href="tr-web-control/script/jquery/mobile/jquery.mobile-1.4.5.min.css?v=20170426"/>
  14. <!-- Base class library -->
  15. <script type="text/javascript" src="tr-web-control/script/jquery/jquery-1.12.4.min.js"></script>
  16. <script type="text/javascript" src="tr-web-control/script/jquery/jquery.form.js"></script>
  17. <script type="text/javascript" src="tr-web-control/script/jquery/json2.min.js"></script>
  18. <script type="text/javascript" src="tr-web-control/script/jquery/Base64.js"></script>
  19. <script type="text/javascript" src="tr-web-control/script/jquery/mobile/jquery.mobile-1.4.5.min.js?v=20170426"></script>
  20. <!-- -->
  21. <!-- System class library -->
  22. <script type="text/javascript" src="tr-web-control/script/min/public.min.js?v=20180906"></script>
  23. <script type="text/javascript" src="tr-web-control/script/other/ua-parser.min.js?v=20170522"></script>
  24. <script type="text/javascript" src="tr-web-control/script/min/transmission.min.js?v=20180906"></script>
  25. <script type="text/javascript" src="tr-web-control/script/min/transmission.torrents.min.js?v=20180906"></script>
  26. <script type="text/javascript" src="tr-web-control/script/min/system.mobile.min.js?v=20180906"></script>
  27. </head>
  28. <body>
  29. <!-- Home -->
  30. <div data-role="page" id="main-page">
  31. <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
  32. <h1 id="page-title">Transmission Web Control Mobile</h1>
  33. <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" onclick="system.showContent('home');"></a>
  34. <a href="#navPanel" data-icon="bars" data-iconpos="notext" data-direction="reverse"></a>
  35. </div>
  36. <div data-role="header" data-theme="z" data-position="fixed" data-tap-toggle="false" data-fullscreen="true">
  37. <div id="torrent-page-bar" class="page-bar" style="display:none;">
  38. <a id="page-prev" href="javascript:void(0);" class="iconlabel icon-arrow-left"></a>
  39. <a id="page-number" class="page-number"></a>
  40. <a id="page-next" href="javascript:void(0);" class="iconlabel icon-arrow-right"></a>
  41. </div>
  42. </div>
  43. <!-- 导航栏 -->
  44. <div data-role="panel" id="navPanel" data-display="overlay" data-position="right">
  45. <ul data-role="listview" data-divider-theme="a" data-theme="c">
  46. <li data-role='list-divider'><span system-lang="title.left"></span></li>
  47. <li data-icon="plus"><a href="#" onclick="showAddTorrent();"><span system-lang="toolbar['add-torrent']"></span></a></li>
  48. <li data-icon="gear" style="display:none;"><a href="#"><span system-lang="toolbar['system-config']"></span></a></li>
  49. </ul>
  50. <ul data-role="listview" data-divider-theme="e" data-theme="e" data-icon="false" style="margin-top:15px;">
  51. <li data-role='list-divider' style="padding:0px 10px;">
  52. <table style="width:100%;">
  53. <tr>
  54. <td style="width:70%;"><span system-lang="toolbar['reload-time']"></span></td>
  55. <td style="width:30%;">
  56. <select name="autoreload" id="autoreload" data-role="slider" data-mini="true">
  57. <option value="false" system-lang="toolbar['autoreload-disabled']">Off</option>
  58. <option value="true" system-lang="toolbar['autoreload-enabled']">On</option>
  59. </select>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td><input type="range" name="auto-reload-time" id="auto-reload-time" value="1" min="1" max="100"/></td>
  64. <td><label for="auto-reload-time" system-lang="toolbar['reload-time-unit']"></label></td>
  65. </tr>
  66. </table>
  67. </li>
  68. </ul>
  69. <ul data-role="listview" data-divider-theme="a" data-theme="c" data-icon="false" style="margin-top:15px;">
  70. <li data-role='list-divider'>UI</li>
  71. <li><a href="#" onclick="location.href = 'index.html?devicetype=computer';"><img src="tr-web-control/style/images/computer.png" class="ui-li-icon"/><span system-lang="toolbar['ui-computer']"></span></a></li>
  72. <li><a href="#" onclick="location.href = 'index.original.html';"><img src="tr-web-control/style/images/transmission.png" class="ui-li-icon"/><span system-lang="toolbar['ui-original']"></span></a></li>
  73. </ul>
  74. <ul data-role="listview" data-divider-theme="a" data-theme="c" data-icon="false" style="margin-top:15px;">
  75. <li data-role='list-divider'><span system-lang="title.status"></span></li>
  76. <li id="status" style="display:none;"><span id="status-msg"></span><span id="status-count" class="ui-li-count">0</span></li>
  77. </ul>
  78. </div>
  79. <div data-role="content" style="padding:0px;">
  80. <!-- 种子分类列表 -->
  81. <div id="content-home" style="padding:15px;">
  82. <ul data-role="listview" data-count-theme="e">
  83. <li><a href="#" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'all'});"><span system-lang="tree.all"></span><span id="count-all" class="ui-li-count" style="display:none;">0</span></a></li>
  84. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'downloading'});"><span system-lang="tree.downloading"></span><span id="count-downloading" class="ui-li-count" style="display:none;">0</span></a></li>
  85. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'paused'});"><span system-lang="tree.paused"></span><span id="count-paused" class="ui-li-count" style="display:none;">0</span></a></li>
  86. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'sending'});"><span system-lang="tree.sending"></span><span id="count-sending" class="ui-li-count" style="display:none;">0</span></a></li>
  87. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'check'});"><span system-lang="tree.check"></span><span id="count-check" class="ui-li-count" style="display:none;">0</span></a></li>
  88. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'actively'});"><span system-lang="tree.actively"></span><span id="count-actively" class="ui-li-count" style="display:none;">0</span></a></li>
  89. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'error'});"><span system-lang="tree.error"></span><span id="count-error" class="ui-li-count" style="display:none;">0</span></a></li>
  90. <li><a href="" onclick="system.showContent({page:'torrent-list',type:'torrent-list',data:'warning'});"><span system-lang="tree.warning"></span><span id="count-warning" class="ui-li-count" style="display:none;">0</span></a></li>
  91. </ul>
  92. </div>
  93. <!-- 种子明细列表 -->
  94. <div id="content-torrent-list" _style="padding:0px;overflow: hidden;" data-role="content">
  95. <ul data-role="listview"
  96. data-theme="c" data-dividertheme="d"
  97. data-split-icon="gear" data-split-theme="d"
  98. id="torrent-list"
  99. />
  100. </div>
  101. <!-- 添加种子 -->
  102. <div id="content-add-torrent" style="padding:15px;display:none;">
  103. <label for="torrent-url" system-lang="dialog['torrent-add']['torrent-url']"></label>
  104. <textarea id="torrent-url" style="height:130px;"></textarea>
  105. <label id="dialog-torrent-add-upload-file" for="torrent_upload_file"></label>
  106. <form action="#" method="post" id="torrent_upload_form" enctype="multipart/form-data" target="torrent_upload_frame">
  107. <input type="file" name="torrent_files[]" id="torrent_upload_file" multiple="multiple" />
  108. </form>
  109. <label for="download-dir" system-lang="dialog['torrent-add']['download-dir']"></label>
  110. <input id="download-dir"/>
  111. <label for="used-download-dir" system-lang="dialog['torrent-add']['used-download-dir']"></label>
  112. <select id="used-download-dir" data-mini="true"></select>
  113. <div data-role="fieldcontain">
  114. <label for="autostart" system-lang="dialog['torrent-add']['autostart']"></label>
  115. <select name="autostart" id="autostart" data-role="slider">
  116. <option value="false"></option>
  117. <option value="true"></option>
  118. </select>
  119. </div>
  120. <span id="dialog-torrent-add-nosource" style="display:none;"></span>
  121. <span system-lang="dialog['torrent-add']['tip-torrent-url']"></span><br/>
  122. <span id="dialog-torrent-add-queue" style="display:none;"></span>
  123. <button onclick="addUrl();"><label system-lang="dialog['public']['button-ok']"></label></button>
  124. <button onclick="system.showContent('home');"><label system-lang="dialog['public']['button-cancel']"></label></button>
  125. </div>
  126. </div>
  127. <div data-theme="c" data-role="footer" data-position="fixed" data-tap-toggle="false" style="background:#f3f3f3;">
  128. <!-- 种子操作工具栏 -->
  129. <div id="torrent-toolbar" data-role="content" style="display:none;padding:0px 10px;" data-theme="a">
  130. <div data-role="controlgroup" data-type="horizontal">
  131. <a id="torrent-check-all" data-role="button" data-inline="true" href="#" data-icon="check" data-theme="b">
  132. <span id="torrent-checked-count"></span>
  133. </a>
  134. <a data-role="button" data-inline="true" id="toolbar_start" href="#" onclick="system.changeSelectedTorrentStatus('start',this);">
  135. <span system-lang="toolbar.start"></span>
  136. </a>
  137. <a data-role="button" data-inline="true" id="toolbar_pause" href="#" onclick="system.changeSelectedTorrentStatus('stop',this);">
  138. <span system-lang="toolbar.pause"></span>
  139. </a>
  140. <a data-role="button" data-inline="true" id="toolbar_recheck" href="#" onclick="system.changeSelectedTorrentStatus('verify',this);">
  141. <span system-lang="toolbar.recheck"></span>
  142. </a>
  143. <a data-role="button" data-inline="true" id="toolbar_remove" href="#dialog-torrent-remove-confirm" data-icon="delete" data-iconpos="right">
  144. <span system-lang="toolbar.remove"></span>
  145. </a>
  146. </div>
  147. </div>
  148. <div id="m_statusbar">
  149. <span id="status_alt_speed" style="display:none;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
  150. <span id="status_downloadspeed" class="iconlabel icon-down"></span>
  151. <span id="status_uploadspeed" class="iconlabel icon-up"></span>
  152. <span id="status_freespace" class="iconlabel icon-drive"></span>
  153. </div>
  154. </div>
  155. </div>
  156. <!-- 删除种子确认 -->
  157. <div data-role="popup" id="dialog-torrent-remove-confirm" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
  158. <div data-role="header" data-theme="a" class="ui-corner-top">
  159. <h1 system-lang="dialog['torrent-remove']['title']"></h1>
  160. </div>
  161. <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
  162. <h3 class="ui-title" system-lang="dialog['torrent-remove']['confirm-text']"></h3>
  163. <div data-role="fieldcontain">
  164. <label for="remove-data" system-lang="dialog['torrent-remove']['remove-data']"></label>
  165. <select name="remove-data" id="remove-data" data-role="slider" data-mini="true">
  166. <option value="false"></option>
  167. <option value="true"></option>
  168. </select>
  169. </div>
  170. <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" system-lang="dialog.public['button-cancel']"></a>
  171. <a href="#" onclick="system.changeSelectedTorrentStatus('remove',this,{removeData:$('#remove-data').val()});" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" system-lang="dialog.public['button-ok']"></a>
  172. </div>
  173. </div>
  174. </body>
  175. <script type="text/javascript">
  176. function showAddTorrent()
  177. {
  178. var autostart = system.serverConfig['start-added-torrents'];
  179. $("#autostart").val(autostart.toString()).slider('refresh');
  180. $('#download-dir').val(system.downloadDir);
  181. system.showContent('add-torrent');
  182. $("#navPanel").panel("close");
  183. //将常用目录初始化,并设置默认目录
  184. var $usedDownloadDir = $("#used-download-dir");
  185. $usedDownloadDir.empty();
  186. $.each(transmission.downloadDirs, function( index, dir ) {
  187. $usedDownloadDir.append(new Option(dir, dir));
  188. });
  189. $usedDownloadDir.val(system.downloadDir).selectmenu('refresh', true);
  190. }
  191. function addUrl()
  192. {
  193. var dir = $("#download-dir").val();
  194. var isupload = $("#torrent_upload_file")[0].value!="";
  195. var autostart = ($("#autostart").val()=="true"?true:false);
  196. var url = $("#torrent-url").val();
  197. if (autostart!=system.serverConfig["start-added-torrents"])
  198. {
  199. system.serverConfig["start-added-torrents"] = autostart;
  200. // Start setting parameters
  201. transmission.exec(
  202. {
  203. method:"session-set"
  204. ,arguments: {
  205. "start-added-torrents": autostart
  206. }
  207. }
  208. );
  209. }
  210. if (isupload)
  211. {
  212. // rpc-version 15 stopped using the ../upload interface
  213. if (system.serverConfig["rpc-version"]>=15)
  214. {
  215. var uploaded = 0;
  216. system.uploadTorrentFile("torrent_upload_file",dir,!autostart,function(data,count){ // 回调
  217. uploaded++;
  218. $("#dialog-torrent-add-queue").html(uploaded+"/"+count).show();
  219. if (uploaded==count)
  220. {
  221. $("#dialog-torrent-add-queue").html("").hide();
  222. $("#status").hide();
  223. $("#navPanel").panel("close");
  224. $("#torrent-url").val("");
  225. system.showContent({page:'torrent-list',type:'torrent-list',data:'all'});
  226. // system.showContent('home');
  227. // $("#navPanel").panel("open");
  228. }
  229. if(system.config.nav.labels && data.hashString != null){
  230. system.saveLabelsConfig(data.hashString, labelPage.getLabels());
  231. system.saveConfig();
  232. }
  233. system.reloadData();
  234. });
  235. return;
  236. }
  237. uploadFile(!autostart);
  238. }
  239. else if (url!="")
  240. {
  241. var urls = url.split("\n");
  242. system.addTorrentsToServer(urls,urls.length,autostart,$("#download-dir").val(),function(){
  243. $("#status").hide();
  244. $("#navPanel").panel("close");
  245. });
  246. }
  247. else if(!isupload)
  248. {
  249. $("#dialog-torrent-add-nosource").fadeInAndOut();
  250. }
  251. // 原代码
  252. // var urls = $("#torrent-url").val();
  253. // if (urls=="")
  254. // {
  255. // $("#torrent-url").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").select();
  256. // return;
  257. // }
  258. // urls = urls.split("\n");
  259. // var autostart = ($("#autostart").val()=="true"?true:false);
  260. // system.addTorrentsToServer(urls,urls.length,autostart,$("#download-dir").val(),function(){
  261. // $("#status").hide();
  262. // $("#navPanel").panel("close");
  263. // });
  264. // $("#torrent-url").val("");
  265. // system.showContent('home');
  266. // $("#navPanel").panel("open");
  267. }
  268. // Upload files
  269. function uploadFile(paused,callback){
  270. var options = {
  271. // The upload should be by TR interface
  272. url:"../upload?paused=" + paused
  273. ,type:"POST"
  274. ,dataType:"json"
  275. ,data:{
  276. "X-Transmission-Session-Id":transmission.SessionId
  277. }
  278. ,success:function(data){
  279. //alert(data);
  280. if (callback)
  281. callback();
  282. if(system.config.nav.labels && data.hashString != null){
  283. system.saveLabelsConfig(data.hashString, labelPage.getLabels());
  284. system.saveConfig();
  285. }
  286. thisDialog.dialog("close");
  287. system.reloadData();
  288. }
  289. ,error:function(data){
  290. //alert("error:"+data);
  291. console.log("data:",data);
  292. }
  293. };
  294. $('#torrent_upload_form').ajaxSubmit(options);
  295. }
  296. (function(){
  297. $("#navPanel").on("panelbeforeopen", function(event, ui) {
  298. $("#autoreload").val(system.config.autoReload.toString()).slider('refresh');
  299. $("#auto-reload-time").val(system.config.reloadStep/1000);
  300. if (system.config.autoReload)
  301. {
  302. $("#auto-reload-time").slider("enable");
  303. }
  304. else
  305. {
  306. $("#auto-reload-time").slider("disable");
  307. }
  308. });
  309. $("#autoreload").change(function(){
  310. saveConfig();
  311. });
  312. $("#auto-reload-time").on("slidestop", function(event, ui) {
  313. saveConfig();
  314. });
  315. $("#torrent-check-all").click(function(){
  316. var checked = $(this).data("checked");
  317. if (checked==true)
  318. {
  319. checked = false;
  320. }
  321. else
  322. {
  323. checked = true;
  324. }
  325. $(this).data("checked",checked);
  326. system.control.torrentlist.find("input[type='checkbox']").prop("checked",checked).checkboxradio("refresh");
  327. system.changeTorrentToolbar();
  328. });
  329. $("#used-download-dir").change(function(){
  330. $('#download-dir').val($(this).val());
  331. });
  332. function saveConfig()
  333. {
  334. system.config.autoReload = ($("#autoreload").val()=="true"?true:false);
  335. var value = $("#auto-reload-time").val();
  336. if ($.isNumeric(value))
  337. {
  338. system.config.reloadStep = value * 1000;
  339. }
  340. if (system.config.autoReload)
  341. {
  342. system.reloadData();
  343. $("#auto-reload-time").slider("enable");
  344. }
  345. else
  346. {
  347. clearTimeout(system.autoReloadTimer);
  348. $("#auto-reload-time").slider("disable");
  349. }
  350. system.saveConfig();
  351. };
  352. })();
  353. </script>
  354. </html>