improve web UI

2026-01-06 19:57:50 +11:00
parent 5561b8fa4e
commit 1575ec0481
4 changed files with 169 additions and 17 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .gocache/
 java/
 gliffy2drawio
+server
 sample*.drawio
 sample*.gliffy
 .DS_Store
--- a/README.md
+++ b/README.md
@@ -0,0 +1,2 @@
+## About
+AI generated code, both command line and simple REST API. Converts a supplied gliffy diagram to draw.io format.
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -7,7 +7,9 @@ import (
 	"io"
 	"log"
 	"net/http"
+	"net/url"
 	"strings"
+	"time"

 	gliffy2drawio "gliffy2drawio"
 )
@@ -16,32 +18,106 @@ const (
 	maxUploadSize = 10 << 20 // 10MB
 )

+var diagramStore = struct {
+	data map[string]string
+}{
+	data: make(map[string]string),
+}
+
 var uploadTpl = template.Must(template.New("upload").Parse(`
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gliffy → draw.io Converter</title>
  <style>
-    body { font-family: Arial, sans-serif; margin: 40px; }
-    .card { max-width: 600px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
-    label { display: block; margin-bottom: 8px; font-weight: bold; }
-    input[type=file] { margin-bottom: 16px; }
-    button { padding: 8px 16px; }
-    a { color: #0b63ce; }
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 2rem; background: #f6f7fb; color: #111; }
+    .wrap { max-width: 820px; margin: 0 auto; }
+    h1 { margin: 0 0 0.5rem 0; font-size: 1.6rem; }
+    p { margin: 0.25rem 0 1rem 0; color: #333; }
+    .card { background: #fff; border-radius: 14px; padding: 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
+    .drop {
+      border: 2px dashed #9aa3b2; border-radius: 14px;
+      padding: 1.25rem; text-align: center; background: #fbfcff;
+      transition: 120ms ease;
+    }
+    .drop.drag { border-color: #3b82f6; background: #eef5ff; }
+    .btnrow { display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.75rem; flex-wrap: wrap; }
+    button, .buttonlike {
+      appearance: none; border: 0; border-radius: 10px; padding: 0.65rem 0.9rem;
+      background: #111827; color: #fff; cursor: pointer; font-weight: 600;
+    }
+    .secondary { background: #e5e7eb; color: #111; }
+    .linkbtn { background: #0b62d6; }
+    input[type=file] { display: none; }
+    .note { font-size: 0.92rem; color: #444; margin-top: 0.6rem; }
+    a { color: #0b62d6; text-decoration: none; font-weight: 700; }
+    a:hover { text-decoration: underline; }
+    code { background: #f1f5f9; padding: 0.1rem 0.3rem; border-radius: 6px; }
  </style>
 </head>
 <body>
-  <div class="card">
-    <h2>Gliffy → draw.io Converter</h2>
-    <form action="/convert" method="post" enctype="multipart/form-data">
-      <label for="file">Choose a Gliffy .gliffy file</label>
-      <input type="file" id="file" name="file" accept=".gliffy" required>
-      <br>
-      <button type="submit">Convert</button>
-    </form>
-    <p>API docs: <a href="/swagger">Swagger UI</a></p>
+  <div class="wrap">
+    <h1>Gliffy → draw.io Converter</h1>
+    <p>Upload a <code>.gliffy</code> (zip) or <code>.gon</code> JSON file. Convert to <code>.drawio</code>, or open directly in diagrams.net.</p>
+
+    <div class="card">
+      <form id="uploadForm" method="post" enctype="multipart/form-data">
+        <div id="drop" class="drop">
+          <strong>Drag & drop</strong> your Gliffy file here<br/>
+          <span class="note">…or choose a file.</span>
+          <div class="btnrow">
+            <label class="buttonlike secondary" for="fileInput">Choose file</label>
+            <button type="submit" formaction="/convert" id="downloadBtn">Download .drawio</button>
+            <button type="submit" class="linkbtn" formaction="/open" id="openBtn">Open in diagrams.net</button>
+          </div>
+          <div class="note" id="picked"></div>
+        </div>
+
+        <input id="fileInput" type="file" name="file" accept=".gliffy,.gon,application/zip,application/json" />
+      </form>
+
+      <p class="note">API docs: <a href="/swagger">Swagger UI</a></p>
+    </div>
  </div>
+
+<script>
+(function(){
+  const drop = document.getElementById('drop');
+  const input = document.getElementById('fileInput');
+  const picked = document.getElementById('picked');
+  const form = document.getElementById('uploadForm');
+
+  function setPicked(file) {
+    if (!file) { picked.textContent = ''; return; }
+    picked.textContent = 'Selected: ' + file.name + ' (' + Math.round(file.size/1024) + ' KB)';
+  }
+
+  drop.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    drop.classList.add('drag');
+  });
+  drop.addEventListener('dragleave', () => drop.classList.remove('drag'));
+  drop.addEventListener('drop', (e) => {
+    e.preventDefault();
+    drop.classList.remove('drag');
+    if (!e.dataTransfer || !e.dataTransfer.files || e.dataTransfer.files.length === 0) return;
+    input.files = e.dataTransfer.files;
+    setPicked(input.files[0]);
+  });
+
+  input.addEventListener('change', () => setPicked(input.files[0]));
+
+  form.addEventListener('submit', (e) => {
+    if (!input.files || input.files.length === 0) {
+      e.preventDefault();
+      alert('Please choose a .gliffy or .gon file first.');
+      return;
+    }
+  });
+})();
+</script>
 </body>
 </html>
 `))
