typescript-assistant
Version:
Combines and integrates professional Typescript tools into your project
79 lines (69 loc) • 2.54 kB
HTML
<html>
<head>
<title>Typescript assistant</title>
<meta name="viewport" content="width=device-width">
<style>
* {box-sizing: border-box; }
head, body { padding: 0; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; justify-content: space-around; font-family: Verdana, Geneva, sans-serif; }
section { display: flex; position: relative; flex: 1 0 60px; background-color: lightgray; border: 4px solid white; font-size: 5vmin; padding: 10px;}
section > span { display: block; padding: 10px; align-self: center; }
button { position: absolute; right: 8px; top: 8px; bottom: 8px; width: 30vmin; font-size: 5vmin; color: black; background-color:white; border:none; outline:none}
.good { background-color: lightgreen; }
.bad { background-color: red; color: white; }
.busy { opacity: 0.5 }
section button { display: none; }
section.bad.fixable:not(.busy) button { display: block; }
</style>
</head>
<body>
<section id="compiler">
<span>Compiler</span>
</section>
<section id="format">
<span>Formatter</span>
<button id="format-fix">Fix</button>
</section>
<section id="lint">
<span>Lint</span>
<button id="lint-fix">Fix</button>
</section>
<section id="test">
<span>Test</span>
</section>
<section id="coverage">
<span>Coverage</span>
</section>
<script>
var webSocket = new WebSocket('ws://' + window.location.host + '/ws');
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('format-fix').addEventListener('click', function() {
webSocket.send('format-fix');
document.getElementById('format').classList.remove('fixable');
});
document.getElementById('lint-fix').addEventListener('click', function() {
webSocket.send('lint-fix');
document.getElementById('lint').classList.remove('fixable');
});
});
var reports = {};
webSocket.onmessage = function(evt) {
var report = JSON.parse(evt.data);
reports[report.tool] = report;
var sectionElement = document.getElementById(report.tool);
sectionElement.classList.toggle('busy', report.status === 'busy');
if (report.status !== 'busy') {
var good = !report.errors;
sectionElement.classList.toggle('good', good);
sectionElement.classList.toggle('bad', !good);
if (report.errors) {
sectionElement.classList.toggle('fixable', report.fixable);
}
}
};
webSocket.onclose = function() {
document.body.innerText = 'NOT CONNECTED';
}
</script>
</body>
</html>