From f1d79a17f615a9cd34b15dd7b96764e4bb99486a Mon Sep 17 00:00:00 2001
From: guicamest <guicamest@gmail.com>
Date: Tue, 15 Aug 2023 17:32:18 +0200
Subject: Allow setting additional cards to print (#275)

* Add setting for additional cards to print

* Render additional cards to print

* Do not render additional cards if amount is less than 1

* Render additional cards when printing

* Improve layout for portrait printing

* Render eap and identity textfields conditionally so that they dont use space

* Use all width in print-area

* Change additionalCards setting to Input and react to changes

* Allow hiding tip (legend) on card

* Print only full cards

* Move print-area - not-displayed - to the bottom of the page

* Set default ssid back to empty, additional cards to 0

* Lower marginBottom of password field to 5 instead of 24 (default)

* Use conditional rendering instead of class to hide password

* Set marginBottom to QR code only on portrait mode

* Set row-gap to 0 to allow up to 6 cards to fit in portrait mode in A4

* Move hideTip setting right after hiddenSSID
---
 src/App.js | 48 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 9 deletions(-)

(limited to 'src/App.js')

diff --git a/src/App.js b/src/App.js
index ccfa9b6..6eb712a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -28,6 +28,10 @@ function App() {
     hiddenSSID: false,
     // Settings: Portrait orientation
     portrait: false,
+    // Settings: Additional cards
+    additionalCards: 0,
+    // Settings: Show tip (legend) on card
+    hideTip: false,
   });
   const [errors, setErrors] = useState({
     ssidError: '',
@@ -120,6 +124,13 @@ function App() {
   const onHiddenSSIDChange = (hiddenSSID) => {
     setSettings({ ...settings, hiddenSSID });
   };
+  const onAdditionalCardsChange = (additionalCardsStr) => {
+    const amount = parseInt(additionalCardsStr);
+    amount >= 0 && setSettings({ ...settings, additionalCards: amount });
+  };
+  const onHideTipChange = (hideTip) => {
+    setSettings({ ...settings, hideTip });
+  };
   const onFirstLoad = () => {
     html.style.direction = htmlDirection();
     firstLoad.current = false;
@@ -153,15 +164,17 @@ function App() {
         </Paragraph>
       </Pane>
 
-      <WifiCard
-        settings={settings}
-        ssidError={errors.ssidError}
-        passwordError={errors.passwordError}
-        eapIdentityError={errors.eapIdentityError}
-        onSSIDChange={onSSIDChange}
-        onEapIdentityChange={onEapIdentityChange}
-        onPasswordChange={onPasswordChange}
-      />
+      <Pane>
+        <WifiCard
+          settings={settings}
+          ssidError={errors.ssidError}
+          passwordError={errors.passwordError}
+          eapIdentityError={errors.eapIdentityError}
+          onSSIDChange={onSSIDChange}
+          onEapIdentityChange={onEapIdentityChange}
+          onPasswordChange={onPasswordChange}
+        />
+      </Pane>
 
       <Settings
         settings={settings}
@@ -173,6 +186,8 @@ function App() {
         onOrientationChange={onOrientationChange}
         onHidePasswordChange={onHidePasswordChange}
         onHiddenSSIDChange={onHiddenSSIDChange}
+        onAdditionalCardsChange={onAdditionalCardsChange}
+        onHideTipChange={onHideTipChange}
       />
 
       <Button
@@ -184,6 +199,21 @@ function App() {
       >
         {t('button.print')}
       </Button>
+      <Pane id="print-area">
+        {settings.additionalCards >= 0 &&
+          [...Array(settings.additionalCards + 1)].map((el, idx) => (
+            <WifiCard
+              key={`card-nr-${idx}`}
+              settings={settings}
+              ssidError={errors.ssidError}
+              passwordError={errors.passwordError}
+              eapIdentityError={errors.eapIdentityError}
+              onSSIDChange={onSSIDChange}
+              onEapIdentityChange={onEapIdentityChange}
+              onPasswordChange={onPasswordChange}
+            />
+          ))}
+      </Pane>
     </Pane>
   );
 }
-- 
cgit v1.2.3