Fixed Settings App
This commit is contained in:
RisingGlitch
parent
b30afcac03
commit
27630ffeb8
1 changed files with 184 additions and 8 deletions
|
|
@ -5,26 +5,202 @@ import { FlowWindow } from '../wm.ts'
|
|||
export default class SettingsApp implements App {
|
||||
meta = {
|
||||
name: 'Settings',
|
||||
description: 'Modify/customize FlowOS.',
|
||||
pkg: 'flow.settings',
|
||||
version: '1.0.0',
|
||||
icon
|
||||
icon: icon,
|
||||
version: '1.0.0'
|
||||
}
|
||||
|
||||
configFileLoc = '/.flow/config.json'
|
||||
configFolderLoc = '/.flow/'
|
||||
|
||||
async open (): Promise<FlowWindow> {
|
||||
const win = window.wm.createWindow({
|
||||
const fs = new (window as any).Filer.FileSystem()
|
||||
|
||||
try {
|
||||
fs.exists(this.configFolderLoc, function (exists: any) {
|
||||
if (exists === false) {
|
||||
fs.mkdir(this.configFolderLoc, () => {})
|
||||
}
|
||||
})
|
||||
} catch (e) { alert(e.message) }
|
||||
try {
|
||||
fs.exists(this.configFileLoc, function (exists: any) {
|
||||
if (exists === false) {
|
||||
fs.writeFile(this.configFileLoc, '{"clock-Type":"0", "tab-title": "Flow OS", "favicon-icon": "to-be-replaced", "proxy-type": "uv", "search-engine": "google" }', () => {})
|
||||
}
|
||||
})
|
||||
} catch (e) {}
|
||||
|
||||
const win = (window as any).wm.createWindow({
|
||||
title: this.meta.name,
|
||||
icon: this.meta.icon,
|
||||
width: 700,
|
||||
height: 300
|
||||
height: 300,
|
||||
canResize: true
|
||||
})
|
||||
|
||||
win.content.style.background = 'var(--base)'
|
||||
win.content.style.padding = '10px'
|
||||
win.content.innerHTML = `
|
||||
<h1>Settings</h1>
|
||||
<p>owo2</p>
|
||||
|
||||
<div id=>
|
||||
|
||||
<h1>Appereance</h1>
|
||||
|
||||
<p>Clock</p>
|
||||
<button class="btn"> 12 Hour Clock </button>
|
||||
<button class="btn"> 24 Hour Clock </button>
|
||||
|
||||
<p>Tab Title</p>
|
||||
<input class="btn" placeholder="Enter Tab Title">
|
||||
<p>Tab Icon</p>
|
||||
<input class="btn" placeholder="Enter Icon URL">
|
||||
<p class="error-text"> </p>
|
||||
|
||||
<h1>Browser Settings</h1>
|
||||
|
||||
<p>Proxy Type</p>
|
||||
<select class="btn">
|
||||
<option value="uv">Ultraviolet</option>
|
||||
<option value="dy">Dynamic</option>
|
||||
</select>
|
||||
|
||||
<p>Search Engine</p>
|
||||
<select class="btn">
|
||||
<option value="google">Google</option>
|
||||
<option value="bing">Bing</option>
|
||||
<option value="yahoo">Yahoo!</option>
|
||||
<option value="duck">DuckDuckGo</option>
|
||||
</select>
|
||||
|
||||
<p>Server</p>
|
||||
<input class="btn" placeholder="Enter Server URL">
|
||||
<p class="error-text"> </p>
|
||||
|
||||
|
||||
<button disabled class="btn save"> Save </button>
|
||||
<style>
|
||||
|
||||
.error-text {
|
||||
font-size:12px;
|
||||
color:red;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color:#45475a;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #11111b;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.btn:disabled {
|
||||
color:rgba(205, 214, 244, 0.4);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.save {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
`
|
||||
// Get current data
|
||||
const data = JSON.parse(await fs.promises.readFile(this.configFileLoc))
|
||||
let oldData = JSON.stringify(data)
|
||||
|
||||
// Handle value changes
|
||||
|
||||
win.content.getElementsByClassName('btn')[0].onclick = async () => {
|
||||
data['clock-Type'] = '0'
|
||||
win.content.getElementsByClassName('btn')[0].disabled = true
|
||||
win.content.getElementsByClassName('btn')[1].disabled = false
|
||||
settingsChange()
|
||||
}
|
||||
win.content.getElementsByClassName('btn')[1].onclick = async () => {
|
||||
data['clock-Type'] = '1'
|
||||
win.content.getElementsByClassName('btn')[0].disabled = false
|
||||
win.content.getElementsByClassName('btn')[1].disabled = true
|
||||
settingsChange()
|
||||
}
|
||||
|
||||
win.content.getElementsByClassName('btn')[2].addEventListener('change', () => {
|
||||
data['tab-title'] = win.content.getElementsByClassName('btn')[2].value
|
||||
settingsChange()
|
||||
})
|
||||
|
||||
win.content.getElementsByClassName('btn')[6].addEventListener('change', () => {
|
||||
if (isURL(win.content.getElementsByClassName('btn')[6].value) === true && win.content.getElementsByClassName('btn')[6].value !== '') {
|
||||
data['flow-server'] = win.content.getElementsByClassName('btn')[6].value
|
||||
win.content.getElementsByClassName('error-text')[1].textContent = ''
|
||||
} else {
|
||||
if (win.content.getElementsByClassName('btn')[6].value !== '') {
|
||||
win.content.getElementsByClassName('error-text')[1].textContent = 'Please input a vaild URL'
|
||||
} else {
|
||||
win.content.getElementsByClassName('error-text')[1].textContent = ''
|
||||
}
|
||||
}
|
||||
settingsChange()
|
||||
})
|
||||
|
||||
win.content.getElementsByClassName('btn')[3].addEventListener('change', () => {
|
||||
if (isURL(win.content.getElementsByClassName('btn')[3].value) === true && win.content.getElementsByClassName('btn')[4].value !== '') {
|
||||
data['favicon-url'] = win.content.getElementsByClassName('btn')[3].value
|
||||
win.content.getElementsByClassName('error-text')[0].textContent = ''
|
||||
} else {
|
||||
if (win.content.getElementsByClassName('btn')[4].value !== '') {
|
||||
win.content.getElementsByClassName('error-text')[0].textContent = 'Please input a vaild URL'
|
||||
} else {
|
||||
win.content.getElementsByClassName('error-text')[0].textContent = ''
|
||||
}
|
||||
}
|
||||
settingsChange()
|
||||
})
|
||||
|
||||
win.content.getElementsByClassName('btn')[4].value = data['proxy-type']
|
||||
win.content.getElementsByClassName('btn')[4].addEventListener('change', (event: any) => {
|
||||
data['proxy-type'] = event.target.value
|
||||
settingsChange()
|
||||
})
|
||||
|
||||
win.content.getElementsByClassName('btn')[5].value = data['search-engine']
|
||||
win.content.getElementsByClassName('btn')[5].addEventListener('change', (event: any) => {
|
||||
data['search-engine'] = event.target.value
|
||||
settingsChange()
|
||||
})
|
||||
|
||||
// Handle saving.
|
||||
|
||||
win.content.getElementsByClassName('save')[0].onclick = async () => {
|
||||
await fs.promises.writeFile(this.configFileLoc, JSON.stringify(data))
|
||||
oldData = JSON.stringify(data)
|
||||
settingsChange()
|
||||
}
|
||||
|
||||
// Display unsaved changes / prevent Save button from being clicked twice.
|
||||
|
||||
function settingsChange (): void {
|
||||
if (oldData !== JSON.stringify(data)) {
|
||||
win.setTitle('Settings - Unsaved Changes')
|
||||
win.content.getElementsByClassName('save')[0].disabled = false
|
||||
} else {
|
||||
win.setTitle('Settings')
|
||||
win.content.getElementsByClassName('save')[0].disabled = true
|
||||
}
|
||||
}
|
||||
// URL checker
|
||||
|
||||
function isURL (input: string): any {
|
||||
const regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/
|
||||
return input.match(regex)
|
||||
}
|
||||
|
||||
// Set values
|
||||
win.content.getElementsByClassName('btn')[0].disabled = true
|
||||
win.content.getElementsByClassName('btn')[1].disabled = false
|
||||
if (data['clock-Type'] === '0') {
|
||||
win.content.getElementsByClassName('btn')[0].disabled = false
|
||||
win.content.getElementsByClassName('btn')[1].disabled = true
|
||||
}
|
||||
|
||||
return win
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue