Initial commit, just the basic webui layout and basic golang backend with websocket communication tested.
This commit is contained in:
161
templates/home.tmpl
Normal file
161
templates/home.tmpl
Normal file
@@ -0,0 +1,161 @@
|
||||
{{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 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";
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<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="addTorrent"><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>Done</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>
|
||||
<footer>Icons by <a href="https://icons8.com">icons8</a>
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user