211 lines
6.8 KiB
Cheetah
211 lines
6.8 KiB
Cheetah
{{define "base"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="/static/css/gridbase.css" type="text/css" />
|
|
<title>torrent-project</title>
|
|
<script>
|
|
function openTab(evt, tabName) {
|
|
var i, x, tablinks;
|
|
x = document.getElementsByClassName("tab");
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablink");
|
|
for (i = 0; i < x.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" activeButton", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " activeButton";
|
|
}
|
|
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
function myWebsocketStart()
|
|
{
|
|
|
|
var torrentLinkSubmit = document.getElementById('torrentLinkSubmit');
|
|
var magnetLink = document.getElementById('magnetLink');
|
|
var modal = document.getElementById('addTorrentModal');
|
|
|
|
|
|
var ws = new WebSocket("ws://192.168.1.141:8000/websocket");
|
|
|
|
ws.onopen = function()
|
|
{
|
|
// Web Socket is connected, send data using send()
|
|
ws.send("ping");
|
|
var myTextArea = document.getElementById("loggerData");
|
|
myTextArea.innerHTML = myTextArea.innerHTML + "\n" + "First message sent";
|
|
};
|
|
|
|
ws.onmessage = function (evt)
|
|
{
|
|
var myTextArea = document.getElementById("loggerData");
|
|
myTextArea.innerHTML = myTextArea.innerHTML + "\n" + evt.data
|
|
if(evt.data == "pong") {
|
|
setTimeout(function(){ws.send("ping");}, 2000);
|
|
}
|
|
};
|
|
|
|
ws.onclose = function()
|
|
{
|
|
var myTextArea = document.getElementById("loggerData");
|
|
myTextArea.innerHTML = myTextArea.innerHTML + "\n" + "Connection closed";
|
|
};
|
|
|
|
|
|
torrentLinkSubmit.onclick = function(e) {
|
|
e.preventDefault();
|
|
|
|
var magnetLinkjs = magnetLink.value;
|
|
|
|
ws.send(magnetLinkjs);
|
|
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function sendEvent(message)
|
|
{
|
|
ws.send(message);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<!-- The addlink Modal -->
|
|
<div id="addTorrentModal" class="addTorrentModal">
|
|
|
|
<!-- Modal content -->
|
|
<div class="addTorrentModalContent">
|
|
<span class="addTorrentModalClose">×</span>
|
|
<form id="torrentLinkForm" action="#" method="post">
|
|
Input Magnet Link: <input type="text" id="magnetLink">
|
|
<button id="torrentLinkSubmit">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- The addTorrent Modal -->
|
|
<div id="addTorrentFileModal" class="addTorrentModal">
|
|
|
|
<!-- Modal content -->
|
|
<div class="addTorrentModalContent">
|
|
<span class="addTorrentFileModalClose">×</span>
|
|
Input Torrent File: <input type="file" name="torrentFile">
|
|
<button id="torrentFileSubmit">Submit</button>
|
|
</div>
|
|
|
|
</div>
|
|
<body onload="javascript:myWebsocketStart()">
|
|
<div class="wrapper">
|
|
<div class="box navcolumn">
|
|
<hr>
|
|
<ul class="none">
|
|
<li class="liNavcolumn" id="allTorrents"><img class="navcolumnImage" src="/static/images/iconTorrent.png">All Torrents</li><hr>
|
|
<li class="liNavcolumn" id="downloading"><img class="navcolumnImage" src="/static/images/iconDownload.png">Downloading</li><hr>
|
|
<li class="liNavcolumn" id="uploading"><img class="navcolumnImage" src="/static/images/iconUpload.png">Uploading</li><hr>
|
|
<li class="liNavcolumn" id="active"><img class="navcolumnImage" src="/static/images/iconActiveTorrents.png">Active</li><hr>
|
|
<li class="liNavcolumn" id="inactive"><img class="navcolumnImage" src="/static/images/iconInactiveTorrents.png">Inactive</li>
|
|
</ul>
|
|
<hr>
|
|
</div>
|
|
<div class="box navsettings">
|
|
<ul class="navsettingsUl">
|
|
<li class="top" id="addTorrentFile"><img class="imagezoom" src="/static/images/iconAddTorrent.png"></li>
|
|
<li class="top" id="addTorrentLink"><img class="imagezoom" src="/static/images/iconAddTorrentLink.png"></li>
|
|
<li class="top verticalLine" id="deleteTorrent"><img class="imagezoom" src="/static/images/iconDelete.png"></li>
|
|
<li class="top verticalLine" id="startTorrent"><img class="imagezoom" src="/static/images/iconStart.png"></li>
|
|
<li class="top" id="pauseTorrent"><img class="imagezoom" src="/static/images/iconPause.png"></li>
|
|
<li class="top" id="stopTorrent"><img class="imagezoom" src="/static/images/iconStop.png"></li>
|
|
<li class="top verticalLine" id="upTorrent"><img class="imagezoom" src="/static/images/iconScrollUp.png"></li>
|
|
<li class="top" id="downTorrent"><img class="imagezoom" src="/static/images/iconScrollDown.png"></li>
|
|
<li class="top verticalLine" id="rssTorrent"><img class="imagezoom" src="/static/images/iconRss.png"></li>
|
|
<li class="top verticalLine" id="settingsIcon"><img class="imagezoom" src="/static/images/iconSettings.png"></li>
|
|
</div>
|
|
<div class="box torrentlist">
|
|
<table>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Size</th>
|
|
<th>Progress</th>
|
|
<th>Status</th>
|
|
<th>Seeds</th>
|
|
<th>Peers</th>
|
|
<th>Down Speed</th>
|
|
<th>Up Speed</th>
|
|
<th>ETA</th>
|
|
<th>Ratio</th>
|
|
<th>Avail.</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="box torrentdetails">
|
|
|
|
<div>
|
|
<button class="tablink activeButton" onclick="openTab(event, 'General')">General</button>
|
|
<button class="tablink" onclick="openTab(event, 'Peers')">Peers</button>
|
|
<button class="tablink" onclick="openTab(event, 'Files')">Files</button>
|
|
<button class="tablink" onclick="openTab(event, 'Speed')">Speed</button>
|
|
<button class="tablink" onclick="openTab(event, 'Logger')">Logger</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="General" class="tab defaultTab">
|
|
<h2>General</h2>
|
|
<p>General Information</p>
|
|
</div>
|
|
|
|
<div id="Peers" class="tab">
|
|
<h2>Peers</h2>
|
|
<table>
|
|
<tr>
|
|
<th>IP</th>
|
|
<th>Client</th>
|
|
<th>Flags</th>
|
|
<th>Percent</th>
|
|
<th>Down Speed</th>
|
|
<th>Up Speed</th>
|
|
<th>Reqs</th>
|
|
<th>Uploaded</th>
|
|
<th>Downloaded</th>
|
|
<th>Peer dl.</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="Files" class="tab">
|
|
<h2>Files</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Size</th>
|
|
<th>Done</th>
|
|
<th>Percent</th>
|
|
<th>Priority</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="Speed" class="tab">
|
|
<h2>Speed</h2>
|
|
<p>Speed Graph Here</p>
|
|
</div>
|
|
|
|
<div id="Logger" class="tab">
|
|
<h2>Logger</h2>
|
|
<p id="loggerData">Logger lines here</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script type="text/javascript" src="/static/js/addTorrents.js"></script>
|
|
<footer>Icons by <a href="https://icons8.com">icons8</a>
|
|
</html>
|
|
{{end}} |