Refactor Privacy to Overview, code cleanup

js/UI/More/More.js

@@ -1,5 +1,5 @@
 import App from "../../App";
-import Privacy from "./Privacy/Privacy";
+import Overview from "./Overview/Overview";
 import Settings from "./Settings/Settings";
 
 
@@ -7,21 +7,21 @@ export default class More {
 	constructor() {
 		this.app = new App()
 		this.config = this.app.config
-		this.privacy = new Privacy()
+		this.overview = new Overview()
 		this.settings = new Settings()
 		this.init()
 	}
 
 	init() {
-		this.privacy.init()
+		this.overview.init()
 		this.settings.init()
 		this.initPager()
 	}
 
 	initPager() {
-		let switcher = document.getElementById("switch")
+		let switcher = document.querySelector(".subswitch")
 		let buttons = switcher.children
-		let subsettings = document.getElementById("subsettings")
+		let subsettings = document.querySelector(".subpages")
 
 		for (let i = 0; i < buttons.length; i++) {
 			let button = buttons[i]

js/UI/More/Overview/Overview.js

@@ -0,0 +1,53 @@
+import App from "../../../App";
+import { analyzeService } from "./analyzer";
+import { privacyBox } from "./tiles";
+import { s, isare } from "../../../Utils/StringUtils";
+
+
+export default class Overview {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.div = document.querySelector(".overview").parentNode
+	}
+
+	init() {
+		this.initPrivacyBoxes()
+	}
+
+	initPrivacyBoxes() {
+		let stats = {
+			total: 0,
+			secure: 0,
+			thirdParties: 0
+		}
+		for (let service of this.config.getServices()) {
+			let analysis = analyzeService(service.href)
+			stats.total++
+			stats.secure += analysis.isSecure
+			stats.thirdParties += analysis.isThirdParty
+		}
+		this.div.querySelector(".big").innerText = stats.total
+
+		let encryption_t
+		let donot = ""
+		if (stats.secure == stats.total) encryption_t = "All"
+		else if (stats.secure == 0) encryption_t = "None of"
+		else {
+			encryption_t = stats.total - stats.secure
+			donot = "do not"
+		}
+		encryption_t = `${encryption_t} service${s(encryption_t)} ${donot} use secure connections (HTTPS).`
+
+		let indepencence_t
+		if (stats.thirdParties == 0) indepencence_t =
+			"This server is free of 3rd party services."
+		else if (stats.thirdParties == stats.total) indepencence_t =
+			"It seems only 3rd-party services are listed."
+		else indepencence_t = 
+			`${stats.thirdParties} service${s(stats.thirdParties)} ${isare(stats.thirdParties)} provided by 3rd-parties.`
+
+		privacyBox("lock", "#0D6", "Encryption", encryption_t, stats.secure / stats.total)
+		privacyBox("home", "#68F", "Independence", indepencence_t, 1 - stats.thirdParties / stats.total)
+	}
+}

js/UI/More/Overview/tiles.js

@@ -0,0 +1,18 @@
+export function privacyBox(icon, color, name, desc, pp) {
+	if (pp == 1) {}
+	else if (pp > 0.7) color = "#EA0"
+	else if (pp > 0.25) color = "#F72"
+	else color = "#F33"
+
+	let item = document.createElement("div")
+	item.setAttribute("style", `--color: ${color}`)
+
+	item.innerHTML = `<i>${icon}</i>
+		<div>
+			<div class="title">${name}</div>
+			<div class="subtitle">${desc}</div>
+		</div>`
+
+	document.querySelector(".privacy-boxes").appendChild(item)
+	return item
+}

js/UI/More/Privacy/Privacy.js

@@ -1,81 +0,0 @@
-import App from "../../../App";
-import { analyzeService } from "./analyzer";
-import { privacyBox } from "./tiles";
-
-
-export default class Privacy {
-	constructor() {
-		this.app = new App()
-		this.config = this.app.config
-	}
-
-	init() {
-		this.initPrivacyPanel()
-	}
-
-	initPrivacyPanel() {
-		let stats = {
-			total: 0,
-			secure: 0,
-			thirdParties: 0
-		}
-		for (let service of this.config.getServices()) {
-			let analysis = analyzeService(service.href)
-			stats.total++
-			stats.secure += analysis.isSecure
-			stats.thirdParties += analysis.isThirdParty
-		}
-
-		let encryption = stats.secure / stats.total
-		let encryption_t
-		if (encryption == 1) encryption_t = "All"
-		else if (encryption >= 0.9) encryption_t = "Most"
-		else if (encryption > 0.5) encryption_t = "Many"
-		else if (encryption > 0.2) encryption_t = "Some"
-		else if (encryption > 0) encryption_t = "Few"
-		else encryption_t = "No"
-		encryption_t = `${encryption_t} listed services use secure connections.`
-
-		let indepencence = (stats.total - stats.thirdParties) / stats.total
-		let indepencence_t
-		if (indepencence == 1) indepencence_t = "no"
-		else if (indepencence > 0.7) indepencence_t = "some"
-		else if (indepencence > 0.4) indepencence_t = "many"
-		else if (indepencence > 0) indepencence_t = "a lot of"
-		else indepencence_t = "only"
-		indepencence_t = `There are ${indepencence_t} 3rd-party services here.`
-
-		let score = (encryption + indepencence) / 2
-		let score_t, score_d
-		if (score == 1) {
-			score_t = "Superb"
-			score_d = "All data is sent securely and no 3rd-party services are involved."
-		}
-		else if (score >= 0.9) {
-			score_t = "Great"
-			score_d = "Awesome privacy practices, but still not perfect."
-		}
-		else if (score >= 0.6) {
-			score_t = "Good"
-			score_d = "Acceptable privacy practices, but still not perfect."
-		}
-		else if (score >= 0.3) {
-			score_t = "Fair"
-			score_d = "Definitely not a vault, but self-hosted at least."
-		}
-		else if (score > 0) {
-			score_t = "Dangerous"
-			score_d = "You should really pay attention what you're doing here."
-		}
-		else {
-			score_t = ":0"
-			score_d = "You're just testing, right?"
-		}
-
-		document.getElementById("report-score").innerText = score_t
-		document.getElementById("report").innerText = score_d
-
-		privacyBox("icon-https", "Encryption", encryption_t)
-		privacyBox("icon-rocket", "Independence", indepencence_t)
-	}
-}

js/UI/More/Privacy/tiles.js

@@ -1,11 +0,0 @@
-export function privacyBox(icon, name, desc) {
-	let item = document.createElement("div")
-	item.innerHTML = `<i class="${icon}"></i>
-		<div>
-			<div class="title">${name}</div>
-			<div class="subtitle">${desc}</div>
-		</div>`
-
-	document.getElementById("report-boxes").appendChild(item)
-	return item
-}

js/UI/More/Settings/Settings.js

@@ -39,13 +39,13 @@ export default class Settings {
 			"animations", EVENTS.onAnimationChange
 		)
 
-		document.getElementById("theme-switcher").addEventListener("click", () => {
+		document.querySelector("#theme-switcher").addEventListener("click", () => {
 			darkMode.click()
 		})
 	}
 
 	checkLocalStorage() {
-		let warn = document.getElementById("no-cookies").classList
+		let warn = document.querySelector("#no-cookies").classList
 		if (this.config.storageAvailable) warn.add("hidden")
 	}
 }

js/UI/More/Settings/events.js

@@ -7,7 +7,7 @@ export function onThemeChange(config) {
 
 export function onNewTabChange(config) {
 	let openNewTab = config.get("open_new_tab")
-	let appList = document.getElementById("app-list").children
+	let appList = document.querySelector("#app-list").children
 
 	for (let app of appList) {
 		if (openNewTab) app.setAttribute("target", "_blank")

js/UI/More/Settings/tiles.js

@@ -29,6 +29,6 @@ export function addOnOffTile(conf, icon, name, desc, key, func) {
 	handleState()
 	if (func) f()
 
-	document.getElementById("settings").appendChild(item)
+	document.querySelector("#settings").appendChild(item)
 	return item
 }