Enable in options #161

app/settings/index.html

@@ -963,11 +963,25 @@ <h4>You can choose how to sort the codes. By default codes are sorted by importi
 							</div>
 
 							<h4 class="text-popup-yellow font-bold mb-0">This feature is WIP! It might be unstable or buggy!</h4>
-							<!-- 
+
 							<br />
 							<hr />
-							<h4 class="text-popup-red font-bold mb-0">This feature is WIP! Use it at your own risk!</h4> 
-							-->
+
+							<div class="relative inline-block">
+								<h3>Import screen capture</h3>
+								<h4>You can choose how to sort the codes. By default codes are sorted by importing order.</h4>
+							</div>
+
+							<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
+								<a href="#" onclick="screenCapture()">
+									<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
+										<input tabindex="-1" id="tgl8" type="checkbox" class="toggle" />
+										<label for="tgl8" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
+								></a>
+								<span id="tgt8" class="text-black text-xl">-</span>
+							</div>
+
+							<h4 class="text-popup-red font-bold mb-0">This feature is WIP! Use it at your own risk!</h4>
 						</div>
 					</div>
 				</div>

app/settings/src/js/index.js

@@ -1,4 +1,4 @@
-const { shell, app, dialog, BrowserWindow } = require("@electron/remote")
+const { shell, app, dialog, BrowserWindow, screen } = require("@electron/remote")
 const fs = require("fs")
 const electron = require("electron")
 const ipc = electron.ipcRenderer
@@ -81,6 +81,7 @@ const currentWindow = BrowserWindow.getFocusedWindow()
 // ? elements
 const inp0 = document.querySelector("#inp0")
 const drp0 = document.querySelector("#dropdownButton0")
+const drp1 = document.querySelector("#dropdownButton1")
 
 const tgl0 = document.querySelector("#tgl0")
 const tgt0 = document.querySelector("#tgt0")
@@ -101,6 +102,16 @@ const tgt7 = document.querySelector("#tgt7")
 const tgl8 = document.querySelector("#tgl8")
 const tgt8 = document.querySelector("#tgt8")
 
+// import screen capture
+let screen_capture_state = settings.experimental.screen_capture
+if (screen_capture_state === true) {
+	tgt8.textContent = "On"
+	tgl8.checked = true
+} else {
+	tgt8.textContent = "Off"
+	tgl8.checked = false
+}
+
 // launch on startup
 let startup_state = settings.settings.launch_on_startup
 if (startup_state === true) {
@@ -178,6 +189,14 @@ if (sort_number === 1) {
 	</svg> Z-A`
 }
 
+// display
+drp1.innerHTML = `
+	<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+	</svg>
+	Display #${settings.settings.default_display}
+	`
+
 // hardware
 let hardware_state = settings.settings.disable_hardware_acceleration
 if (hardware_state === true) {
@@ -491,7 +510,7 @@ const hardware = () => {
 
 let dropdown_state = false
 // ? dropdown
-const dropdown = (id) => {
+const dropdown = () => {
 	const dropdown_content = document.querySelector("#dropdownContent0")
 
 	if (dropdown_state === false) {
@@ -893,3 +912,131 @@ const updateDownloaded = () => {
 const updateRestart = () => {
 	ipc.send("updateRestart")
 }
+
+/**
+ * Toggle import screen capture
+ */
+const screenCapture = () => {
+	const toggle = () => {
+		if (screen_capture_state === true) {
+			settings.experimental.screen_capture = false
+
+			save()
+
+			tgt8.textContent = "Off"
+			tgl8.checked = false
+
+			screen_capture_state = false
+		} else {
+			settings.experimental.screen_capture = true
+
+			save()
+
+			tgt8.textContent = "On"
+			tgl8.checked = true
+
+			screen_capture_state = true
+		}
+	}
+
+	dialog
+		.showMessageBox({
+			title: "Authme",
+			buttons: ["Yes", "No", "Cancel"],
+			defaultId: 2,
+			cancelId: 2,
+			noLink: true,
+			type: "warning",
+			message: "If you want to change this setting you have to restart the app! \n\nDo you want to restart it now?",
+		})
+		.then((result) => {
+			if (result.response === 0) {
+				toggle()
+				restart()
+			}
+
+			if (result.response === 1) {
+				toggle()
+			}
+		})
+}
+
+/**
+ * Get screens
+ */
+const displays = screen.getAllDisplays()
+const displayChooser = document.querySelector("#dropdownContent1")
+
+for (let i = 1; i < displays.length + 1; i++) {
+	const element = document.createElement("a")
+
+	element.innerHTML = `
+	<a href="#" onclick="displayChoose(${i})" class="block no-underline text-xl px-2 py-2 transform duration-200 ease-in text-black hover:bg-gray-600 hover:text-white">
+	<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+	</svg>
+	Display #${i}
+	</a>
+	`
+
+	displayChooser.appendChild(element)
+}
+
+/**
+ * Toggle display dropdown
+ */
+let display_state = false
+const display = () => {
+	const dropdown_content = document.querySelector("#dropdownContent1")
+
+	if (display_state === false) {
+		dropdown_content.style.visibility = "visible"
+
+		setTimeout(() => {
+			dropdown_content.style.display = "block"
+		}, 10)
+
+		display_state = true
+	} else {
+		dropdown_content.style.display = ""
+
+		display_state = false
+	}
+}
+
+const displayChoose = (id) => {
+	const toggle = () => {
+		drp1.innerHTML = `
+		<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+		</svg>
+		Display #${id}
+		`
+
+		settings.settings.default_display = id
+		save()
+
+		display()
+	}
+
+	dialog
+		.showMessageBox({
+			title: "Authme",
+			buttons: ["Yes", "No", "Cancel"],
+			defaultId: 2,
+			cancelId: 2,
+			noLink: true,
+			type: "warning",
+			message: "If you want to change this setting you have to restart the app! \n\nDo you want to restart it now?",
+		})
+		.then((result) => {
+			if (result.response === 0) {
+				toggle()
+				restart()
+			}
+
+			if (result.response === 1) {
+				toggle()
+			}
+		})
+}