app.bettersight.io/appscript/Sidebar.html

106 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: 'Inter', Arial, sans-serif;
color: #0D1526;
padding: 16px;
font-size: 13px;
}
.logo { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.logo em { color: #00D4FF; font-style: normal; }
.subtitle { font-size: 11.5px; color: #6B7A99; margin-bottom: 18px; }
label { display: block; font-size: 11px; font-weight: 700; color: #6B7A99;
text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
select {
width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(28,56,121,.14);
font-size: 13px; margin-bottom: 14px; font-family: inherit;
}
button {
width: 100%; padding: 9px 14px; border-radius: 9px; border: none;
background: linear-gradient(135deg, #1B8EF8, #0B7AE8); color: #fff;
font-size: 13px; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.status { font-size: 11.5px; color: #6B7A99; margin-top: 14px; line-height: 1.5; }
.status.error { color: #F04438; }
.divider { height: 1px; background: rgba(28,56,121,.09); margin: 16px 0; }
</style>
</head>
<body>
<div class="logo">Better<em>sight</em></div>
<div class="subtitle">Pull results into Sheet</div>
<label for="tab-select">Write to tab</label>
<select id="tab-select"></select>
<button id="pull-button" onclick="pullResults()">Pull latest results</button>
<div class="divider"></div>
<div id="status" class="status">Loading…</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
google.script.run
.withSuccessHandler(populateTabs)
.withFailureHandler(function (err) { showStatus(err.message, true); })
.getWorkbookTabs();
google.script.run
.withSuccessHandler(function (status) {
if (status) showStatus(status, false);
else document.getElementById('status').textContent = '';
})
.getLastPullStatus();
});
function populateTabs(tabs) {
const select = document.getElementById('tab-select');
select.innerHTML = '';
tabs.forEach(function (tab) {
const option = document.createElement('option');
option.value = tab;
option.textContent = tab;
if (tab === 'Bettersight Analysis') option.selected = true;
select.appendChild(option);
});
if (!tabs.includes('Bettersight Analysis')) {
const option = document.createElement('option');
option.value = 'Bettersight Analysis';
option.textContent = 'Bettersight Analysis (new tab)';
select.appendChild(option);
}
}
function pullResults() {
const button = document.getElementById('pull-button');
const tabName = document.getElementById('tab-select').value;
button.disabled = true;
button.textContent = 'Pulling…';
showStatus('Fetching your latest analysis…', false);
google.script.run
.withSuccessHandler(function (result) {
button.disabled = false;
button.textContent = 'Pull latest results';
showStatus(result.message || result.summary, !result.success);
})
.withFailureHandler(function (err) {
button.disabled = false;
button.textContent = 'Pull latest results';
showStatus(err.message, true);
})
.pullLatestResults(tabName);
}
function showStatus(text, isError) {
const el = document.getElementById('status');
el.textContent = text;
el.className = isError ? 'status error' : 'status';
}
</script>
</body>
</html>