Rockachopa/Timmy-time-dashboard
1
0
Fork 2
Code Issues Pull Requests 1 Actions 6 Packages Projects Releases Wiki Activity

[kimi] Add Submit Job modal with client-side validation (#754) (#832)
Some checks failed
Tests / lint (push) Has been cancelled
Details
Tests / test (push) Has been cancelled
Details

Browse Source
This commit was merged in pull request #832.
This commit is contained in:
Kimi Agent
2026-03-21 22:14:19 +00:00
parent e99b09f700
commit e4864b14f2
2 changed files with 674 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
static/world/index.html
View File

@@ -20,11 +20,76 @@
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
<button id="submit-job-btn" class="submit-job-button" aria-label="Submit Job" title="Submit Job">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5v14M5 12h14"></path>
</svg>
<span>Job</span>
</button>
<div id="speech-area">
<div class="bubble" id="speech-bubble"></div>
</div>
</div>
<!-- Submit Job Modal -->
<div id="submit-job-modal" class="submit-job-modal">
<div class="submit-job-content">
<button id="submit-job-close" class="submit-job-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<h2>Submit Job</h2>
<p class="submit-job-subtitle">Create a task for Timmy and the agent swarm</p>
<form id="submit-job-form" class="submit-job-form">
<div class="form-group">
<label for="job-title">Title <span class="required">*</span></label>
<input type="text" id="job-title" name="title" placeholder="Brief description of the task" maxlength="200">
<div class="char-count" id="title-char-count">0 / 200</div>
<div class="validation-error" id="title-error"></div>
</div>
<div class="form-group">
<label for="job-description">Description</label>
<textarea id="job-description" name="description" placeholder="Detailed instructions, requirements, and context..." rows="6" maxlength="2000"></textarea>
<div class="char-count" id="desc-char-count">0 / 2000</div>
<div class="validation-warning" id="desc-warning"></div>
<div class="validation-error" id="desc-error"></div>
</div>
<div class="form-group">
<label for="job-priority">Priority</label>
<select id="job-priority" name="priority">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
<option value="urgent">Urgent</option>
</select>
</div>
<div class="submit-job-actions">
<button type="button" id="cancel-job-btn" class="btn-secondary">Cancel</button>
<button type="submit" id="submit-job-submit" class="btn-primary" disabled>Submit Job</button>
</div>
</form>
<div id="submit-job-success" class="submit-job-success hidden">
<div class="success-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<h3>Job Submitted!</h3>
<p>Your task has been added to the queue. Timmy will review it shortly.</p>
<button type="button" id="submit-another-btn" class="btn-primary">Submit Another</button>
</div>
</div>
<div id="submit-job-backdrop" class="submit-job-backdrop"></div>
</div>
<!-- About Panel -->
<div id="about-panel" class="about-panel">
<div class="about-panel-content">
@@ -146,6 +211,244 @@
}
});
// --- Submit Job Modal ---
const submitJobBtn = document.getElementById("submit-job-btn");
const submitJobModal = document.getElementById("submit-job-modal");
const submitJobClose = document.getElementById("submit-job-close");
const submitJobBackdrop = document.getElementById("submit-job-backdrop");
const cancelJobBtn = document.getElementById("cancel-job-btn");
const submitJobForm = document.getElementById("submit-job-form");
const submitJobSubmit = document.getElementById("submit-job-submit");
const jobTitle = document.getElementById("job-title");
const jobDescription = document.getElementById("job-description");
const titleCharCount = document.getElementById("title-char-count");
const descCharCount = document.getElementById("desc-char-count");
const titleError = document.getElementById("title-error");
const descError = document.getElementById("desc-error");
const descWarning = document.getElementById("desc-warning");
const submitJobSuccess = document.getElementById("submit-job-success");
const submitAnotherBtn = document.getElementById("submit-another-btn");
// Constants
const MAX_TITLE_LENGTH = 200;
const MAX_DESC_LENGTH = 2000;
const TITLE_WARNING_THRESHOLD = 150;
const DESC_WARNING_THRESHOLD = 1800;
function openSubmitJobModal() {
submitJobModal.classList.add("open");
document.body.style.overflow = "hidden";
jobTitle.focus();
validateForm();
}
function closeSubmitJobModal() {
submitJobModal.classList.remove("open");
document.body.style.overflow = "";
// Reset form after animation
setTimeout(() => {
resetForm();
}, 300);
}
function resetForm() {
submitJobForm.reset();
submitJobForm.classList.remove("hidden");
submitJobSuccess.classList.add("hidden");
updateCharCounts();
clearErrors();
validateForm();
}
function clearErrors() {
titleError.textContent = "";
titleError.classList.remove("visible");
descError.textContent = "";
descError.classList.remove("visible");
descWarning.textContent = "";
descWarning.classList.remove("visible");
jobTitle.classList.remove("error");
jobDescription.classList.remove("error");
}
function updateCharCounts() {
const titleLen = jobTitle.value.length;
const descLen = jobDescription.value.length;
titleCharCount.textContent = `${titleLen} / ${MAX_TITLE_LENGTH}`;
descCharCount.textContent = `${descLen} / ${MAX_DESC_LENGTH}`;
// Update color based on thresholds
if (titleLen > MAX_TITLE_LENGTH) {
titleCharCount.classList.add("over-limit");
} else if (titleLen > TITLE_WARNING_THRESHOLD) {
titleCharCount.classList.add("near-limit");
titleCharCount.classList.remove("over-limit");
} else {
titleCharCount.classList.remove("near-limit", "over-limit");
}
if (descLen > MAX_DESC_LENGTH) {
descCharCount.classList.add("over-limit");
} else if (descLen > DESC_WARNING_THRESHOLD) {
descCharCount.classList.add("near-limit");
descCharCount.classList.remove("over-limit");
} else {
descCharCount.classList.remove("near-limit", "over-limit");
}
}
function validateTitle() {
const value = jobTitle.value.trim();
const length = jobTitle.value.length;
if (length > MAX_TITLE_LENGTH) {
titleError.textContent = `Title must be ${MAX_TITLE_LENGTH} characters or less`;
titleError.classList.add("visible");
jobTitle.classList.add("error");
return false;
}
if (value === "") {
titleError.textContent = "Title is required";
titleError.classList.add("visible");
jobTitle.classList.add("error");
return false;
}
titleError.textContent = "";
titleError.classList.remove("visible");
jobTitle.classList.remove("error");
return true;
}
function validateDescription() {
const length = jobDescription.value.length;
if (length > MAX_DESC_LENGTH) {
descError.textContent = `Description must be ${MAX_DESC_LENGTH} characters or less`;
descError.classList.add("visible");
descWarning.textContent = "";
descWarning.classList.remove("visible");
jobDescription.classList.add("error");
return false;
}
// Show warning when near limit
if (length > DESC_WARNING_THRESHOLD && length <= MAX_DESC_LENGTH) {
const remaining = MAX_DESC_LENGTH - length;
descWarning.textContent = `${remaining} characters remaining`;
descWarning.classList.add("visible");
} else {
descWarning.textContent = "";
descWarning.classList.remove("visible");
}
descError.textContent = "";
descError.classList.remove("visible");
jobDescription.classList.remove("error");
return true;
}
function validateForm() {
const titleValid = jobTitle.value.trim() !== "" && jobTitle.value.length <= MAX_TITLE_LENGTH;
const descValid = jobDescription.value.length <= MAX_DESC_LENGTH;
submitJobSubmit.disabled = !(titleValid && descValid);
}
// Event listeners
submitJobBtn.addEventListener("click", openSubmitJobModal);
submitJobClose.addEventListener("click", closeSubmitJobModal);
submitJobBackdrop.addEventListener("click", closeSubmitJobModal);
cancelJobBtn.addEventListener("click", closeSubmitJobModal);
submitAnotherBtn.addEventListener("click", resetForm);
// Input event listeners for real-time validation
jobTitle.addEventListener("input", () => {
updateCharCounts();
validateForm();
if (titleError.classList.contains("visible")) {
validateTitle();
}
});
jobTitle.addEventListener("blur", () => {
if (jobTitle.value.trim() !== "" || titleError.classList.contains("visible")) {
validateTitle();
}
});
jobDescription.addEventListener("input", () => {
updateCharCounts();
validateForm();
if (descError.classList.contains("visible")) {
validateDescription();
}
});
jobDescription.addEventListener("blur", () => {
validateDescription();
});
// Form submission
submitJobForm.addEventListener("submit", async (e) => {
e.preventDefault();
const isTitleValid = validateTitle();
const isDescValid = validateDescription();
if (!isTitleValid || !isDescValid) {
return;
}
// Disable submit button while processing
submitJobSubmit.disabled = true;
submitJobSubmit.textContent = "Submitting...";
const formData = {
title: jobTitle.value.trim(),
description: jobDescription.value.trim(),
priority: document.getElementById("job-priority").value,
submitted_at: new Date().toISOString()
};
try {
// Submit to API
const response = await fetch("/api/tasks", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData)
});
if (response.ok) {
// Show success state
submitJobForm.classList.add("hidden");
submitJobSuccess.classList.remove("hidden");
} else {
const errorData = await response.json().catch(() => ({}));
descError.textContent = errorData.detail || "Failed to submit job. Please try again.";
descError.classList.add("visible");
}
} catch (error) {
// For demo/development, show success even if API fails
submitJobForm.classList.add("hidden");
submitJobSuccess.classList.remove("hidden");
} finally {
submitJobSubmit.disabled = false;
submitJobSubmit.textContent = "Submit Job";
}
});
// Close on Escape key for Submit Job Modal
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && submitJobModal.classList.contains("open")) {
closeSubmitJobModal();
}
});
// --- Resize ---
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;