931 lines
45 KiB
HTML
931 lines
45 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block title %}AUTARCH — SMS Forge{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>SMS/MMS Backup Forge</h1>
|
||
|
|
<p style="margin:0;font-size:0.85rem;color:var(--text-secondary)">
|
||
|
|
Create and modify SMS/MMS backup XML files (SMS Backup & Restore format).
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tab Bar -->
|
||
|
|
<div class="tab-bar">
|
||
|
|
<button class="tab active" data-tab-group="forge" data-tab="messages" onclick="showTab('forge','messages')">Messages <span id="msg-badge" class="badge" style="display:none">0</span></button>
|
||
|
|
<button class="tab" data-tab-group="forge" data-tab="conversations" onclick="showTab('forge','conversations')">Conversations</button>
|
||
|
|
<button class="tab" data-tab-group="forge" data-tab="importexport" onclick="showTab('forge','importexport')">Import / Export</button>
|
||
|
|
<button class="tab" data-tab-group="forge" data-tab="templates" onclick="showTab('forge','templates')">Templates</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== TAB 1: MESSAGES ==================== -->
|
||
|
|
<div class="tab-content active" data-tab-group="forge" data-tab="messages">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Message List</h2>
|
||
|
|
<div class="form-row" style="margin-bottom:12px;gap:8px;flex-wrap:wrap;align-items:flex-end">
|
||
|
|
<div class="form-group" style="min-width:150px;flex:1">
|
||
|
|
<label>Contact Filter</label>
|
||
|
|
<select id="filter-contact" onchange="forgeLoadMessages()">
|
||
|
|
<option value="">All contacts</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="min-width:150px;flex:1">
|
||
|
|
<label>Keyword</label>
|
||
|
|
<input type="text" id="filter-keyword" placeholder="Search messages..." onkeydown="if(event.key==='Enter')forgeLoadMessages()">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="min-width:130px;flex:0.7">
|
||
|
|
<label>Date From</label>
|
||
|
|
<input type="datetime-local" id="filter-date-from">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="min-width:130px;flex:0.7">
|
||
|
|
<label>Date To</label>
|
||
|
|
<input type="datetime-local" id="filter-date-to">
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;gap:6px;padding-bottom:2px">
|
||
|
|
<button class="btn btn-small" onclick="forgeLoadMessages()">Filter</button>
|
||
|
|
<button class="btn btn-small" onclick="forgeClearFilters()">Clear</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Chat bubble view -->
|
||
|
|
<div id="forge-chat" class="forge-chat-container" style="max-height:500px;overflow-y:auto;padding:12px;background:var(--bg-input);border-radius:var(--radius);border:1px solid var(--border);min-height:120px">
|
||
|
|
<div style="color:var(--text-muted);text-align:center;padding:40px 0">No messages loaded</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tool-actions" style="margin-top:12px">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="forgeShowAddSMS()">+ Add SMS</button>
|
||
|
|
<button class="btn btn-small" onclick="forgeShowAddMMS()">+ Add MMS</button>
|
||
|
|
<button class="btn btn-small" style="margin-left:auto;color:var(--danger)" onclick="forgeClearAll()">Clear All</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== TAB 2: CONVERSATIONS ==================== -->
|
||
|
|
<div class="tab-content" data-tab-group="forge" data-tab="conversations">
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Generate from Template</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Generate a realistic conversation from a built-in or custom template.
|
||
|
|
</p>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Phone Number</label>
|
||
|
|
<input type="text" id="gen-address" placeholder="+15551234567">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Contact Name</label>
|
||
|
|
<input type="text" id="gen-contact" placeholder="John Smith">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Template</label>
|
||
|
|
<select id="gen-template" onchange="forgeTemplateChanged()">
|
||
|
|
<option value="">-- Select template --</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Start Date/Time</label>
|
||
|
|
<input type="datetime-local" id="gen-start">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="gen-variables" style="margin-bottom:12px"></div>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary" id="btn-generate" onclick="forgeGenerate()">Generate Conversation</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="gen-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Manual Conversation Builder</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Build a conversation message by message with custom delays.
|
||
|
|
</p>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Phone Number</label>
|
||
|
|
<input type="text" id="conv-address" placeholder="+15551234567">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Contact Name</label>
|
||
|
|
<input type="text" id="conv-contact" placeholder="Jane Doe">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Start Date/Time</label>
|
||
|
|
<input type="datetime-local" id="conv-start">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="conv-builder-messages" style="margin-bottom:12px"></div>
|
||
|
|
<div style="display:flex;gap:6px;margin-bottom:12px">
|
||
|
|
<button class="btn btn-small" onclick="convAddMsg(1)">+ Received</button>
|
||
|
|
<button class="btn btn-small" onclick="convAddMsg(2)">+ Sent</button>
|
||
|
|
</div>
|
||
|
|
<div id="conv-preview" class="forge-chat-container" style="max-height:300px;overflow-y:auto;padding:12px;background:var(--bg-input);border-radius:var(--radius);border:1px solid var(--border);min-height:60px;display:none"></div>
|
||
|
|
<div class="tool-actions" style="margin-top:12px">
|
||
|
|
<button class="btn btn-primary" onclick="convSubmit()">Add Conversation</button>
|
||
|
|
<button class="btn btn-small" onclick="convClear()">Clear</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="conv-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Bulk Contact Replace</h2>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Old Address</label>
|
||
|
|
<input type="text" id="replace-old" placeholder="+15551234567">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>New Address</label>
|
||
|
|
<input type="text" id="replace-new" placeholder="+15559876543">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>New Name (optional)</label>
|
||
|
|
<input type="text" id="replace-name" placeholder="New Contact Name">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="forgeReplaceContact()">Replace Contact</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="replace-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Timestamp Shift</h2>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Address (blank = all messages)</label>
|
||
|
|
<input type="text" id="shift-address" placeholder="+15551234567">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="max-width:180px">
|
||
|
|
<label>Offset (minutes)</label>
|
||
|
|
<input type="number" id="shift-offset" placeholder="60" value="0">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p style="font-size:0.75rem;color:var(--text-muted);margin-bottom:8px">
|
||
|
|
Positive = forward in time, negative = backward.
|
||
|
|
E.g. -1440 shifts back 1 day, 60 shifts forward 1 hour.
|
||
|
|
</p>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="forgeShiftTimestamps()">Shift Timestamps</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="shift-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== TAB 3: IMPORT / EXPORT ==================== -->
|
||
|
|
<div class="tab-content" data-tab-group="forge" data-tab="importexport">
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Import</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Import an existing SMS Backup & Restore XML file or a CSV file.
|
||
|
|
</p>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Upload File (XML or CSV)</label>
|
||
|
|
<input type="file" id="import-file" accept=".xml,.csv" style="padding:8px">
|
||
|
|
</div>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-small" onclick="forgeValidate()">Validate XML</button>
|
||
|
|
<button class="btn btn-primary" onclick="forgeImport()">Import</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="import-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Merge Multiple Backups</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Upload multiple XML backups to merge. Duplicates are automatically removed.
|
||
|
|
</p>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Upload Files (multiple XML)</label>
|
||
|
|
<input type="file" id="merge-files" accept=".xml" multiple style="padding:8px">
|
||
|
|
</div>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary" onclick="forgeMerge()">Merge Backups</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="merge-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Export</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Download the current message set as an SMS Backup & Restore XML or CSV file.
|
||
|
|
</p>
|
||
|
|
<div class="form-row" style="align-items:flex-end">
|
||
|
|
<div class="form-group" style="max-width:200px">
|
||
|
|
<label>Format</label>
|
||
|
|
<select id="export-format">
|
||
|
|
<option value="xml">XML (SMS Backup & Restore)</option>
|
||
|
|
<option value="csv">CSV</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick="forgeExport()">Download Export</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Backup Statistics</h2>
|
||
|
|
<div id="stats-panel" style="color:var(--text-secondary)">
|
||
|
|
<em>Click Refresh to load stats.</em>
|
||
|
|
</div>
|
||
|
|
<div class="tool-actions" style="margin-top:8px">
|
||
|
|
<button class="btn btn-small" onclick="forgeLoadStats()">Refresh Stats</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== TAB 4: TEMPLATES ==================== -->
|
||
|
|
<div class="tab-content" data-tab-group="forge" data-tab="templates">
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Conversation Templates</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Built-in and custom templates for generating realistic SMS conversations.
|
||
|
|
</p>
|
||
|
|
<div id="templates-list"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>Custom Template Editor</h2>
|
||
|
|
<p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:12px">
|
||
|
|
Create a custom template in JSON format. Fields: name, description, variables (array), messages (array of {body, type, delay_minutes}).
|
||
|
|
</p>
|
||
|
|
<div class="form-group" style="max-width:300px">
|
||
|
|
<label>Template Key</label>
|
||
|
|
<input type="text" id="tmpl-key" placeholder="my_template">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Template JSON</label>
|
||
|
|
<textarea id="tmpl-json" rows="12" placeholder='{
|
||
|
|
"name": "My Template",
|
||
|
|
"description": "A custom conversation template",
|
||
|
|
"variables": ["contact", "topic"],
|
||
|
|
"messages": [
|
||
|
|
{"body": "Hey {contact}, want to discuss {topic}?", "type": 2, "delay_minutes": 0},
|
||
|
|
{"body": "Sure, what about it?", "type": 1, "delay_minutes": 5}
|
||
|
|
]
|
||
|
|
}'></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary" onclick="forgeSaveTemplate()">Save Template</button>
|
||
|
|
</div>
|
||
|
|
<pre class="output-panel" id="tmpl-output" style="display:none"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== ADD SMS MODAL ==================== -->
|
||
|
|
<div id="modal-sms" class="forge-modal" style="display:none">
|
||
|
|
<div class="forge-modal-content">
|
||
|
|
<div class="forge-modal-header">
|
||
|
|
<h3 id="modal-sms-title">Add SMS</h3>
|
||
|
|
<button onclick="forgeCloseModal('modal-sms')" style="background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Phone Number</label>
|
||
|
|
<input type="text" id="sms-address" placeholder="+15551234567">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Contact Name</label>
|
||
|
|
<input type="text" id="sms-contact" placeholder="John Smith">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Message Body</label>
|
||
|
|
<textarea id="sms-body" rows="4" placeholder="Enter message text..."></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Type</label>
|
||
|
|
<select id="sms-type">
|
||
|
|
<option value="1">Received</option>
|
||
|
|
<option value="2">Sent</option>
|
||
|
|
<option value="3">Draft</option>
|
||
|
|
<option value="4">Outbox</option>
|
||
|
|
<option value="5">Failed</option>
|
||
|
|
<option value="6">Queued</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Timestamp</label>
|
||
|
|
<input type="datetime-local" id="sms-timestamp">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" id="sms-edit-index" value="">
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary" id="btn-sms-save" onclick="forgeSaveSMS()">Add SMS</button>
|
||
|
|
<button class="btn btn-small" onclick="forgeCloseModal('modal-sms')">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== ADD MMS MODAL ==================== -->
|
||
|
|
<div id="modal-mms" class="forge-modal" style="display:none">
|
||
|
|
<div class="forge-modal-content">
|
||
|
|
<div class="forge-modal-header">
|
||
|
|
<h3>Add MMS</h3>
|
||
|
|
<button onclick="forgeCloseModal('modal-mms')" style="background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Phone Number</label>
|
||
|
|
<input type="text" id="mms-address" placeholder="+15551234567">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Contact Name</label>
|
||
|
|
<input type="text" id="mms-contact" placeholder="John Smith">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Message Body</label>
|
||
|
|
<textarea id="mms-body" rows="3" placeholder="Enter MMS text..."></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Type</label>
|
||
|
|
<select id="mms-type">
|
||
|
|
<option value="1">Received</option>
|
||
|
|
<option value="2">Sent</option>
|
||
|
|
<option value="3">Draft</option>
|
||
|
|
<option value="4">Outbox</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Timestamp</label>
|
||
|
|
<input type="datetime-local" id="mms-timestamp">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Attachment (base64 data, optional)</label>
|
||
|
|
<textarea id="mms-attachment-data" rows="2" placeholder="Paste base64 data or leave empty"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Attachment Filename</label>
|
||
|
|
<input type="text" id="mms-attachment-name" placeholder="image.jpg">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Content Type</label>
|
||
|
|
<input type="text" id="mms-attachment-ct" placeholder="image/jpeg">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tool-actions">
|
||
|
|
<button class="btn btn-primary" onclick="forgeSaveMMS()">Add MMS</button>
|
||
|
|
<button class="btn btn-small" onclick="forgeCloseModal('modal-mms')">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* ── Chat Bubble Styles ─────────────────────────────────────────── */
|
||
|
|
.forge-chat-container{display:flex;flex-direction:column;gap:6px}
|
||
|
|
.forge-bubble{max-width:75%;padding:8px 12px;border-radius:12px;font-size:0.85rem;line-height:1.45;word-wrap:break-word;position:relative}
|
||
|
|
.forge-bubble .bubble-meta{font-size:0.65rem;color:var(--text-muted);margin-top:4px;display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||
|
|
.forge-bubble .bubble-actions{display:none;gap:4px}
|
||
|
|
.forge-bubble:hover .bubble-actions{display:flex}
|
||
|
|
.forge-bubble .bubble-actions button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:0.7rem;padding:1px 4px;border-radius:3px}
|
||
|
|
.forge-bubble .bubble-actions button:hover{background:rgba(255,255,255,0.1);color:var(--text-primary)}
|
||
|
|
.forge-bubble-received{align-self:flex-start;background:#2a2d3e;border-bottom-left-radius:4px;color:var(--text-primary)}
|
||
|
|
.forge-bubble-sent{align-self:flex-end;background:var(--accent);border-bottom-right-radius:4px;color:#fff}
|
||
|
|
.forge-bubble-sent .bubble-meta{color:rgba(255,255,255,0.6)}
|
||
|
|
.forge-bubble-sent .bubble-actions button{color:rgba(255,255,255,0.5)}
|
||
|
|
.forge-bubble-sent .bubble-actions button:hover{color:#fff;background:rgba(255,255,255,0.15)}
|
||
|
|
.forge-bubble-mms{border:1px solid var(--border)}
|
||
|
|
.forge-bubble-mms .mms-tag{display:inline-block;background:rgba(255,255,255,0.1);border-radius:3px;padding:0 4px;font-size:0.65rem;margin-right:4px;vertical-align:middle}
|
||
|
|
.forge-contact-label{font-size:0.7rem;color:var(--text-muted);margin-bottom:2px;padding-left:4px}
|
||
|
|
|
||
|
|
/* ── Modal ──────────────────────────────────────────────────────── */
|
||
|
|
.forge-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1000;display:flex;align-items:center;justify-content:center}
|
||
|
|
.forge-modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:90%;max-width:520px;max-height:90vh;overflow-y:auto}
|
||
|
|
.forge-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
|
||
|
|
.forge-modal-header h3{margin:0;font-size:1.1rem}
|
||
|
|
|
||
|
|
/* ── Template cards ─────────────────────────────────────────────── */
|
||
|
|
.tmpl-card{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px}
|
||
|
|
.tmpl-card h4{margin:0 0 4px 0;font-size:0.95rem;color:var(--text-primary)}
|
||
|
|
.tmpl-card .tmpl-desc{font-size:0.8rem;color:var(--text-secondary);margin-bottom:8px}
|
||
|
|
.tmpl-card .tmpl-vars{font-size:0.75rem;color:var(--text-muted)}
|
||
|
|
.tmpl-card .tmpl-preview{margin-top:8px;padding:8px;background:var(--bg-primary);border-radius:6px;font-size:0.78rem;color:var(--text-secondary);max-height:120px;overflow-y:auto}
|
||
|
|
.tmpl-card .tmpl-tag{display:inline-block;background:var(--accent);color:#fff;border-radius:3px;padding:1px 6px;font-size:0.65rem;margin-left:6px;vertical-align:middle}
|
||
|
|
.tmpl-card .tmpl-tag.custom{background:var(--danger)}
|
||
|
|
|
||
|
|
/* ── Stats ──────────────────────────────────────────────────────── */
|
||
|
|
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}
|
||
|
|
.stat-card{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center}
|
||
|
|
.stat-card .stat-value{font-size:1.6rem;font-weight:700;color:var(--accent)}
|
||
|
|
.stat-card .stat-label{font-size:0.75rem;color:var(--text-muted);margin-top:2px}
|
||
|
|
|
||
|
|
/* ── Badge ──────────────────────────────────────────────────────── */
|
||
|
|
.badge{background:var(--accent);color:#fff;border-radius:10px;padding:1px 7px;font-size:0.7rem;margin-left:4px;vertical-align:middle}
|
||
|
|
|
||
|
|
/* ── Conversation builder messages ──────────────────────────────── */
|
||
|
|
.conv-msg-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;padding:6px 8px;background:var(--bg-input);border-radius:6px;border:1px solid var(--border)}
|
||
|
|
.conv-msg-row textarea{flex:1;min-height:32px;resize:vertical;font-size:0.82rem}
|
||
|
|
.conv-msg-row select,.conv-msg-row input[type="number"]{width:80px;font-size:0.82rem}
|
||
|
|
.conv-msg-row button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem;padding:2px 6px}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/* ── State ──────────────────────────────────────────────────────── */
|
||
|
|
var forgeMessages = [];
|
||
|
|
var forgeTemplates = {};
|
||
|
|
var convBuilderMsgs = [];
|
||
|
|
|
||
|
|
/* ── Init ───────────────────────────────────────────────────────── */
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
forgeLoadMessages();
|
||
|
|
forgeLoadTemplatesList();
|
||
|
|
forgeLoadTemplateDropdown();
|
||
|
|
});
|
||
|
|
|
||
|
|
/* ── Message Loading ────────────────────────────────────────────── */
|
||
|
|
function forgeLoadMessages() {
|
||
|
|
var params = new URLSearchParams();
|
||
|
|
var addr = document.getElementById('filter-contact').value;
|
||
|
|
var kw = document.getElementById('filter-keyword').value;
|
||
|
|
var df = document.getElementById('filter-date-from').value;
|
||
|
|
var dt = document.getElementById('filter-date-to').value;
|
||
|
|
if (addr) params.set('address', addr);
|
||
|
|
if (kw) params.set('keyword', kw);
|
||
|
|
if (df) params.set('date_from', String(new Date(df).getTime()));
|
||
|
|
if (dt) params.set('date_to', String(new Date(dt).getTime()));
|
||
|
|
var qs = params.toString();
|
||
|
|
fetchJSON('/sms-forge/messages' + (qs ? '?' + qs : '')).then(function(data) {
|
||
|
|
forgeMessages = data.messages || [];
|
||
|
|
forgeRenderChat();
|
||
|
|
forgeUpdateContactFilter();
|
||
|
|
var badge = document.getElementById('msg-badge');
|
||
|
|
if (badge) { badge.textContent = forgeMessages.length; badge.style.display = forgeMessages.length ? 'inline' : 'none'; }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeClearFilters() {
|
||
|
|
document.getElementById('filter-contact').value = '';
|
||
|
|
document.getElementById('filter-keyword').value = '';
|
||
|
|
document.getElementById('filter-date-from').value = '';
|
||
|
|
document.getElementById('filter-date-to').value = '';
|
||
|
|
forgeLoadMessages();
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeUpdateContactFilter() {
|
||
|
|
var sel = document.getElementById('filter-contact');
|
||
|
|
var cur = sel.value;
|
||
|
|
var contacts = {};
|
||
|
|
forgeMessages.forEach(function(m) {
|
||
|
|
if (m.address && !contacts[m.address]) contacts[m.address] = m.contact_name || m.address;
|
||
|
|
});
|
||
|
|
var html = '<option value="">All contacts</option>';
|
||
|
|
Object.keys(contacts).sort().forEach(function(addr) {
|
||
|
|
var selected = addr === cur ? ' selected' : '';
|
||
|
|
html += '<option value="' + escapeHtml(addr) + '"' + selected + '>' + escapeHtml(contacts[addr]) + ' (' + escapeHtml(addr) + ')</option>';
|
||
|
|
});
|
||
|
|
sel.innerHTML = html;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Chat Rendering ─────────────────────────────────────────────── */
|
||
|
|
function forgeRenderChat() {
|
||
|
|
var container = document.getElementById('forge-chat');
|
||
|
|
if (!forgeMessages.length) {
|
||
|
|
container.innerHTML = '<div style="color:var(--text-muted);text-align:center;padding:40px 0">No messages loaded</div>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var html = '';
|
||
|
|
var lastContact = '';
|
||
|
|
forgeMessages.forEach(function(m, vi) {
|
||
|
|
var idx = (m.index !== undefined) ? m.index : vi;
|
||
|
|
var isSent = (m.msg_kind === 'mms') ? (m.msg_box === 2) : (m.type === 2);
|
||
|
|
var cls = isSent ? 'forge-bubble-sent' : 'forge-bubble-received';
|
||
|
|
var body = m.body || '';
|
||
|
|
if (m.msg_kind === 'mms' && !body) {
|
||
|
|
(m.parts || []).forEach(function(p) { if (p.ct === 'text/plain' && p.text !== 'null') body = p.text; });
|
||
|
|
}
|
||
|
|
var contactLabel = '';
|
||
|
|
if (!isSent && m.contact_name && m.contact_name !== lastContact) {
|
||
|
|
contactLabel = '<div class="forge-contact-label">' + escapeHtml(m.contact_name || m.address) + '</div>';
|
||
|
|
lastContact = m.contact_name;
|
||
|
|
} else if (isSent) {
|
||
|
|
lastContact = '';
|
||
|
|
}
|
||
|
|
var mmsTag = m.msg_kind === 'mms' ? '<span class="mms-tag">MMS</span>' : '';
|
||
|
|
var mmsCls = m.msg_kind === 'mms' ? ' forge-bubble-mms' : '';
|
||
|
|
var date = m.readable_date || '';
|
||
|
|
html += contactLabel;
|
||
|
|
html += '<div class="forge-bubble ' + cls + mmsCls + '" data-idx="' + idx + '">';
|
||
|
|
html += mmsTag + escapeHtml(body);
|
||
|
|
html += '<div class="bubble-meta"><span>' + escapeHtml(date) + '</span>';
|
||
|
|
html += '<span class="bubble-actions">';
|
||
|
|
html += '<button onclick="forgeEditMsg(' + idx + ')" title="Edit">edit</button>';
|
||
|
|
html += '<button onclick="forgeDeleteMsg(' + idx + ')" title="Delete">del</button>';
|
||
|
|
html += '</span></div></div>';
|
||
|
|
});
|
||
|
|
container.innerHTML = html;
|
||
|
|
container.scrollTop = container.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Add SMS ────────────────────────────────────────────────────── */
|
||
|
|
function forgeShowAddSMS() {
|
||
|
|
document.getElementById('sms-address').value = '';
|
||
|
|
document.getElementById('sms-contact').value = '';
|
||
|
|
document.getElementById('sms-body').value = '';
|
||
|
|
document.getElementById('sms-type').value = '1';
|
||
|
|
document.getElementById('sms-timestamp').value = '';
|
||
|
|
document.getElementById('sms-edit-index').value = '';
|
||
|
|
document.getElementById('modal-sms-title').textContent = 'Add SMS';
|
||
|
|
document.getElementById('btn-sms-save').textContent = 'Add SMS';
|
||
|
|
document.getElementById('modal-sms').style.display = 'flex';
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeEditMsg(idx) {
|
||
|
|
fetchJSON('/sms-forge/messages').then(function(data) {
|
||
|
|
var msg = null;
|
||
|
|
(data.messages || []).forEach(function(m) { if (m.index === idx) msg = m; });
|
||
|
|
if (!msg) return;
|
||
|
|
document.getElementById('sms-address').value = msg.address || '';
|
||
|
|
document.getElementById('sms-contact').value = msg.contact_name || '';
|
||
|
|
document.getElementById('sms-body').value = msg.body || '';
|
||
|
|
document.getElementById('sms-type').value = String(msg.type || msg.msg_box || 1);
|
||
|
|
if (msg.date) {
|
||
|
|
var d = new Date(msg.date);
|
||
|
|
var iso = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0') + 'T' + String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0');
|
||
|
|
document.getElementById('sms-timestamp').value = iso;
|
||
|
|
}
|
||
|
|
document.getElementById('sms-edit-index').value = String(idx);
|
||
|
|
document.getElementById('modal-sms-title').textContent = 'Edit Message #' + idx;
|
||
|
|
document.getElementById('btn-sms-save').textContent = 'Save Changes';
|
||
|
|
document.getElementById('modal-sms').style.display = 'flex';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeSaveSMS() {
|
||
|
|
var editIdx = document.getElementById('sms-edit-index').value;
|
||
|
|
var ts = document.getElementById('sms-timestamp').value;
|
||
|
|
var timestamp = ts ? new Date(ts).getTime() : null;
|
||
|
|
|
||
|
|
if (editIdx !== '') {
|
||
|
|
var payload = {};
|
||
|
|
payload.body = document.getElementById('sms-body').value;
|
||
|
|
payload.contact_name = document.getElementById('sms-contact').value;
|
||
|
|
if (timestamp) payload.timestamp = timestamp;
|
||
|
|
fetchJSON('/sms-forge/message/' + editIdx, {
|
||
|
|
method: 'PUT',
|
||
|
|
headers: {'Content-Type': 'application/json'},
|
||
|
|
body: JSON.stringify(payload)
|
||
|
|
}).then(function(r) {
|
||
|
|
forgeCloseModal('modal-sms');
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
var data = {
|
||
|
|
address: document.getElementById('sms-address').value,
|
||
|
|
body: document.getElementById('sms-body').value,
|
||
|
|
type: parseInt(document.getElementById('sms-type').value),
|
||
|
|
contact_name: document.getElementById('sms-contact').value,
|
||
|
|
};
|
||
|
|
if (timestamp) data.timestamp = timestamp;
|
||
|
|
postJSON('/sms-forge/sms', data).then(function(r) {
|
||
|
|
forgeCloseModal('modal-sms');
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeCloseModal(id) {
|
||
|
|
document.getElementById(id).style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Add MMS ────────────────────────────────────────────────────── */
|
||
|
|
function forgeShowAddMMS() {
|
||
|
|
document.getElementById('mms-address').value = '';
|
||
|
|
document.getElementById('mms-contact').value = '';
|
||
|
|
document.getElementById('mms-body').value = '';
|
||
|
|
document.getElementById('mms-type').value = '1';
|
||
|
|
document.getElementById('mms-timestamp').value = '';
|
||
|
|
document.getElementById('mms-attachment-data').value = '';
|
||
|
|
document.getElementById('mms-attachment-name').value = '';
|
||
|
|
document.getElementById('mms-attachment-ct').value = 'image/jpeg';
|
||
|
|
document.getElementById('modal-mms').style.display = 'flex';
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeSaveMMS() {
|
||
|
|
var ts = document.getElementById('mms-timestamp').value;
|
||
|
|
var timestamp = ts ? new Date(ts).getTime() : null;
|
||
|
|
var attachments = [];
|
||
|
|
var attData = document.getElementById('mms-attachment-data').value.trim();
|
||
|
|
var attName = document.getElementById('mms-attachment-name').value.trim();
|
||
|
|
var attCt = document.getElementById('mms-attachment-ct').value.trim();
|
||
|
|
if (attData && attName) {
|
||
|
|
attachments.push({data: attData, filename: attName, content_type: attCt || 'application/octet-stream'});
|
||
|
|
}
|
||
|
|
var data = {
|
||
|
|
address: document.getElementById('mms-address').value,
|
||
|
|
body: document.getElementById('mms-body').value,
|
||
|
|
msg_box: parseInt(document.getElementById('mms-type').value),
|
||
|
|
contact_name: document.getElementById('mms-contact').value,
|
||
|
|
attachments: attachments,
|
||
|
|
};
|
||
|
|
if (timestamp) data.timestamp = timestamp;
|
||
|
|
postJSON('/sms-forge/mms', data).then(function(r) {
|
||
|
|
forgeCloseModal('modal-mms');
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Delete ──────────────────────────────────────────────────────── */
|
||
|
|
function forgeDeleteMsg(idx) {
|
||
|
|
if (!confirm('Delete message #' + idx + '?')) return;
|
||
|
|
fetchJSON('/sms-forge/message/' + idx, {method: 'DELETE'}).then(function(r) {
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeClearAll() {
|
||
|
|
if (!confirm('Clear ALL messages? This cannot be undone.')) return;
|
||
|
|
postJSON('/sms-forge/clear', {}).then(function() {
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Generate from Template ─────────────────────────────────────── */
|
||
|
|
function forgeLoadTemplateDropdown() {
|
||
|
|
fetchJSON('/sms-forge/templates').then(function(data) {
|
||
|
|
forgeTemplates = data;
|
||
|
|
var sel = document.getElementById('gen-template');
|
||
|
|
var html = '<option value="">-- Select template --</option>';
|
||
|
|
Object.keys(data).forEach(function(key) {
|
||
|
|
html += '<option value="' + escapeHtml(key) + '">' + escapeHtml(data[key].name) + '</option>';
|
||
|
|
});
|
||
|
|
sel.innerHTML = html;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeTemplateChanged() {
|
||
|
|
var key = document.getElementById('gen-template').value;
|
||
|
|
var container = document.getElementById('gen-variables');
|
||
|
|
if (!key || !forgeTemplates[key]) { container.innerHTML = ''; return; }
|
||
|
|
var tmpl = forgeTemplates[key];
|
||
|
|
var vars = tmpl.variables || [];
|
||
|
|
if (!vars.length) { container.innerHTML = '<p style="font-size:0.8rem;color:var(--text-muted)">No variables for this template.</p>'; return; }
|
||
|
|
var html = '<div class="form-row" style="flex-wrap:wrap;gap:8px">';
|
||
|
|
vars.forEach(function(v) {
|
||
|
|
html += '<div class="form-group" style="min-width:140px;flex:1"><label>' + escapeHtml(v) + '</label>';
|
||
|
|
html += '<input type="text" id="gen-var-' + escapeHtml(v) + '" placeholder="' + escapeHtml(v) + '"></div>';
|
||
|
|
});
|
||
|
|
html += '</div>';
|
||
|
|
container.innerHTML = html;
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeGenerate() {
|
||
|
|
var btn = document.getElementById('btn-generate');
|
||
|
|
setLoading(btn, true);
|
||
|
|
var key = document.getElementById('gen-template').value;
|
||
|
|
if (!key) { renderOutput('gen-output', 'Please select a template.'); document.getElementById('gen-output').style.display='block'; setLoading(btn,false); return; }
|
||
|
|
var tmpl = forgeTemplates[key];
|
||
|
|
var variables = {};
|
||
|
|
(tmpl.variables || []).forEach(function(v) {
|
||
|
|
var el = document.getElementById('gen-var-' + v);
|
||
|
|
if (el) variables[v] = el.value;
|
||
|
|
});
|
||
|
|
var ts = document.getElementById('gen-start').value;
|
||
|
|
var data = {
|
||
|
|
address: document.getElementById('gen-address').value,
|
||
|
|
contact_name: document.getElementById('gen-contact').value,
|
||
|
|
template: key,
|
||
|
|
variables: variables,
|
||
|
|
};
|
||
|
|
if (ts) data.start_timestamp = new Date(ts).getTime();
|
||
|
|
postJSON('/sms-forge/generate', data).then(function(r) {
|
||
|
|
setLoading(btn, false);
|
||
|
|
var out = document.getElementById('gen-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
out.textContent = r.ok ? 'Generated ' + (r.added || 0) + ' messages.' : 'Error: ' + (r.error || 'unknown');
|
||
|
|
forgeLoadMessages();
|
||
|
|
}).catch(function(e) { setLoading(btn, false); });
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Manual Conversation Builder ────────────────────────────────── */
|
||
|
|
function convAddMsg(type) {
|
||
|
|
convBuilderMsgs.push({body: '', type: type, delay_minutes: 5});
|
||
|
|
convRender();
|
||
|
|
}
|
||
|
|
|
||
|
|
function convRender() {
|
||
|
|
var container = document.getElementById('conv-builder-messages');
|
||
|
|
var html = '';
|
||
|
|
convBuilderMsgs.forEach(function(m, i) {
|
||
|
|
var typeLabel = m.type === 2 ? 'Sent' : 'Received';
|
||
|
|
html += '<div class="conv-msg-row">';
|
||
|
|
html += '<select onchange="convBuilderMsgs[' + i + '].type=parseInt(this.value);convRenderPreview()">';
|
||
|
|
html += '<option value="1"' + (m.type===1?' selected':'') + '>IN</option>';
|
||
|
|
html += '<option value="2"' + (m.type===2?' selected':'') + '>OUT</option></select>';
|
||
|
|
html += '<textarea placeholder="Message text..." oninput="convBuilderMsgs[' + i + '].body=this.value;convRenderPreview()">' + escapeHtml(m.body) + '</textarea>';
|
||
|
|
html += '<input type="number" value="' + m.delay_minutes + '" min="0" placeholder="min" title="Delay (minutes)" onchange="convBuilderMsgs[' + i + '].delay_minutes=parseInt(this.value)||0">';
|
||
|
|
html += '<button onclick="convBuilderMsgs.splice(' + i + ',1);convRender()" title="Remove">×</button>';
|
||
|
|
html += '</div>';
|
||
|
|
});
|
||
|
|
container.innerHTML = html;
|
||
|
|
convRenderPreview();
|
||
|
|
}
|
||
|
|
|
||
|
|
function convRenderPreview() {
|
||
|
|
var preview = document.getElementById('conv-preview');
|
||
|
|
if (!convBuilderMsgs.length) { preview.style.display = 'none'; return; }
|
||
|
|
preview.style.display = 'block';
|
||
|
|
var html = '';
|
||
|
|
convBuilderMsgs.forEach(function(m) {
|
||
|
|
if (!m.body) return;
|
||
|
|
var cls = m.type === 2 ? 'forge-bubble-sent' : 'forge-bubble-received';
|
||
|
|
html += '<div class="forge-bubble ' + cls + '">' + escapeHtml(m.body) + '</div>';
|
||
|
|
});
|
||
|
|
preview.innerHTML = html || '<div style="color:var(--text-muted);padding:12px;text-align:center">Type messages above to preview</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
function convSubmit() {
|
||
|
|
if (!convBuilderMsgs.length) return;
|
||
|
|
var ts = document.getElementById('conv-start').value;
|
||
|
|
var data = {
|
||
|
|
address: document.getElementById('conv-address').value,
|
||
|
|
contact_name: document.getElementById('conv-contact').value,
|
||
|
|
messages: convBuilderMsgs,
|
||
|
|
};
|
||
|
|
if (ts) data.start_timestamp = new Date(ts).getTime();
|
||
|
|
postJSON('/sms-forge/conversation', data).then(function(r) {
|
||
|
|
var out = document.getElementById('conv-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
out.textContent = r.ok ? 'Added ' + (r.added || 0) + ' messages.' : 'Error: ' + (r.error || 'unknown');
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function convClear() {
|
||
|
|
convBuilderMsgs = [];
|
||
|
|
convRender();
|
||
|
|
document.getElementById('conv-output').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Replace Contact ────────────────────────────────────────────── */
|
||
|
|
function forgeReplaceContact() {
|
||
|
|
var data = {
|
||
|
|
old_address: document.getElementById('replace-old').value,
|
||
|
|
new_address: document.getElementById('replace-new').value,
|
||
|
|
new_name: document.getElementById('replace-name').value || null,
|
||
|
|
};
|
||
|
|
postJSON('/sms-forge/replace-contact', data).then(function(r) {
|
||
|
|
var out = document.getElementById('replace-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
out.textContent = r.ok ? 'Updated ' + r.updated + ' messages.' : 'Error: ' + (r.error || 'unknown');
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Shift Timestamps ───────────────────────────────────────────── */
|
||
|
|
function forgeShiftTimestamps() {
|
||
|
|
var data = {
|
||
|
|
address: document.getElementById('shift-address').value || null,
|
||
|
|
offset_minutes: parseInt(document.getElementById('shift-offset').value) || 0,
|
||
|
|
};
|
||
|
|
postJSON('/sms-forge/shift-timestamps', data).then(function(r) {
|
||
|
|
var out = document.getElementById('shift-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
out.textContent = r.ok ? 'Shifted ' + r.shifted + ' messages by ' + r.offset_minutes + ' minutes.' : 'Error: ' + (r.error || 'unknown');
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Import / Export ────────────────────────────────────────────── */
|
||
|
|
function forgeImport() {
|
||
|
|
var input = document.getElementById('import-file');
|
||
|
|
if (!input.files.length) { renderOutput('import-output', 'No file selected.'); document.getElementById('import-output').style.display='block'; return; }
|
||
|
|
var fd = new FormData();
|
||
|
|
fd.append('file', input.files[0]);
|
||
|
|
fetch('/sms-forge/import', {method: 'POST', body: fd}).then(function(r){return r.json();}).then(function(r) {
|
||
|
|
var out = document.getElementById('import-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
if (r.ok) {
|
||
|
|
out.textContent = 'Imported ' + (r.added || r.count || 0) + ' messages. Total: ' + (r.total || '?');
|
||
|
|
} else {
|
||
|
|
out.textContent = 'Error: ' + (r.error || 'unknown');
|
||
|
|
}
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeValidate() {
|
||
|
|
var input = document.getElementById('import-file');
|
||
|
|
if (!input.files.length) { renderOutput('import-output', 'No file selected.'); document.getElementById('import-output').style.display='block'; return; }
|
||
|
|
var fd = new FormData();
|
||
|
|
fd.append('file', input.files[0]);
|
||
|
|
fetch('/sms-forge/validate', {method: 'POST', body: fd}).then(function(r){return r.json();}).then(function(r) {
|
||
|
|
var out = document.getElementById('import-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
if (r.valid) {
|
||
|
|
out.textContent = 'Valid SMS Backup & Restore XML (' + r.element_count + ' elements).';
|
||
|
|
} else {
|
||
|
|
var txt = 'Validation issues:\n';
|
||
|
|
(r.issues || []).forEach(function(iss) { txt += ' - ' + iss + '\n'; });
|
||
|
|
if (r.error) txt += '\nError: ' + r.error;
|
||
|
|
out.textContent = txt;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeMerge() {
|
||
|
|
var input = document.getElementById('merge-files');
|
||
|
|
if (!input.files.length) { renderOutput('merge-output', 'No files selected.'); document.getElementById('merge-output').style.display='block'; return; }
|
||
|
|
var fd = new FormData();
|
||
|
|
for (var i = 0; i < input.files.length; i++) fd.append('files', input.files[i]);
|
||
|
|
fetch('/sms-forge/merge', {method: 'POST', body: fd}).then(function(r){return r.json();}).then(function(r) {
|
||
|
|
var out = document.getElementById('merge-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
if (r.ok) {
|
||
|
|
out.textContent = 'Merged: ' + r.total + ' total messages (' + r.added + ' new).';
|
||
|
|
if (r.errors) r.errors.forEach(function(e) { out.textContent += '\n Warning: ' + e; });
|
||
|
|
} else {
|
||
|
|
out.textContent = 'Error: ' + (r.error || 'unknown');
|
||
|
|
}
|
||
|
|
forgeLoadMessages();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeExport() {
|
||
|
|
var fmt = document.getElementById('export-format').value;
|
||
|
|
window.location.href = '/sms-forge/export/' + fmt;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Stats ──────────────────────────────────────────────────────── */
|
||
|
|
function forgeLoadStats() {
|
||
|
|
fetchJSON('/sms-forge/stats').then(function(s) {
|
||
|
|
var html = '<div class="stats-grid">';
|
||
|
|
html += '<div class="stat-card"><div class="stat-value">' + s.total + '</div><div class="stat-label">Total Messages</div></div>';
|
||
|
|
html += '<div class="stat-card"><div class="stat-value">' + s.sms_count + '</div><div class="stat-label">SMS</div></div>';
|
||
|
|
html += '<div class="stat-card"><div class="stat-value">' + s.mms_count + '</div><div class="stat-label">MMS</div></div>';
|
||
|
|
html += '<div class="stat-card"><div class="stat-value">' + s.sent + '</div><div class="stat-label">Sent</div></div>';
|
||
|
|
html += '<div class="stat-card"><div class="stat-value">' + s.received + '</div><div class="stat-label">Received</div></div>';
|
||
|
|
html += '<div class="stat-card"><div class="stat-value">' + (s.contacts ? s.contacts.length : 0) + '</div><div class="stat-label">Contacts</div></div>';
|
||
|
|
html += '</div>';
|
||
|
|
if (s.date_range) {
|
||
|
|
html += '<p style="font-size:0.8rem;color:var(--text-secondary)"><strong>Date range:</strong> ' + escapeHtml(s.date_range.earliest_readable) + ' — ' + escapeHtml(s.date_range.latest_readable) + '</p>';
|
||
|
|
}
|
||
|
|
if (s.contacts && s.contacts.length) {
|
||
|
|
html += '<table style="width:100%;font-size:0.8rem;margin-top:8px"><thead><tr style="color:var(--text-muted)"><th style="text-align:left">Address</th><th style="text-align:left">Name</th><th style="text-align:right">Count</th></tr></thead><tbody>';
|
||
|
|
s.contacts.forEach(function(c) {
|
||
|
|
html += '<tr><td>' + escapeHtml(c.address) + '</td><td>' + escapeHtml(c.name) + '</td><td style="text-align:right">' + c.count + '</td></tr>';
|
||
|
|
});
|
||
|
|
html += '</tbody></table>';
|
||
|
|
}
|
||
|
|
document.getElementById('stats-panel').innerHTML = html;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Templates List (Tab 4) ─────────────────────────────────────── */
|
||
|
|
function forgeLoadTemplatesList() {
|
||
|
|
fetchJSON('/sms-forge/templates').then(function(data) {
|
||
|
|
var container = document.getElementById('templates-list');
|
||
|
|
var html = '';
|
||
|
|
Object.keys(data).forEach(function(key) {
|
||
|
|
var t = data[key];
|
||
|
|
var tag = t.builtin ? '<span class="tmpl-tag">built-in</span>' : '<span class="tmpl-tag custom">custom</span>';
|
||
|
|
html += '<div class="tmpl-card">';
|
||
|
|
html += '<h4>' + escapeHtml(t.name) + tag + '</h4>';
|
||
|
|
html += '<div class="tmpl-desc">' + escapeHtml(t.description) + '</div>';
|
||
|
|
if (t.variables && t.variables.length) {
|
||
|
|
html += '<div class="tmpl-vars">Variables: ' + t.variables.map(function(v){return '<code>{'+ escapeHtml(v) +'}</code>';}).join(', ') + '</div>';
|
||
|
|
}
|
||
|
|
if (t.messages && t.messages.length) {
|
||
|
|
html += '<div class="tmpl-preview">';
|
||
|
|
t.messages.forEach(function(m) {
|
||
|
|
var dir = m.type === 2 ? '→' : '←';
|
||
|
|
var delay = m.delay_minutes ? ' <span style="color:var(--text-muted)">(+' + m.delay_minutes + 'min)</span>' : '';
|
||
|
|
html += '<div>' + dir + ' ' + escapeHtml(m.body) + delay + '</div>';
|
||
|
|
});
|
||
|
|
html += '</div>';
|
||
|
|
}
|
||
|
|
html += '<div style="font-size:0.75rem;color:var(--text-muted);margin-top:6px">' + t.message_count + ' messages</div>';
|
||
|
|
html += '</div>';
|
||
|
|
});
|
||
|
|
container.innerHTML = html || '<p style="color:var(--text-muted)">No templates available.</p>';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function forgeSaveTemplate() {
|
||
|
|
var key = document.getElementById('tmpl-key').value.trim();
|
||
|
|
var jsonStr = document.getElementById('tmpl-json').value.trim();
|
||
|
|
var out = document.getElementById('tmpl-output');
|
||
|
|
out.style.display = 'block';
|
||
|
|
if (!key) { out.textContent = 'Please enter a template key.'; return; }
|
||
|
|
var tmpl;
|
||
|
|
try { tmpl = JSON.parse(jsonStr); } catch(e) { out.textContent = 'Invalid JSON: ' + e.message; return; }
|
||
|
|
postJSON('/sms-forge/templates/save', {key: key, template: tmpl}).then(function(r) {
|
||
|
|
if (r.ok) {
|
||
|
|
out.textContent = 'Template "' + key + '" saved. Use it in the Conversations tab.';
|
||
|
|
forgeLoadTemplatesList();
|
||
|
|
forgeLoadTemplateDropdown();
|
||
|
|
} else {
|
||
|
|
out.textContent = 'Error: ' + (r.error || 'unknown');
|
||
|
|
}
|
||
|
|
}).catch(function(e) {
|
||
|
|
out.textContent = 'Error saving template: ' + e.message;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|