@@ -59,9 +135,11 @@ func main() {
 	mux := http.NewServeMux()
 	mux.HandleFunc("/", uploadHandler)
 	mux.HandleFunc("/convert", uploadConvertHandler)
+	mux.HandleFunc("/open", uploadOpenHandler)
 	mux.HandleFunc("/api/convert", apiConvertHandler)
 	mux.HandleFunc("/openapi.json", openAPISpecHandler)
 	mux.HandleFunc("/swagger", swaggerUIHandler)
+	mux.HandleFunc("/diagram", diagramHandler)

 	addr := ":8080"
 	log.Printf("Server listening on %s", addr)
@@ -118,6 +196,46 @@ func uploadConvertHandler(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write([]byte(xml))
 }

+func uploadOpenHandler(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+	log.Printf("[open] %s %s from %s", r.Method, r.URL.Path, r.RemoteAddr)
+
+	r.Body = http.MaxBytesReader(w, r.Body, maxUploadSize)
+	if err := r.ParseMultipartForm(maxUploadSize); err != nil {
+		http.Error(w, "failed to parse form: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+	file, _, err := r.FormFile("file")
+	if err != nil {
+		http.Error(w, "missing file: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+	defer file.Close()
+	data, err := io.ReadAll(file)
+	if err != nil {
+		http.Error(w, "failed to read file: "+err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	xml, warn, err := convert(string(data))
+	if err != nil {
+		log.Printf("[open] conversion failed: %v", err)
+		http.Error(w, "conversion failed: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+	if warn != "" {
+		log.Printf("[open] conversion warning: %s", warn)
+	}
+
+	id := storeDiagram(xml)
+	targetURL := buildDiagramsNetURL(r, id)
+	log.Printf("[open] redirecting to %s", targetURL)
+	http.Redirect(w, r, targetURL, http.StatusFound)
+}
+
 func apiConvertHandler(w http.ResponseWriter, r *http.Request) {
 	if r.Method != http.MethodPost {
 		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
@@ -176,6 +294,37 @@ func openAPISpecHandler(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write([]byte(openAPISpec))
 }

+func diagramHandler(w http.ResponseWriter, r *http.Request) {
+	id := r.URL.Query().Get("id")
+	if id == "" {
+		http.Error(w, "missing id", http.StatusBadRequest)
+		return
+	}
+	xml, ok := diagramStore.data[id]
+	if !ok {
+		http.Error(w, "not found", http.StatusNotFound)
+		return
+	}
+	w.Header().Set("Content-Type", "application/xml")
+	_, _ = w.Write([]byte(xml))
+}
+
+func storeDiagram(xml string) string {
+	now := time.Now().UnixNano()
+	id := fmt.Sprintf("diag-%d", now)
+	diagramStore.data[id] = xml
+	return id
+}
+
+func buildDiagramsNetURL(r *http.Request, id string) string {
+	scheme := "http"
+	if r.Header.Get("X-Forwarded-Proto") == "https" || r.TLS != nil {
+		scheme = "https"
+	}
+	base := fmt.Sprintf("%s://%s/diagram?id=%s", scheme, r.Host, url.QueryEscape(id))
+	return "https://app.diagrams.net/?splash=0&ui=min&url=" + url.QueryEscape(base)
+}
+
 func swaggerUIHandler(w http.ResponseWriter, r *http.Request) {
 	if r.Method != http.MethodGet {
 		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
--- a/BIN
+++ b/BIN