fully functional editor

Inspectron.PrintServer.TemplateEditor/Components/Pages/Home.razor

@@ -3,6 +3,9 @@
 @using BlazorMonaco.Editor
 @using BlazorMonaco.Languages
 @using CommunityToolkit.Maui.Storage
+@using Inspectron.Epson
+@using Inspectron.Epson.PrintServer.Printers
+@using Inspectron.Epson.TemplateEngine
 @using Inspectron.PrintServer.TemplateEditor.Services
 @inject IJSRuntime JSRuntime
 
@@ -20,6 +23,11 @@
         {
             <span class="json-indicator" title="@_loadedJsonFile">@_loadedJsonFile</span>
         }
+        <div class="toolbar-separator"></div>
+        <select class="toolbar-select" title="Printer model" @onchange="OnPrinterModelChanged" value="@_selectedPrinterModel">
+            <option value="TM-T30III">TM-T30III</option>
+            <option value="TM-U220II">TM-U220II</option>
+        </select>
     </div>
 
     <div class="split-pane">
@@ -34,6 +42,11 @@
         <div class="pane pane-preview">
             <div class="pane-header">Preview</div>
             <div class="preview-content">
+                @if (!string.IsNullOrEmpty(_previewError))
+                {
+                    <div class="preview-error">@_previewError</div>
+                }
+                <iframe id="preview-iframe"></iframe>
             </div>
         </div>
     </div>
@@ -48,6 +61,12 @@
     private string? _currentFilePath;
     private string _savedContent = "";
 
+    private string? _jsonContent;
+    private string? _previewHtml;
+    private string? _previewError;
+    private string _selectedPrinterModel = "TM-T30III";
+    private CancellationTokenSource? _debounceCts;
+
     private bool HasUnsavedChanges => _editorContent != _savedContent;
 
     private string FileDisplayName => _currentFilePath is not null
@@ -87,6 +106,24 @@
     private async Task OnContentChanged(ModelContentChangedEvent e)
     {
         _editorContent = await _editor.GetValue();
+
+        _debounceCts?.Cancel();
+        _debounceCts = new CancellationTokenSource();
+        var token = _debounceCts.Token;
+
+        _ = Task.Run(async () =>
+        {
+            try
+            {
+                await Task.Delay(500, token);
+                await InvokeAsync(async () =>
+                {
+                    await RenderPreviewAsync();
+                    StateHasChanged();
+                });
+            }
+            catch (TaskCanceledException) { }
+        });
     }
 
     private async Task NewFileAsync()
@@ -95,6 +132,9 @@
         _savedContent = "";
         _editorContent = "";
         await _editor.SetValue("");
+        _previewHtml = null;
+        _previewError = null;
+        await JSRuntime.InvokeVoidAsync("setPreviewContent", "");
     }
 
     private async Task OpenFileAsync()
@@ -121,6 +161,7 @@
             _savedContent = content;
             _editorContent = content;
             await _editor.SetValue(content);
+            await RenderPreviewAsync();
         }
         catch (Exception)
         {
@@ -183,10 +224,13 @@
             using var reader = new StreamReader(stream);
             var json = await reader.ReadToEndAsync();
 
+            _jsonContent = json;
+
             var paths = JsonPathExtractor.Extract(json);
             _completionProvider.SetJsonPaths(paths);
             _loadedJsonFile = result.FileName;
 
+            await RenderPreviewAsync();
             StateHasChanged();
         }
         catch (Exception)
@@ -194,4 +238,51 @@
             // User cancelled or file read failed
         }
     }
+
+    private async Task OnPrinterModelChanged(ChangeEventArgs e)
+    {
+        _selectedPrinterModel = e.Value?.ToString() ?? "TM-T30III";
+        await RenderPreviewAsync();
+    }
+
+    private async Task RenderPreviewAsync()
+    {
+        if (string.IsNullOrWhiteSpace(_editorContent) || string.IsNullOrWhiteSpace(_jsonContent))
+            return;
+
+        try
+        {
+            _previewError = null;
+
+            var engine = new ReceiptTemplateEngine();
+            var commands = engine.Render(_editorContent, _jsonContent);
+
+            var htmlBuilder = new HtmlPrintBuilder();
+            await htmlBuilder.ConnectAsync("preview");
+
+            if (_selectedPrinterModel == "TM-U220II")
+            {
+                var printer = new TM_U220IITranslated(htmlBuilder) { SkipDelays = true };
+                await printer.InitAsync();
+                await printer.PrintAsync(commands);
+                await printer.Cut();
+            }
+            else
+            {
+                var printer = new TM_T30IIITranslated(htmlBuilder) { SkipDelays = true };
+                await printer.InitAsync();
+                await printer.PrintAsync(commands);
+                await printer.Cut();
+            }
+
+            _previewHtml = htmlBuilder.GetHtml();
+            await JSRuntime.InvokeVoidAsync("setPreviewContent", _previewHtml);
+        }
+        catch (Exception ex)
+        {
+            _previewError = ex.Message;
+            _previewHtml = null;
+            await JSRuntime.InvokeVoidAsync("setPreviewContent", "");
+        }
+    }
 }