ssv0.github.io/servers.html at main · ssv0/ssv0.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title l10n="Servers">Servers</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/default.css">
	<script src="./lib/init.js"></script>
</head>
<body>
	<script>
	</script>
	<h1 l10n="Servers">Servers:</h1>
	<select id="server_list">
	</select>
	<div class="grid-container">
		<button id="btn_add" l10n="Add">Add</button>
		<button id="btn_sync" l10n="Synchronize">Synchronize</button>
		<button id="btn_offline" l10n="Go offline">Go offline</button>
		<button id="btn_rec" l10n="Add a channel">Add a channel</button>
		<button id="btn_delete" l10n="Forget">Forget</button>
		<button id="home" onclick="window.location.href='./index.html'" l10n="Home">HOME</button>

	</div>
	<div id="outputdiv">
	</div>
	<script type="module">
		const outputdiv=document.getElementById("outputdiv");
		var dropdown=document.getElementById("server_list");

		import * as Earthstar from "./lib/earthstar.web.js";
		import * as Lib from "./lib/lib.js";

		const settings = new Earthstar.SharedSettings();


		document.getElementById("btn_add").addEventListener("click", function() {
			window.location.href = "./server_new.html";
		});

		document.getElementById("btn_sync").addEventListener("click", async function() {
			const server=dropdown.value;

			const peer = new Earthstar.Peer();

			for (const share of settings.shares) {
				const replica = new Earthstar.Replica({
					driver: new Earthstar.ReplicaDriverWeb(share),
					shareSecret: settings.shareSecrets[share],
				});

				peer.addReplica(replica);
			}

			const syncer = peer.sync(server);
			outputdiv.insertAdjacentHTML("beforeend", (t("Syncing")));
			await syncer.isDone();
			outputdiv.insertAdjacentHTML("beforeend", (t("Done")));
			SSsession.setItem("srv_current",server);
			outputdiv.insertAdjacentHTML("beforeend", (`<p>${t("Selected Server:")} ${server}</p>`));
		});

		document.getElementById("btn_rec").addEventListener("click", function() {
			const server=dropdown.value;
			SSsession.setItem("srv_current",server);
			window.location.href = "./server_receive.html";
		});

		document.getElementById("btn_offline").addEventListener("click", function() {
			const server=dropdown.value;
			SSsession.setItem("srv_current",null);
			outputdiv.insertAdjacentHTML("beforeend", (`<p>${t("Offline Mode")} - ${t("Disconnected from")} ${server}</p>`));
		});

		document.getElementById("btn_delete").addEventListener("click", function() {
			const server=dropdown.value;
			if (confirm(`${t("Confirm removing")} ${server} - ${t("Other users can keep using it")}`)) {
				settings.removeServer(server);
				const cserver = SSsession.getItem("srv_current");
				if (cserver.replace(/\/+$/, '') == server.replace(/\/+$/, '')) { // no trailing slashes
					SSsession.removeItem("srv_current");
				}
				outputdiv.insertAdjacentHTML("beforeend", (`<p>${t("Removed:")} ${server}</p>`));
				rendersrvlist();
			}
		});


		function rendersrvlist() {
			dropdown.innerHTML = '';
			const allServers = settings.servers.sort();

			for (var i = 0; i < allServers.length; i++) {
				var option = document.createElement("option");
				option.value = allServers[i];
				option.text = option.value;
				if (option.value === SSsession.getItem("srv_current")) {
					option.selected = true;
				}
				dropdown.appendChild(option);
			}
		}

		rendersrvlist();

	</script>
</body>
</html>