Add call history, dark mode toggle, caller ID persistence, and refactor phone page
Phone page improvements: - Clear caller number display after call disconnects - Add "Recent" tab with session call history (tap to call back) - Persist outbound caller ID selection in localStorage - Fix button overlap with proper z-index layering - Add manual dark mode toggle (System/Light/Dark) in Settings - Improve dark mode CSS for all UI elements Refactor phone page into separate files: - assets/mobile/phone.css (848 lines) — all CSS - assets/mobile/phone.js (1065 lines) — all JavaScript - assets/mobile/phone-template.php (267 lines) — HTML template - includes/class-twp-mobile-phone-page.php (211 lines) — PHP controller - PHP values passed to JS via window.twpConfig bridge Flutter app: - Replace FAB with slim AppBar (refresh + menu buttons) - Fix dark mode colors using theme-aware colorScheme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude
267
assets/mobile/phone-template.php
Normal file
267
assets/mobile/phone-template.php
Normal file
@@ -0,0 +1,267 @@
|
||||
<?php
|
||||
/**
|
||||
* Mobile Phone Page Template
|
||||
*
|
||||
* This template is require'd from TWP_Mobile_Phone_Page::render_page().
|
||||
* All PHP variables ($extension_data, $is_logged_in, $agent_status, etc.)
|
||||
* are in scope from the calling method.
|
||||
*
|
||||
* @package Twilio_WP_Plugin
|
||||
*/
|
||||
|
||||
// Prevent direct access.
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
?><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
<title>Phone - <?php echo esc_html(get_bloginfo('name')); ?></title>
|
||||
|
||||
<!-- jQuery (WordPress bundled) -->
|
||||
<script src="<?php echo includes_url('js/jquery/jquery.min.js'); ?>"></script>
|
||||
|
||||
<!-- Preload Twilio SDK -->
|
||||
<link rel="preload" href="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js" as="script">
|
||||
<link rel="dns-prefetch" href="//unpkg.com">
|
||||
<link rel="dns-prefetch" href="//chunderw-vpc-gll.twilio.com">
|
||||
<link rel="preconnect" href="https://chunderw-vpc-gll.twilio.com" crossorigin>
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="<?php echo plugins_url('assets/mobile/phone.css', $plugin_file); ?>">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="twp-app">
|
||||
|
||||
<!-- Agent Status Bar -->
|
||||
<div class="agent-status-bar">
|
||||
<div class="status-info">
|
||||
<span class="extension-badge"><?php echo $extension_data ? esc_html($extension_data->extension) : '—'; ?></span>
|
||||
|
||||
<button id="login-toggle-btn" class="<?php echo $is_logged_in ? 'logged-in' : ''; ?>" onclick="toggleAgentLogin()">
|
||||
<?php echo $is_logged_in ? 'Log Out' : 'Log In'; ?>
|
||||
</button>
|
||||
|
||||
<select id="agent-status-select" onchange="updateAgentStatus(this.value)" <?php echo !$is_logged_in ? 'disabled' : ''; ?>>
|
||||
<option value="available" <?php selected($agent_status->status ?? '', 'available'); ?>>Available</option>
|
||||
<option value="busy" <?php selected($agent_status->status ?? '', 'busy'); ?>>Busy</option>
|
||||
<option value="offline" <?php selected($agent_status->status ?? 'offline', 'offline'); ?>>Offline</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="agent-stats">
|
||||
<span>Today: <strong><?php echo esc_html($agent_stats['calls_today']); ?></strong></span>
|
||||
<span>Total: <strong><?php echo esc_html($agent_stats['total_calls']); ?></strong></span>
|
||||
<span>Avg: <strong><?php echo round($agent_stats['avg_duration'] ?? 0); ?>s</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-nav">
|
||||
<button class="tab-btn active" data-tab="phone">Phone</button>
|
||||
<button class="tab-btn" data-tab="recent">Recent</button>
|
||||
<button class="tab-btn" data-tab="queues">Queues</button>
|
||||
<button class="tab-btn" data-tab="settings">Settings</button>
|
||||
</div>
|
||||
|
||||
<!-- Notices container -->
|
||||
<div id="twp-notices"></div>
|
||||
|
||||
<!-- Error display -->
|
||||
<div id="browser-phone-error" style="display:none;"></div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
|
||||
<!-- Phone Tab -->
|
||||
<div class="tab-pane active" id="tab-phone">
|
||||
<div class="phone-interface">
|
||||
<div class="phone-display">
|
||||
<div id="phone-status">Ready</div>
|
||||
<div id="device-connection-status">Loading...</div>
|
||||
<div id="phone-number-display"></div>
|
||||
<div id="call-timer" style="display:none;">00:00</div>
|
||||
</div>
|
||||
|
||||
<input type="tel" id="phone-number-input" placeholder="Enter phone number" />
|
||||
|
||||
<div class="dialpad-grid">
|
||||
<button class="dialpad-btn" data-digit="1">1</button>
|
||||
<button class="dialpad-btn" data-digit="2">2<span>ABC</span></button>
|
||||
<button class="dialpad-btn" data-digit="3">3<span>DEF</span></button>
|
||||
<button class="dialpad-btn" data-digit="4">4<span>GHI</span></button>
|
||||
<button class="dialpad-btn" data-digit="5">5<span>JKL</span></button>
|
||||
<button class="dialpad-btn" data-digit="6">6<span>MNO</span></button>
|
||||
<button class="dialpad-btn" data-digit="7">7<span>PQRS</span></button>
|
||||
<button class="dialpad-btn" data-digit="8">8<span>TUV</span></button>
|
||||
<button class="dialpad-btn" data-digit="9">9<span>WXYZ</span></button>
|
||||
<button class="dialpad-btn" data-digit="*">*</button>
|
||||
<button class="dialpad-btn" data-digit="0">0<span>+</span></button>
|
||||
<button class="dialpad-btn" data-digit="#">#</button>
|
||||
</div>
|
||||
|
||||
<div class="phone-controls">
|
||||
<button id="call-btn" class="btn-phone btn-call">
|
||||
📞 Call
|
||||
</button>
|
||||
<button id="hangup-btn" class="btn-phone btn-hangup" style="display:none;">
|
||||
❌ Hang Up
|
||||
</button>
|
||||
<button id="answer-btn" class="btn-phone btn-answer" style="display:none;">
|
||||
📞 Answer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="admin-call-controls-panel" style="display:none;">
|
||||
<div class="call-controls-grid">
|
||||
<button id="admin-hold-btn" class="btn-ctrl" title="Hold">
|
||||
⏸ Hold
|
||||
</button>
|
||||
<button id="admin-transfer-btn" class="btn-ctrl" title="Transfer">
|
||||
↪ Transfer
|
||||
</button>
|
||||
<button id="admin-requeue-btn" class="btn-ctrl" title="Requeue">
|
||||
🔄 Requeue
|
||||
</button>
|
||||
<button id="admin-record-btn" class="btn-ctrl" title="Record">
|
||||
⏺ Record
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Tab -->
|
||||
<div class="tab-pane" id="tab-recent">
|
||||
<div class="recent-panel">
|
||||
<div class="recent-header">
|
||||
<h4>Recent Calls</h4>
|
||||
<button type="button" id="clear-history-btn" class="btn-sm">Clear</button>
|
||||
</div>
|
||||
<div id="recent-call-list">
|
||||
<div class="recent-empty">No calls yet this session.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Queues Tab -->
|
||||
<div class="tab-pane" id="tab-queues">
|
||||
<div class="queue-panel">
|
||||
<div class="queue-header">
|
||||
<h4>Your Queues</h4>
|
||||
<?php if ($extension_data): ?>
|
||||
<div class="user-extension-admin">Ext: <strong><?php echo esc_html($extension_data->extension); ?></strong></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div id="admin-queue-list">
|
||||
<div class="queue-loading">Loading your queues...</div>
|
||||
</div>
|
||||
<div class="queue-actions">
|
||||
<button type="button" id="admin-refresh-queues" class="btn-refresh">Refresh Queues</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Tab -->
|
||||
<div class="tab-pane" id="tab-settings">
|
||||
<div class="settings-panel">
|
||||
<!-- Caller ID -->
|
||||
<div class="settings-section">
|
||||
<h4>Outbound Caller ID</h4>
|
||||
<select id="caller-id-select">
|
||||
<option value="">Loading numbers...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Auto-answer -->
|
||||
<div class="settings-section">
|
||||
<label><input type="checkbox" id="auto-answer" /> Auto-answer incoming calls</label>
|
||||
</div>
|
||||
|
||||
<!-- Dark Mode -->
|
||||
<div class="settings-section">
|
||||
<h4>Appearance</h4>
|
||||
<div class="dark-mode-options">
|
||||
<button type="button" class="dark-mode-opt" data-theme="system">System</button>
|
||||
<button type="button" class="dark-mode-opt" data-theme="light">Light</button>
|
||||
<button type="button" class="dark-mode-opt" data-theme="dark">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call Mode -->
|
||||
<div class="settings-section">
|
||||
<h4>Call Reception Mode</h4>
|
||||
<div class="mode-selection">
|
||||
<label class="mode-option <?php echo $current_mode === 'browser' ? 'active' : ''; ?>">
|
||||
<input type="radio" name="call_mode" value="browser" <?php checked($current_mode, 'browser'); ?>>
|
||||
<div class="mode-icon">💻</div>
|
||||
<div class="mode-details">
|
||||
<strong>Browser Phone</strong>
|
||||
<small>Calls ring in this browser</small>
|
||||
</div>
|
||||
</label>
|
||||
<label class="mode-option <?php echo $current_mode === 'cell' ? 'active' : ''; ?>">
|
||||
<input type="radio" name="call_mode" value="cell" <?php checked($current_mode, 'cell'); ?>>
|
||||
<div class="mode-icon">📱</div>
|
||||
<div class="mode-details">
|
||||
<strong>Cell Phone</strong>
|
||||
<small>Forward to your mobile</small>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mode-status">
|
||||
<div id="current-mode-display">
|
||||
<strong>Current:</strong>
|
||||
<span id="mode-text"><?php echo $current_mode === 'browser' ? 'Browser Phone' : 'Cell Phone'; ?></span>
|
||||
</div>
|
||||
<button type="button" id="save-mode-btn" style="display:none;">Save</button>
|
||||
</div>
|
||||
<div class="mode-info">
|
||||
<div class="browser-mode-info" style="display:<?php echo $current_mode === 'browser' ? 'block' : 'none'; ?>;">
|
||||
<p>Keep this page open to receive calls.</p>
|
||||
</div>
|
||||
<div class="cell-mode-info" style="display:<?php echo $current_mode === 'cell' ? 'block' : 'none'; ?>;">
|
||||
<p>Calls forwarded to: <?php echo $user_phone ? esc_html($user_phone) : '<em>Not configured</em>'; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (!$smart_routing_configured && current_user_can('manage_options')): ?>
|
||||
<div class="setup-info">
|
||||
<h4>Setup Required</h4>
|
||||
<p>Update your phone number webhook to:</p>
|
||||
<code><?php echo esc_html($smart_routing_webhook); ?></code>
|
||||
<button type="button" class="btn-copy" onclick="copyToClipboard('<?php echo esc_js($smart_routing_webhook); ?>')">Copy</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- .tab-content -->
|
||||
</div><!-- .twp-app -->
|
||||
|
||||
<!-- Configuration for JavaScript -->
|
||||
<script>
|
||||
window.twpConfig = {
|
||||
ajaxUrl: <?php echo wp_json_encode($ajax_url); ?>,
|
||||
nonce: <?php echo wp_json_encode($nonce); ?>,
|
||||
ringtoneUrl: <?php echo wp_json_encode($ringtone_url); ?>,
|
||||
phoneIconUrl: <?php echo wp_json_encode($phone_icon_url); ?>,
|
||||
swUrl: <?php echo wp_json_encode($sw_url); ?>,
|
||||
twilioEdge: <?php echo wp_json_encode($twilio_edge); ?>
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Twilio Voice SDK v2.11.0 -->
|
||||
<script src="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js"></script>
|
||||
|
||||
<!-- Phone JavaScript -->
|
||||
<script src="<?php echo plugins_url('assets/mobile/phone.js', $plugin_file); ?>"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user