` : ''}
-
Storage
-
${subData.usage.storage_mb} MB / ${subData.plan.max_storage_mb === -1 ? 'Unlimited' : subData.plan.max_storage_mb + ' MB'}
+
${t('billing.storage')}
+
${subData.usage.storage_mb} MB / ${subData.plan.max_storage_mb === -1 ? t('billing.unlimited') : subData.plan.max_storage_mb + ' MB'}
${subData.plan.max_storage_mb > 0 ? `
` : ''}
-
Features
+
${t('billing.features')}
- ${subData.plan.remote_control ? '
✓ Remote Control
' : '
✗ Remote Control
'}
- ${subData.plan.remote_url ? '
✓ Remote URLs
' : '
✗ Remote URLs
'}
- ${subData.plan.priority_support ? '
✓ Priority Support
' : '
✗ Priority Support
'}
+ ${subData.plan.remote_control ? `
✓ ${t('billing.feat.remote_control')}
` : `
✗ ${t('billing.feat.remote_control')}
`}
+ ${subData.plan.remote_url ? `
✓ ${t('billing.feat.remote_urls')}
` : `
✗ ${t('billing.feat.remote_urls')}
`}
+ ${subData.plan.priority_support ? `
✓ ${t('billing.feat.priority_support')}
` : `
✗ ${t('billing.feat.priority_support')}
`}
-
-
Available Plans
+
${t('billing.available_plans')}
${plans.map(p => `
- ${p.id === subData.plan.id ? '
Current
' : ''}
+ ${p.id === subData.plan.id ? `
${t('billing.current')}
` : ''}
${p.display_name}
- ${p.price_monthly > 0 ? `$${p.price_monthly}/mo` : 'Free'}
+ ${p.price_monthly > 0 ? `$${p.price_monthly}${t('billing.per_month')}` : t('billing.free')}
-
${p.max_devices === -1 ? 'Unlimited' : p.max_devices} devices
-
${p.max_storage_mb === -1 ? 'Unlimited' : (p.max_storage_mb >= 1024 ? (p.max_storage_mb/1024) + ' GB' : p.max_storage_mb + ' MB')} storage
-
${p.remote_control ? '✓' : '✗'} Remote Control
-
${p.remote_url ? '✓' : '✗'} Remote URLs
-
${p.priority_support ? '✓' : '✗'} Priority Support
+
${p.max_devices === -1 ? t('billing.unlimited') : p.max_devices} ${t('billing.devices_lc')}
+
${p.max_storage_mb === -1 ? t('billing.unlimited') : (p.max_storage_mb >= 1024 ? (p.max_storage_mb/1024) + ' GB' : p.max_storage_mb + ' MB')} ${t('billing.storage_lc')}
+
${p.remote_control ? '✓' : '✗'} ${t('billing.feat.remote_control')}
+
${p.remote_url ? '✓' : '✗'} ${t('billing.feat.remote_urls')}
+
${p.priority_support ? '✓' : '✗'} ${t('billing.feat.priority_support')}
- ${p.price_yearly > 0 ? `
or $${p.price_yearly}/year (save ${Math.round((1 - p.price_yearly / (p.price_monthly * 12)) * 100)}%)
` : ''}
+ ${p.price_yearly > 0 ? `
${t('billing.yearly_save', { price: p.price_yearly, pct: Math.round((1 - p.price_yearly / (p.price_monthly * 12)) * 100) })}
` : ''}
${!subData.self_hosted && p.price_monthly > 0 && p.id !== subData.plan.id ? `
-
- ${p.price_yearly > 0 ? `` : ''}
+
+ ${p.price_yearly > 0 ? `` : ''}
` : ''}
${!subData.self_hosted && p.id === subData.plan.id && subData.subscription?.stripe_subscription_id ? `
-
+
` : ''}
`).join('')}
- ${subData.self_hosted ? '
Self-hosted mode: plans can be assigned by admins without billing.
' : ''}
+ ${subData.self_hosted ? `
${t('billing.self_hosted_note')}
` : ''}
`;
- // Checkout handler
+
window._checkout = async (planId, interval) => {
try {
const res = await fetch('/api/stripe/checkout', {
@@ -115,11 +114,10 @@ export async function render(container) {
if (data.error) { showToast(data.error, 'error'); return; }
if (data.url) window.location.href = data.url;
} catch (err) {
- showToast('Failed to start checkout: ' + err.message, 'error');
+ showToast(t('billing.toast.checkout_failed', { error: err.message }), 'error');
}
};
- // Manage subscription handler (Stripe Customer Portal)
window._manageSubscription = async () => {
try {
const res = await fetch('/api/stripe/portal', {
@@ -130,18 +128,17 @@ export async function render(container) {
if (data.error) { showToast(data.error, 'error'); return; }
if (data.url) window.location.href = data.url;
} catch (err) {
- showToast('Failed to open billing portal: ' + err.message, 'error');
+ showToast(t('billing.toast.portal_failed', { error: err.message }), 'error');
}
};
- // Check for payment success/cancel in URL
if (window.location.hash.includes('payment=success')) {
- showToast('Payment successful! Your plan has been upgraded.', 'success');
+ showToast(t('billing.toast.payment_success'), 'success');
window.location.hash = '#/billing';
}
} catch (err) {
- document.getElementById('billingContent').innerHTML = `
Failed to load
${esc(err.message)}
`;
+ document.getElementById('billingContent').innerHTML = `
${t('billing.failed_to_load')}
${esc(err.message)}
`;
}
}
diff --git a/frontend/js/views/layout-editor.js b/frontend/js/views/layout-editor.js
index 5876b0b..e216529 100644
--- a/frontend/js/views/layout-editor.js
+++ b/frontend/js/views/layout-editor.js
@@ -1,5 +1,6 @@
import { api } from '../api.js';
import { showToast } from '../components/toast.js';
+import { t, tn } from '../i18n.js';
const API = (url, opts = {}) => fetch('/api' + url, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('token')}`, ...opts.headers }, ...opts }).then(r => r.json());
@@ -15,22 +16,22 @@ export async function render(container) {
async function renderList(container) {
container.innerHTML = `
-
Templates
+
${t('layout.templates')}
-
My Layouts
+
${t('layout.my_layouts')}
`;
document.getElementById('newLayoutBtn').onclick = async () => {
- const name = prompt('Layout name:');
+ const name = prompt(t('layout.prompt_name'));
if (!name) return;
- const layout = await API('/layouts', { method: 'POST', body: JSON.stringify({ name, zones: [{ name: 'Main', x_percent: 0, y_percent: 0, width_percent: 100, height_percent: 100 }] }) });
+ const layout = await API('/layouts', { method: 'POST', body: JSON.stringify({ name, zones: [{ name: t('layout.default_zone_name'), x_percent: 0, y_percent: 0, width_percent: 100, height_percent: 100 }] }) });
window.location.hash = `#/layout/${layout.id}`;
};
@@ -41,9 +42,8 @@ async function renderList(container) {
document.getElementById('templateGrid').innerHTML = templates.map(l => renderLayoutCard(l, true)).join('');
document.getElementById('layoutGrid').innerHTML = custom.length ? custom.map(l => renderLayoutCard(l, false)).join('') :
- '
';
+ `
${t('layout.empty_custom')}
`;
- // Use template click
container.querySelectorAll('[data-use-template]').forEach(btn => {
btn.onclick = async () => {
const layout = await API(`/layouts/${btn.dataset.useTemplate}/duplicate`, { method: 'POST', body: '{}' });
@@ -51,23 +51,21 @@ async function renderList(container) {
};
});
- // Edit layout click
container.querySelectorAll('[data-edit-layout]').forEach(btn => {
btn.onclick = () => { window.location.hash = `#/layout/${btn.dataset.editLayout}`; };
});
- // Delete layout click
container.querySelectorAll('[data-delete-layout]').forEach(btn => {
btn.onclick = async (e) => {
e.stopPropagation();
const name = btn.dataset.layoutName;
- if (!confirm(`Delete layout "${name}"? This cannot be undone.`)) return;
+ if (!confirm(t('layout.confirm_delete', { name }))) return;
try {
await API(`/layouts/${btn.dataset.deleteLayout}`, { method: 'DELETE' });
- showToast('Layout deleted');
+ showToast(t('layout.toast.deleted'));
renderList(container);
} catch (err) {
- showToast(err.message || 'Failed to delete layout', 'error');
+ showToast(err.message || t('layout.toast.delete_failed'), 'error');
}
};
});
@@ -77,6 +75,8 @@ async function renderList(container) {
}
function renderLayoutCard(layout, isTemplate) {
+ const zoneCount = layout.zones?.length || 0;
+ const zonesText = tn('layout.zone_count', zoneCount);
return `
@@ -90,14 +90,14 @@ function renderLayoutCard(layout, isTemplate) {
${layout.name}
-
${layout.zones?.length || 0} zone(s) ${isTemplate ? '• Template' : ''}
+
${zonesText}${isTemplate ? ' • ' + t('layout.template_label') : ''}
${isTemplate
- ? ``
- : ``
+ ? ``
+ : ``
}
-
+
`;
@@ -107,44 +107,43 @@ async function renderEditor(container, layoutId) {
let layout;
try {
layout = await API(`/layouts/${layoutId}`);
- } catch { container.innerHTML = '
Layout not found
'; return; }
+ } catch { container.innerHTML = `
${t('layout.not_found')}
`; return; }
container.innerHTML = `
- Back to Layouts
+ ${t('layout.back')}
-
Zones
+
${t('layout.zones')}
@@ -156,7 +155,6 @@ async function renderEditor(container, layoutId) {
function renderZones() {
const canvas = document.getElementById('canvas');
- // Clear only zone divs
canvas.querySelectorAll('.zone-el').forEach(z => z.remove());
zones.forEach((z, i) => {
@@ -170,7 +168,6 @@ async function renderEditor(container, layoutId) {
user-select:none;z-index:${z.z_index || 0}`;
el.textContent = z.name;
- // Drag to move
el.onmousedown = (e) => {
if (e.target !== el) return;
e.preventDefault();
@@ -200,7 +197,6 @@ async function renderEditor(container, layoutId) {
document.addEventListener('mouseup', onUp);
};
- // Resize handle
const handle = document.createElement('div');
handle.style.cssText = 'position:absolute;right:0;bottom:0;width:12px;height:12px;cursor:se-resize;background:var(--accent);border-radius:2px 0 0 0;opacity:0.7';
handle.onmousedown = (e) => {
@@ -228,7 +224,6 @@ async function renderEditor(container, layoutId) {
canvas.appendChild(el);
});
- // Zone list sidebar
document.getElementById('zoneList').innerHTML = zones.map((z, i) => `
-
Video Walls ?
Combine multiple displays into one large screen
+
${t('wall.title')} ?
${t('wall.subtitle')}
`;
document.getElementById('newWallBtn').onclick = async () => {
- const name = prompt('Video wall name:');
+ const name = prompt(t('wall.prompt_name'));
if (!name) return;
const wall = await API('/walls', { method: 'POST', body: JSON.stringify({ name }) });
window.location.hash = `#/wall/${wall.id}`;
@@ -37,7 +38,7 @@ async function renderList(container) {
const grid = document.getElementById('wallGrid');
if (!walls.length) {
- grid.innerHTML = '
No video walls yet
Create a video wall to combine multiple displays.
';
+ grid.innerHTML = `
${t('wall.empty_title')}
${t('wall.empty_desc')}
`;
return;
}
@@ -55,7 +56,7 @@ async function renderList(container) {
${w.name}
-
${w.grid_cols}x${w.grid_rows} grid • ${w.devices?.length || 0} devices
+
${t('wall.grid_summary', { cols: w.grid_cols, rows: w.grid_rows, n: w.devices?.length || 0 })}
`).join('');
@@ -66,7 +67,7 @@ async function renderWallEditor(container, wallId) {
let wall, devices;
try {
[wall, devices] = await Promise.all([API(`/walls/${wallId}`), api.getDevices()]);
- } catch { container.innerHTML = '
`; return; }
const content = await api.getContent();
const unassigned = devices.filter(d => !wall.devices?.find(wd => wd.device_id === d.id));
@@ -74,38 +75,38 @@ async function renderWallEditor(container, wallId) {
container.innerHTML = `