From 654a692b4da4f93115b280c4cafa968363de9612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A6Ltorio?= <aeltorio@universidadatlantico.org>
Date: Sat, 29 Jun 2024 16:28:09 +0200
Subject: [PATCH] add place qrcode

---
 src/App.tsx                  |  5 +++
 src/Components/Forms/Geo.tsx | 62 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/Components/Forms/Geo.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1eb9b54..3e6112d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import Tabs from './Components/Tabs'
 import TextForm from './Components/Forms/Text'
 import UrlForm from './Components/Forms/Url'
 import SmsForm from './Components/Forms/Sms'
+import GeoForm from './Components/Forms/Geo'
 import TelForm from './Components/Forms/Tel'
 import EmailForm from './Components/Forms/Email'
 import VCardForm from './Components/Forms/VCard'
@@ -32,6 +33,10 @@ const tabs = [
     label: 'VCard',
     Component: VCardForm
   },
+  {
+    label: 'Place',
+    Component: GeoForm
+  },
   {
     label: 'WiFi',
     Component: WiFiForm
diff --git a/src/Components/Forms/Geo.tsx b/src/Components/Forms/Geo.tsx
new file mode 100644
index 0000000..9a661b8
--- /dev/null
+++ b/src/Components/Forms/Geo.tsx
@@ -0,0 +1,62 @@
+import React, { useState, useContext } from 'react'
+import { AppContext } from '../../Context'
+import Submit from '../Submit'
+
+const initialValues = {
+  latitude: '45.926436',
+  longitude: '6.8676'
+}
+function GeoForm() {
+  const [values, setValues] = useState(initialValues)
+  const { qrCode } = useContext(AppContext)
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement & HTMLSelectElement>) => {
+    const { name, value, checked } = event.target
+    const type:React.HTMLInputTypeAttribute = event.target.type
+
+    setValues((prev) => ({
+      ...prev,
+      [name]: type === 'checkbox'  as React.HTMLInputTypeAttribute ? checked : value
+    }))
+  }
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    qrCode.update({
+      data: `GEO:${values.latitude},${values.longitude}`
+    })
+  }
+
+  return (
+    <form className='qrForm-url' onSubmit={handleSubmit}>
+      <div className='form-floating mb-3'>
+        <input
+          id='latitude'
+          className='form-control'
+          type='number'
+          name='latitude'
+          value={values.latitude}
+          onChange={handleChange}
+          placeholder='Latitude (in decimal)'
+          required
+        />
+        <label htmlFor='number'>Latitude (in decimal)</label>
+        <input
+          id='longitude'
+          className='form-control'
+          type='text'
+          name='longitude'
+          value={values.longitude}
+          onChange={handleChange}
+          placeholder='Longitude (in decimal)'
+          required
+        />
+        <label htmlFor='longitude'>Longitude (in decimal)</label>
+      </div>
+      <Submit />
+    </form>
+  )
+}
+
+export default GeoForm