Kenwood/SMW-Upload
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Boilerplate yield and back and forth

Browse Source
This commit is contained in:
KenwoodFox
2025-12-03 13:31:25 -05:00
parent c12aedeb20
commit 4cdd902b2e
7 changed files with 374 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/quote_upload.html
View File

@@ -11,87 +11,37 @@
<body>
<div class="upload-box">
<h2>Request a Quote</h2>
<div class="form-field">
<label for="emailInput">Email</label>
<input type="email" id="emailInput" placeholder="your.email@example.com">
</div>
<div class="form-field">
<label for="notesInput">Notes / Comments</label>
<textarea id="notesInput" rows="4" placeholder="Additional information, comments or questions!"></textarea>
</div>
<div class="drop-area" id="dropArea">
<p>Drag & drop files here</p>
<p>Drag & drop drawings, CAD models, images or anything else here</p>
<p>or click to browse</p>
<input type="file" id="fileInput" multiple>
</div>
<div class="file-list" id="fileList"></div>
<button id="submitBtn" disabled>Submit</button>
<div class="todo">
<strong>TODO:</strong> Implement file upload functionality
<div class="progress-container" id="progressContainer" style="display: none;">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="progress-message" id="progressMessage"></div>
</div>
<footer>
Hosted by <a href="https://kitsunehosting.net" target="_blank"
rel="noopener noreferrer">kitsunehosting.net</a>
</footer>
</div>
<script>
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
const submitBtn = document.getElementById('submitBtn');
let selectedFiles = [];
dropArea.addEventListener('click', () => fileInput.click());
dropArea.addEventListener('dragover', (e) => {
e.preventDefault();
dropArea.classList.add('dragover');
});
dropArea.addEventListener('dragleave', () => {
dropArea.classList.remove('dragover');
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
dropArea.classList.remove('dragover');
handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener('change', (e) => {
handleFiles(e.target.files);
});
function handleFiles(files) {
selectedFiles = Array.from(files);
displayFiles();
submitBtn.disabled = selectedFiles.length === 0;
}
function displayFiles() {
if (selectedFiles.length === 0) {
fileList.classList.remove('show');
return;
}
fileList.classList.add('show');
fileList.innerHTML = selectedFiles.map(file =>
`<div class="file-item">${file.name} (${(file.size / 1024).toFixed(1)} KB)</div>`
).join('');
}
submitBtn.addEventListener('click', () => {
// TODO: Submit files to backend
alert('Upload functionality - TODO');
});
// Attempt to auto-resize the iframe height (if parent allows)
function postHeight() {
const height = document.documentElement.scrollHeight;
try {
parent.postMessage({ type: 'sedutto-ifr-height', height }, '*');
} catch (e) {
// ignore if cross-origin restrictions apply
}
}
window.addEventListener('load', postHeight);
window.addEventListener('resize', postHeight);
const mo = new MutationObserver(postHeight);
mo.observe(document.body, { childList: true, subtree: true });
</script>
<script src="{% static 'js/quote_upload.js' %}"></script>
</body>
</html>