From 6f15fb63da85f2d9d651c02f16dabd7fea33935c Mon Sep 17 00:00:00 2001
From: Li Zhineng <im@zhineng.li>
Date: Fri, 11 Jul 2025 21:59:49 +0800
Subject: retry option

---
 main.mjs | 43 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

(limited to 'main.mjs')

diff --git a/main.mjs b/main.mjs
index d02dba3..f1fb638 100644
--- a/main.mjs
+++ b/main.mjs
@@ -306,12 +306,31 @@ class CommunicationForm extends Form {
   #failureForm = null
   #wifiCredentials = null
 
+  #retryMessage = null
+  #retryMessageClassName = 'retry-message'
+  #retryMessageShownClassName = 'retry-message--shown'
+
+  #retryLink = null
+  #retryLinkClassName = `retry-link`
+
   constructor(id, device) {
     super(id)
     this.#device = device
+    this.#retryMessage = this.form.querySelector(`.${this.#retryMessageClassName}`)
+    if (this.#retryMessage) {
+      this.#retryLink = this.form.querySelector(`.${this.#retryLinkClassName}`)
+      this.#retryLink.addEventListener('click', () => {
+        this.hideRetryOption()
+        this.startPairing()
+      })
+    }
   }
 
-  async onDisplay() {
+  onDisplay() {
+    this.startPairing()
+  }
+
+  async startPairing() {
     if (this.#device === null) {
       return
     }
@@ -320,7 +339,11 @@ class CommunicationForm extends Form {
       return
     }
 
-    await this.connect(this.#device, this.wifiCredentials)
+    try {
+      await this.connect(this.#device, this.wifiCredentials)
+    } catch {
+      this.showRetryOption()
+    }
   }
 
   async connect() {
@@ -353,6 +376,22 @@ class CommunicationForm extends Form {
     console.log(`Received data from device: ${receivedBytes.join(' ')}`)
   }
 
+  showRetryOption() {
+    if (this.#retryMessage === null) {
+      return
+    }
+
+    this.#retryMessage.classList.add(this.#retryMessageShownClassName)
+  }
+
+  hideRetryOption() {
+    if (this.#retryMessage === null) {
+      return
+    }
+
+    this.#retryMessage.classList.remove(this.#retryMessageShownClassName)
+  }
+
   succeedTo(form) {
     this.#successForm = form
     return this
-- 
cgit v1.2.3