From 5d6c99862d0727f84f8b2f26472acce27096005f Mon Sep 17 00:00:00 2001 From: Emma Fredriksen Date: Sun, 20 Oct 2024 17:04:48 +0200 Subject: [PATCH 1/2] Jobbet litt med poll side --- frontend/src/components/pages/AppPollPage.tsx | 51 +++++++++++++++++++ frontend/src/components/pages/MainPage.tsx | 16 ++++-- frontend/src/lib/qrcode.ts | 14 +++++ 3 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 frontend/src/components/pages/AppPollPage.tsx create mode 100644 frontend/src/lib/qrcode.ts diff --git a/frontend/src/components/pages/AppPollPage.tsx b/frontend/src/components/pages/AppPollPage.tsx new file mode 100644 index 0000000..d977b1c --- /dev/null +++ b/frontend/src/components/pages/AppPollPage.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from "react" +import { fetchQrCode } from "../../lib/qrcode" + +export const AppPollPage = () => { + const pageData = fetchGraphData() + +// const [qrCodeUrl, setQrCodeUrl] = useState("") + +// useEffect(() => { +// const getQrCode = async () => { +// const url = await fetchQrCode(pageData.appUrl) +// console.log(url); + +// setQrCodeUrl(url) +// } +// getQrCode() +// }) + + return
+
+

{pageData.question}

+
+ + {/* Mammaen */} +
+ + {/* Kid 1 */} +
+
+ + {/* Kid 2 */} +
+ +
+
+ +
+} + +const fetchGraphData = () =>{ + return{ + question:"Hvor sitter du og jobber?", + data:{ + "A4":24, + "Biblioteket": 48 + }, + appUrl:"https://www.appkom.no/" + } + + +} \ No newline at end of file diff --git a/frontend/src/components/pages/MainPage.tsx b/frontend/src/components/pages/MainPage.tsx index 9d4dd16..8ce6e6d 100644 --- a/frontend/src/components/pages/MainPage.tsx +++ b/frontend/src/components/pages/MainPage.tsx @@ -6,6 +6,7 @@ import { ChristmasPage } from './ChristmasPage'; import { EventsPage } from './EventsPage'; import { SlackPage } from './SlackPage'; import { VideoPage } from './VideoPage'; +import { AppPollPage } from './AppPollPage'; export const MainPage = () => { // All pages with their respective probabilities and durations in seconds @@ -13,27 +14,32 @@ export const MainPage = () => { { component: , duration: 60, - probability: 0.40, + probability: 0.01, }, { component: , duration: 60, - probability: 0.30, + probability: 0.01, }, { component: , duration: 60, - probability: 0.05, + probability: 0.01, }, { component: , duration: 60, - probability: 0.10, + probability: 0.01, }, { component: , duration: 30, - probability: 0.15, + probability: 0.01, + }, + { + component: , + duration: 60, + probability: 0.95, }, ]; diff --git a/frontend/src/lib/qrcode.ts b/frontend/src/lib/qrcode.ts new file mode 100644 index 0000000..54aaca6 --- /dev/null +++ b/frontend/src/lib/qrcode.ts @@ -0,0 +1,14 @@ +export const fetchQrCode=(url: string) => { + + return fetch("https/api.qrserver.com/v1/create-qr-code",{ + method:"GET", + headers:{ + data: url, + format:"svg" + } + }).then(response => { + console.log(response); + + return response.text() +}) +} \ No newline at end of file From 3c3724a8ef059b350612856961fdc66944c25e2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rgen=20Galdal?= Date: Tue, 22 Oct 2024 11:23:31 +0200 Subject: [PATCH 2/2] fix: change to local qr code generator --- frontend/package-lock.json | 9 ++++ frontend/package.json | 1 + frontend/src/components/pages/AppPollPage.tsx | 41 +++++++------------ frontend/src/lib/qrcode.ts | 14 ------- 4 files changed, 24 insertions(+), 41 deletions(-) delete mode 100644 frontend/src/lib/qrcode.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cae5f52..6ac76f3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,6 +20,7 @@ "framer-motion": "^11.11.8", "lucide-react": "^0.445.0", "moment": "^2.30.1", + "qrcode.react": "^4.1.0", "react": "^18.3.1", "react-circular-progressbar": "^2.1.0", "react-dom": "^18.3.1", @@ -5845,6 +5846,14 @@ "node": ">=6" } }, + "node_modules/qrcode.react": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.1.0.tgz", + "integrity": "sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/qs": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 30fb2c0..54fbfc8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,6 +26,7 @@ "framer-motion": "^11.11.8", "lucide-react": "^0.445.0", "moment": "^2.30.1", + "qrcode.react": "^4.1.0", "react": "^18.3.1", "react-circular-progressbar": "^2.1.0", "react-dom": "^18.3.1", diff --git a/frontend/src/components/pages/AppPollPage.tsx b/frontend/src/components/pages/AppPollPage.tsx index d977b1c..5329d8d 100644 --- a/frontend/src/components/pages/AppPollPage.tsx +++ b/frontend/src/components/pages/AppPollPage.tsx @@ -1,20 +1,7 @@ -import { useEffect, useState } from "react" -import { fetchQrCode } from "../../lib/qrcode" +import { QRCodeSVG } from "qrcode.react" export const AppPollPage = () => { - const pageData = fetchGraphData() - -// const [qrCodeUrl, setQrCodeUrl] = useState("") - -// useEffect(() => { -// const getQrCode = async () => { -// const url = await fetchQrCode(pageData.appUrl) -// console.log(url); - -// setQrCodeUrl(url) -// } -// getQrCode() -// }) + const pageData = fetchGraphData() return
@@ -22,29 +9,29 @@ export const AppPollPage = () => {
{/* Mammaen */} -
- - {/* Kid 1 */} +
+ + {/* Kid 1 */}
- {/* Kid 2 */} -
- + {/* Kid 2 */} +
+
} -const fetchGraphData = () =>{ - return{ - question:"Hvor sitter du og jobber?", - data:{ - "A4":24, +const fetchGraphData = () => { + return { + question: "Hvor sitter du og jobber?", + data: { + "A4": 24, "Biblioteket": 48 }, - appUrl:"https://www.appkom.no/" + appUrl: "https://www.appkom.no/" } diff --git a/frontend/src/lib/qrcode.ts b/frontend/src/lib/qrcode.ts deleted file mode 100644 index 54aaca6..0000000 --- a/frontend/src/lib/qrcode.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const fetchQrCode=(url: string) => { - - return fetch("https/api.qrserver.com/v1/create-qr-code",{ - method:"GET", - headers:{ - data: url, - format:"svg" - } - }).then(response => { - console.log(response); - - return response.text() -}) -} \ No newline at end of file