mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-07-06 09:51:14 +02:00
MarekWo
8d9c2b241c
Implemented 200-character limit for messages due to LoRa/MeshCore constraints: - Added maxlength=200 to textarea - Added live character counter (0 / 200) - Visual warnings: orange at 75%, red at 90% - Counter updates on input, reply, and send - Backend validation with descriptive error message - Added technotes/limity.md documentation about MeshCore limits Based on MeshCore LoRa payload constraints (~180-200 bytes safe limit). This prevents message fragmentation and improves transmission reliability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
72 lines
2.5 KiB
HTML
72 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Chat - mc-webui{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid h-100 d-flex flex-column">
|
|
<!-- Messages Container -->
|
|
<div class="row flex-grow-1 overflow-hidden">
|
|
<div class="col-12 h-100">
|
|
<div id="messagesContainer" class="messages-container h-100 overflow-auto p-3">
|
|
<div id="messagesList">
|
|
<!-- Messages will be loaded here via JavaScript -->
|
|
<div class="text-center text-muted py-5">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3">Loading messages...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Send Message Form -->
|
|
<div class="row border-top bg-light">
|
|
<div class="col-12">
|
|
<form id="sendMessageForm" class="p-3">
|
|
<div class="input-group">
|
|
<textarea
|
|
id="messageInput"
|
|
class="form-control"
|
|
placeholder="Type a message..."
|
|
rows="2"
|
|
maxlength="200"
|
|
required
|
|
></textarea>
|
|
<button type="submit" class="btn btn-primary px-4" id="sendBtn">
|
|
<i class="bi bi-send"></i> Send
|
|
</button>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<small class="text-muted">Press Shift+Enter for new line, Enter to send</small>
|
|
<small id="charCounter" class="text-muted">0 / 200</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Bar -->
|
|
<div class="row border-top">
|
|
<div class="col-12">
|
|
<div class="p-2 small text-muted d-flex justify-content-between align-items-center">
|
|
<span id="statusText">
|
|
<i class="bi bi-circle-fill text-secondary"></i> Connecting...
|
|
</span>
|
|
<span id="lastRefresh">Last refresh: Never</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
// Pass configuration from Flask to JavaScript
|
|
window.MC_CONFIG = {
|
|
refreshInterval: {{ refresh_interval }} * 1000, // Convert to milliseconds
|
|
deviceName: "{{ device_name }}"
|
|
};
|
|
</script>
|
|
{% endblock %}
|