94 lines
2.5 KiB
HTML
94 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
|
</head>
|
|
<script>
|
|
function startBrowser() {
|
|
const userDataDir = document.querySelector('.user-data-dir').value
|
|
localStorage.setItem('userdatadir', userDataDir)
|
|
|
|
fetch('/browser/start', {
|
|
method: 'POST',
|
|
body: userDataDir,
|
|
})
|
|
}
|
|
|
|
function newSite() {
|
|
const url = document.querySelector('.new.url').value
|
|
const watch = document.querySelector('.new.watch').value
|
|
|
|
localStorage.setItem('url', url)
|
|
localStorage.setItem('watch', watch)
|
|
|
|
fetch('/start', {
|
|
method: 'POST',
|
|
body: JSON.stringify({url, watch}),
|
|
})
|
|
.then(() => location.reload())
|
|
|
|
}
|
|
|
|
function stopSite(uuid) {
|
|
fetch(`/stop/${uuid}`)
|
|
.then(() => location.reload())
|
|
}
|
|
|
|
function siteStatus() {
|
|
fetch('/sites')
|
|
.then(data => data.json())
|
|
.then(json => {
|
|
for (const uuid of Object.keys(json.Sites)) {
|
|
const site = json.Sites[uuid]
|
|
if (site.StopLoop) {
|
|
document.querySelector(`.url[data-uuid="${uuid}"]`)?.classList.add('dead')
|
|
document.querySelector(`.watch[data-uuid="${uuid}"]`)?.classList.add('dead')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function init() {
|
|
const userdatadir = localStorage.getItem('userdatadir') || ''
|
|
const url = localStorage.getItem('url') || ''
|
|
const watch = localStorage.getItem('watch') || ''
|
|
|
|
document.querySelector('.user-data-dir').value = userdatadir
|
|
document.querySelector('.new.url').value = url
|
|
document.querySelector('.new.watch').value = watch
|
|
setInterval(siteStatus, 2000)
|
|
}
|
|
</script>
|
|
|
|
<body>
|
|
<div class="browser">
|
|
<h1>Browser</h1>
|
|
<input type="text" class="user-data-dir" placeholder="~/.local/share/chrome-dev">
|
|
<button onclick="startBrowser()">Start</button>
|
|
</div>
|
|
|
|
<h1>CSS reloading</h1>
|
|
<div class="sites">
|
|
<div class="header">URL</div>
|
|
<div class="header">Watch</div>
|
|
<div class="header"></div>
|
|
<div class="line"></div>
|
|
|
|
<input type="text" class="new url" placeholder="https://example.com">
|
|
<input type="text" class="new watch" placeholder="~/example.com/css/">
|
|
<button onclick="newSite()">Start</button>
|
|
|
|
{{ range . }}
|
|
<div class="line"></div>
|
|
<div class="url {{ if .StopLoop }}dead{{ end }}" data-uuid="{{ .UUID }}">{{ .URL }}</div>
|
|
<div class="watch {{ if .StopLoop }}dead{{ end }}" data-uuid="{{ .UUID }}">{{ .Watch }}</div>
|
|
<div class="stop" onclick="stopSite('{{ .UUID }}')">❌</div>
|
|
{{ end }}
|
|
</div>
|
|
<script>init()</script>
|
|
</body>
|
|
|
|
</html>
|