162 lines
4.4 KiB
HTML
162 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-size: 13px;
|
|
color: #ccc;
|
|
background: transparent;
|
|
padding: 8px;
|
|
}
|
|
.section-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #888;
|
|
margin: 14px 0 8px;
|
|
}
|
|
.section-title:first-child { margin-top: 0; }
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
label {
|
|
width: 90px;
|
|
flex-shrink: 0;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
input[type="text"], input[type="password"] {
|
|
flex: 1;
|
|
background: #1a1a1a;
|
|
border: 1px solid #444;
|
|
border-radius: 4px;
|
|
color: #eee;
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
.hint {
|
|
font-size: 11px;
|
|
color: #555;
|
|
margin-top: -4px;
|
|
margin-bottom: 8px;
|
|
padding-left: 98px;
|
|
line-height: 1.4;
|
|
}
|
|
.divider {
|
|
border: none;
|
|
border-top: 1px solid #333;
|
|
margin: 12px 0;
|
|
}
|
|
#statusText {
|
|
font-size: 11px;
|
|
color: #888;
|
|
text-align: center;
|
|
padding-top: 6px;
|
|
min-height: 16px;
|
|
}
|
|
#statusText.ok { color: #4caf50; }
|
|
#statusText.error { color: #e57373; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p class="section-title">Notion Connection</p>
|
|
|
|
<div class="row">
|
|
<label>API Token</label>
|
|
<input type="password" id="notionToken" placeholder="ntn_…">
|
|
</div>
|
|
<p class="hint">From notion.so → Settings → Integrations → your integration → token.</p>
|
|
|
|
<hr class="divider">
|
|
<p class="section-title">Databases</p>
|
|
|
|
<div class="row">
|
|
<label>Time Entries</label>
|
|
<input type="text" id="timingDbId" placeholder="Database ID">
|
|
</div>
|
|
<p class="hint">The ID from your Time Entries database URL (32-char hex string).</p>
|
|
|
|
<div class="row">
|
|
<label>Projects</label>
|
|
<input type="text" id="projectsDbId" placeholder="Database ID">
|
|
</div>
|
|
<p class="hint">The ID from your Projects database URL.</p>
|
|
|
|
<hr class="divider">
|
|
<p class="section-title">Your Identity</p>
|
|
|
|
<div class="row">
|
|
<label>User ID</label>
|
|
<input type="text" id="userId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
|
|
</div>
|
|
<p class="hint">Your Notion user UUID — ask your workspace admin if unsure. Time entries are logged under this name.</p>
|
|
|
|
<p id="statusText"></p>
|
|
|
|
<script src="libs/constants.js"></script>
|
|
<script src="libs/prototypes.js"></script>
|
|
<script src="libs/timers.js"></script>
|
|
<script src="libs/utils.js"></script>
|
|
<script src="libs/events.js"></script>
|
|
<script src="libs/api.js"></script>
|
|
<script src="libs/property-inspector.js"></script>
|
|
|
|
<script>
|
|
var ACTION_UUID = "com.pdma.notion-timer.toggle";
|
|
var saveTimer = null;
|
|
|
|
function setStatus(msg, cls) {
|
|
var el = document.getElementById("statusText");
|
|
el.textContent = msg;
|
|
el.className = cls || "";
|
|
}
|
|
|
|
function getFormValues() {
|
|
return {
|
|
notionToken: document.getElementById("notionToken").value.trim(),
|
|
timingDbId: document.getElementById("timingDbId").value.trim(),
|
|
projectsDbId: document.getElementById("projectsDbId").value.trim(),
|
|
userId: document.getElementById("userId").value.trim(),
|
|
};
|
|
}
|
|
|
|
function save() {
|
|
var values = getFormValues();
|
|
$PI.setGlobalSettings(values);
|
|
setStatus("Settings saved.", "ok");
|
|
}
|
|
|
|
function scheduleSave() {
|
|
clearTimeout(saveTimer);
|
|
saveTimer = setTimeout(save, 600);
|
|
}
|
|
|
|
$PI.onConnected(function() {
|
|
$PI.getGlobalSettings();
|
|
|
|
["notionToken", "timingDbId", "projectsDbId", "userId"].forEach(function(id) {
|
|
document.getElementById(id).addEventListener("input", scheduleSave);
|
|
});
|
|
});
|
|
|
|
$PI.onDidReceiveGlobalSettings(function(jsn) {
|
|
var s = jsn.payload.settings || {};
|
|
document.getElementById("notionToken").value = s.notionToken || "";
|
|
document.getElementById("timingDbId").value = s.timingDbId || "";
|
|
document.getElementById("projectsDbId").value = s.projectsDbId || "";
|
|
document.getElementById("userId").value = s.userId || "";
|
|
if (s.notionToken) setStatus("Settings loaded.", "ok");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|