From a799ee596c888739bcf669d9f84522d8405703d2 Mon Sep 17 00:00:00 2001 From: asm Date: Wed, 14 Aug 2024 21:21:09 +0200 Subject: [PATCH] DV-000299: Move drop-down functionality. --- frontend/src/App.js | 966 +++++++++++------------- frontend/src/components/ImageManager.js | 73 ++ 2 files changed, 533 insertions(+), 506 deletions(-) create mode 100644 frontend/src/components/ImageManager.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 7a50257d..410b7753 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,549 +1,503 @@ import './App.css'; -import React, { useRef, useState, useEffect } from "react"; +import React, {useEffect, useRef, useState} from "react"; import apiClient from "./http-common"; import upload from './img/upload.png'; import logo from './img/europe-plates.jpg'; import $ from 'jquery'; import JSONPretty from 'react-json-pretty'; -import { createWorker } from "tesseract.js"; +import {createWorker} from "tesseract.js"; import 'bootstrap/dist/css/bootstrap.css'; import Header from './components/Header'; import Popup from './components/Popup'; import '@popperjs/core'; import LocationMarker from './components/MapView'; +import ImageManager from './components/ImageManager'; function App() { + const imageManager = new ImageManager(); - let countryImages = { - "None": "https://media.istockphoto.com/id/1154067988/vector/colorful-hand-drawn-vector-map-of-europe-with-countries-names-doodle-style.jpg?s=612x612&w=0&k=20&c=u10GKRTIjHyhwumg3_eArjO4lGL3xFyHsa3N8luTYXA=", - "armenia": "https://www.plateshack.com/y2k/Armenia/armenia21sc221.jpg", - "austria": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Austrian_license_plate.svg/1280px-Austrian_license_plate.svg.png", - "azerbaijan": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Azerbaijan_licence_plate_format.svg/1024px-Azerbaijan_licence_plate_format.svg.png", - "belarus": "https://upload.wikimedia.org/wikipedia/commons/7/78/Belarus_license_plate.png", - "british": "https://cdn.skoda-storyboard.com/2019/01/GB-license-plate-infographics-en.jpg", - "bulgaria": "https://upload.wikimedia.org/wikipedia/commons/0/0b/Bulgaria-automobile-license-plate.png", - "croatia": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Registarska_plo%C4%8Dica_Delnice_HR_%282016-%29.jpg/1920px-Registarska_plo%C4%8Dica_Delnice_HR_%282016-%29.jpg", - "czech": "https://cdn.skoda-storyboard.com/2019/01/license-plate-infographics-en.jpg", - "estonia": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Estonian_license_plate.svg/1280px-Estonian_license_plate.svg.png", - "france": "https://cdn.skoda-storyboard.com/2019/07/France-license-plate-english.jpg", - "germany": "https://cdn.skoda-storyboard.com/2019/04/germany-license-plate-english-infographic.jpg", - "greece": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Greek_license_plate.svg/1280px-Greek_license_plate.svg.png", - "hungary": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Hungarian_license_plate.svg/1280px-Hungarian_license_plate.svg.png", - "ireland": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Revised_format_Republic_of_Ireland_numberplate_%282013-%29.svg/1920px-Revised_format_Republic_of_Ireland_numberplate_%282013-%29.svg.png", - "italian": "https://cdn.skoda-storyboard.com/2019/06/Italy-license-plate-english.jpg", - "kazakhstan": "https://upload.wikimedia.org/wikipedia/commons/f/fe/License_plate_Kazakhstan_2012.png", - "kosovo": "https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/Kosovo_car_registration_plate_labels.svg/320px-Kosovo_car_registration_plate_labels.svg.png", - "kyrgyzstan": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Plak_shakhsi-KG.png/800px-Plak_shakhsi-KG.png", - "lithuania": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Lithuanian_license_plate.svg/1280px-Lithuanian_license_plate.svg.png", - "malaysia": "https://en.m.wikipedia.org/wiki/Vehicle_registration_plates_of_Malaysia#/media/File%3AMalaysia_penang_license_plate_front.JPG", - "moldova": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Moldova_MD_license_plate_ABC012_2015.svg/1024px-Moldova_MD_license_plate_ABC012_2015.svg.png", - "montenegro": "https://upload.wikimedia.org/wikipedia/commons/f/f6/License_plate_Montenegro.jpg", - "norway": "https://upload.wikimedia.org/wikipedia/commons/3/33/Skilt_elbil.jpg", - "macedonia": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/North_Macedonia_plate_2019.jpg/1024px-North_Macedonia_plate_2019.jpg", - "poland": "https://cdn.skoda-storyboard.com/2019/08/poland-number-plates-infographics-english-1920x1288.jpg", - "romania": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Romanian_license_plate.svg/1024px-Romanian_license_plate.svg.png", - "russia": "https://cdn.skoda-storyboard.com/2019/04/Russian-license-plate-english.jpg", - "serbia": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/License_plate_of_Serbia%2C_2014.JPG/1024px-License_plate_of_Serbia%2C_2014.JPG", - "slovakia": "https://upload.wikimedia.org/wikipedia/commons/1/1d/Slovak_car_registration_plate_2023.jpg", - "slovenia": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Tablica_KR_-_Kranj.jpg/1920px-Tablica_KR_-_Kranj.jpg", - "sweden": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Sweden_licenseplate_EU.JPG/1920px-Sweden_licenseplate_EU.JPG", - "switzerland": "https://cdn.skoda-storyboard.com/2019/10/switzerland-number-plate-english-1920x1751.jpg", - "turkey": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Foreigners_with_temporary_residence_permit_vehicle_license_plate_of_Turkey.svg/1024px-Foreigners_with_temporary_residence_permit_vehicle_license_plate_of_Turkey.svg.png", - "ukraine": "https://upload.wikimedia.org/wikipedia/commons/7/77/License_plate_of_Ukraine_2015.png", - "uzbekistan": "https://upload.wikimedia.org/wikipedia/commons/a/a9/Uzbekistan_2008_passenger_license_plate_legend.png" - }; - -let diplomaticImages = { - "None": "https://media.istockphoto.com/id/1154067988/vector/colorful-hand-drawn-vector-map-of-europe-with-countries-names-doodle-style.jpg?s=612x612&w=0&k=20&c=u10GKRTIjHyhwumg3_eArjO4lGL3xFyHsa3N8luTYXA=", - "austria": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Austria_diplomatic_license_plate_WD-14021.jpg/1024px-Austria_diplomatic_license_plate_WD-14021.jpg", - "germany": "https://www.tuningblog.eu/wp-content/uploads/2020/07/diplomatenkennzeichen-deutschland-17-CD-147-1.jpg", - "poland": "https://i.postimg.cc/gjby4VRr/poland-dyplomatic.png", - "croatia": "https://licenseplatemania.com/fotos/kroatie/kroatie36.jpg", - "estonia": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Estonia_diplomatic_license_plate_CD_European_standard.jpg", - "france": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/French_diplomatic_license_plate.jpg/1024px-French_diplomatic_license_plate.jpg", - "italian": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Targa_automobilistica_Italia_1985_CD%E2%80%A20213%E2%80%A2XG_Corpo_Diplomatico_Citt%C3%A0_del_Vaticano.jpg/1024px-Targa_automobilistica_Italia_1985_CD%E2%80%A20213%E2%80%A2XG_Corpo_Diplomatico_Citt%C3%A0_del_Vaticano.jpg", - "kyrgyzstan": "https://upload.wikimedia.org/wikipedia/commons/3/38/Kyrgyzstan_diplomatic_technical_staff_license_plate.png", - "lithuania": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Lithuanian_diplomatic_license_plate.JPG?20120714185557", - "malaysia": "https://en.wikipedia.org/wiki/Vehicle_registration_plates_of_Malaysia#/media/File:Diplomat_Plate_Number.jpg", - "montenegro": "https://upload.wikimedia.org/wikipedia/commons/0/08/Montenegro_diplomatic_license_plate_%28Norway%29.jpg", - "norway": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Norway_diplomatic_license_plate_CD_48160_2014_Oslo.jpg/1280px-Norway_diplomatic_license_plate_CD_48160_2014_Oslo.jpg", - "portugal": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Portugal_diplomatic_license_plate_200-CD530.jpg/800px-Portugal_diplomatic_license_plate_200-CD530.jpg", - "romania": "https://upload.wikimedia.org/wikipedia/commons/c/c1/Romania_diplomatic_number_plate_CD_205_113.jpg", - "russia": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Russian_diplomatic_license_plate_014_D_161.jpg/640px-Russian_diplomatic_license_plate_014_D_161.jpg", - "sweden": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Sweden_diplomatic_license_plate_DL004B.jpg/1024px-Sweden_diplomatic_license_plate_DL004B.jpg", - "switzerland": "https://upload.wikimedia.org/wikipedia/commons/2/22/Switzerland_CD_Diplomatic_license_plate_GE_29%E2%80%A2201.jpg" - }; - const getInitialStateSimplePlates = () => { - const plates = "Choose country"; - return plates; - }; - - const getInitialStateDiplomaticPlates = () => { - const diplomatic = "Choose country"; - return diplomatic; - }; - - const getRegion = useRef(null); - const getDescription = useRef(null); - const image = useRef(null); - - const getDiplomaticRegion = useRef(null); - const getDiplomaticDescription = useRef(null); - - const [getResult, setGetResult] = useState(null); - const [plates, setPlates] = useState(getInitialStateSimplePlates); - const [diplomatic, setDiplomatic] = useState(getInitialStateDiplomaticPlates); - const regionRef = useRef(null); - const diplomaticRef = useRef(null); - - const typePlates = useRef(null); - - const [selected, setSelected] = useState(""); - - const [file, setFile] = useState(""); - - const [ocr, setOcr] = useState(""); - - const [imageData, setImageData] = useState(null); - - const [seconds, setSeconds] = useState(0); - const [minutes, setMinutes] = useState(2); - - const [isShown, setIsShown] = useState(false); - - const changeHandler = e => { - setSelected(e.target.value); - }; - - const fortmatResponse = (res) => { - return JSON.stringify(res, null, 2); - }; - - async function getPlatesByRegion() { - const region = getRegion.current.value; - - const selectValue = regionRef.current.value; - - if (selectValue === 'None') { - alert('Choose any country first'); - return; - } - - if (region === '') { - alert('Choose region first'); - return; - } - - if (region) { - try { - const res = await apiClient.get(`/${plates}/plates/region/${region}`); - - const result = { - information: res.data - }; - - setGetResult(fortmatResponse(result)); - getRegion.current.value = ''; - setIsShown(true); - } catch (err) { - if (!err?.response) { - alert("No Server Response"); - return; - } - setGetResult(fortmatResponse(err.response?.data || err)); - getRegion.current.value = ''; - } - } - } + const [plates, setPlates] = useState("Choose country"); + const [diplomatic, setDiplomatic] = useState("Choose country"); - async function getDiplomaticPlatesByRegion() { - const region = getDiplomaticRegion.current.value; - const selectValue = diplomaticRef.current.value; + const getRegion = useRef(null); + const getDescription = useRef(null); - if (selectValue === 'None') { - alert('Choose any country first'); - return; - } + const image = useRef(null); + const typePlates = useRef(null); - if (region === '') { - alert('Choose region first'); - return; - } + const getDiplomaticRegion = useRef(null); + const getDiplomaticDescription = useRef(null); - if (region) { - try { - const res = await apiClient.get(`/${diplomatic}/diplomatic/plates/region/${region}`); + const [getResult, setGetResult] = useState(null); - const result = { - information: res.data - }; - setGetResult(fortmatResponse(result)); - getDiplomaticRegion.current.value = ''; - setIsShown(true); - } catch (err) { - if (!err?.response) { - alert("No Server Response"); - return; - } - setGetResult(fortmatResponse(err.response?.data || err)); - getDiplomaticRegion.current.value = ''; - } - } - } + const regionRef = useRef(null); + const diplomaticRef = useRef(null); - async function getPlatesByDescription() { - const description = getDescription.current.value; - const selectValue = regionRef.current.value; + const [selected, setSelected] = useState(""); - if (selectValue === 'None') { - alert('Choose any country first'); - return; - } - - if (description === '') { - alert('Choose region first'); - return; + const [file, setFile] = useState(""); - } + const [ocr, setOcr] = useState(""); - if (description) { - try { - const res = await apiClient.get(`/${plates}/plates/description/${description}`); + const [imageData, setImageData] = useState(null); - const result = { - information: res.data - }; + const [seconds, setSeconds] = useState(0); + const [minutes, setMinutes] = useState(2); - setGetResult(fortmatResponse(result)); - getDescription.current.value = ''; - setIsShown(true); - } catch (err) { - if (!err?.response) { - alert("No Server Response"); - return; - } - setGetResult(fortmatResponse(err.response?.data || err)); - getDescription.current.value = ''; - } - } - } + const [isShown, setIsShown] = useState(false); - async function getDiplomaticPlatesByDescription() { - const description = getDiplomaticDescription.current.value; + const changeHandler = e => { + setSelected(e.target.value); + }; - const selectValue = diplomaticRef.current.value; + const formatResponse = (res) => { + return JSON.stringify(res, null, 2); + }; - if (selectValue === 'None') { - alert('Choose any country first'); - return; + async function getPlatesByRegion() { + const region = getRegion.current.value; + + const selectValue = regionRef.current.value; + + if (selectValue === 'None') { + alert('Choose any country first'); + return; + } + + if (region === '') { + alert('Choose region first'); + return; + } + + if (region) { + try { + const res = await apiClient.get(`/${plates}/plates/region/${region}`); + + const result = { + information: res.data + }; + + setGetResult(formatResponse(result)); + getRegion.current.value = ''; + setIsShown(true); + } catch (err) { + if (!err?.response) { + alert("No Server Response"); + return; + } + setGetResult(formatResponse(err.response?.data || err)); + getRegion.current.value = ''; + } + } } - - - if (description === '') { - alert('Choose region first'); - return; - } - - if (description) { - try { - const res = await apiClient.get(`/${diplomatic}/diplomatic/plates/description/${description}`); - - const result = { - information: res.data - }; - setGetResult(fortmatResponse(result)); - getDiplomaticDescription.current.value = ''; - setIsShown(true); - } catch (err) { - if (!err?.response) { - alert("No Server Response"); - return; - } - setGetResult(fortmatResponse(err.response?.data || err)); - getDiplomaticDescription.current.value = ''; - } + async function getDiplomaticPlatesByRegion() { + const region = getDiplomaticRegion.current.value; + + const selectValue = diplomaticRef.current.value; + + if (selectValue === 'None') { + alert('Choose any country first'); + return; + } + + if (region === '') { + alert('Choose region first'); + return; + } + + if (region) { + try { + const res = await apiClient.get(`/${diplomatic}/diplomatic/plates/region/${region}`); + + const result = { + information: res.data + }; + + setGetResult(formatResponse(result)); + getDiplomaticRegion.current.value = ''; + setIsShown(true); + } catch (err) { + if (!err?.response) { + alert("No Server Response"); + return; + } + setGetResult(formatResponse(err.response?.data || err)); + getDiplomaticRegion.current.value = ''; + } + } } - } - - const clearGetOutputPrivatePlates = () => { - setFile(''); - image.current.src = logo; - setGetResult(null); - setPlates(''); - getRegion.current.value = ''; - getDescription.current.value = ''; - typePlates.current.classList.remove('hidden'); - setIsShown(false); - }; - - const clearGetOutputDiplomaticlates = () => { - setFile(''); - image.current.src = logo; - setGetResult(null); - setDiplomatic(''); - getDiplomaticRegion.current.value = ''; - getDiplomaticDescription.current.value = ''; - typePlates.current.classList.remove('hidden'); - setIsShown(false); - }; - - const simplePlates = (e) => { - const element = regionRef.current; - document.getElementById('countries_image').src = countryImages[element.value]; - setPlates(e.target.value); - typePlates.current.classList.add('hidden'); - }; - - const diplomaticPlates = (e) => { - const element = diplomaticRef.current; - document.getElementById('countries_image').src = diplomaticImages[element.value]; - setDiplomatic(e.target.value); - typePlates.current.classList.add('hidden'); - }; - -$(document).on("change", "#countries_list", function(e){ - $('#countries_diplomatic_list').val('None'); -}); - -$(document).on("change", "#countries_diplomatic_list", function(e){ - $('#countries_list').val('None'); -}); - -const convertImageToText = async () => { - if (!imageData) return; - const worker = await createWorker(); - await worker.load(); - await worker.loadLanguage('eng'); - await worker.initialize('eng'); - const { - data: { text }, - } = await worker.recognize(imageData); - setOcr(text); - console.log(`This is result: ${text}`); - await worker.terminate(); - }; - - function handleImageChange(e) { - const file = e.target.files[0]; - if(!file)return; - const reader = new FileReader(); - reader.onloadend = () => { - const imageDataUri = reader.result; - console.log({ imageDataUri }); - setImageData(imageDataUri); - }; - reader.readAsDataURL(file); - } - - useEffect(() => { - convertImageToText(); - }, [imageData]); - - const [showElement,setShowElement] = React.useState(true) - useEffect(()=>{ - setTimeout(function() { - setShowElement(false); - image.current.src = logo; - }, 120000); - }, - []); - - function updateTime() { - if (minutes == 0 && seconds == 0) { - //reset - setSeconds(0); - setMinutes(5); + + async function getPlatesByDescription() { + const description = getDescription.current.value; + + const selectValue = regionRef.current.value; + + if (selectValue === 'None') { + alert('Choose any country first'); + return; + } + + if (description === '') { + alert('Choose region first'); + return; + + } + + if (description) { + try { + const res = await apiClient.get(`/${plates}/plates/description/${description}`); + + const result = { + information: res.data + }; + + setGetResult(formatResponse(result)); + getDescription.current.value = ''; + setIsShown(true); + } catch (err) { + if (!err?.response) { + alert("No Server Response"); + return; + } + setGetResult(formatResponse(err.response?.data || err)); + getDescription.current.value = ''; + } + } } - else { - if (seconds == 0) { - setMinutes(minutes => minutes - 1); - setSeconds(59); - } else { - setSeconds(seconds => seconds - 1); - } + + async function getDiplomaticPlatesByDescription() { + const description = getDiplomaticDescription.current.value; + + const selectValue = diplomaticRef.current.value; + + if (selectValue === 'None') { + alert('Choose any country first'); + return; + } + + + if (description === '') { + alert('Choose region first'); + return; + } + + if (description) { + try { + const res = await apiClient.get(`/${diplomatic}/diplomatic/plates/description/${description}`); + + const result = { + information: res.data + }; + + setGetResult(formatResponse(result)); + getDiplomaticDescription.current.value = ''; + setIsShown(true); + } catch (err) { + if (!err?.response) { + alert("No Server Response"); + return; + } + setGetResult(formatResponse(err.response?.data || err)); + getDiplomaticDescription.current.value = ''; + } + } } - } - useEffect(() => { - // use set timeout and be confident because updateTime will cause rerender - // rerender mean re call this effect => then it will be similar to how setinterval works - // but with easy to understand logic - const token = setTimeout(updateTime, 1000) + const clearGetOutputPrivatePlates = () => { + setPlates(''); + image.current.src = logo; + typePlates.current.classList.remove('hidden'); + }; - return function cleanUp() { - clearTimeout(token); + const clearGetOutputDiplomaticPlates = () => { + setDiplomatic(''); + image.current.src = logo; + typePlates.current.classList.remove('hidden'); + }; + + const simplePlates = (e) => { + setPlates(e.target.value); + document.getElementById('countries_image').src = imageManager.getCountryImage(e.target.value); + typePlates.current.classList.add('hidden'); + }; + + const diplomaticPlates = (e) => { + setDiplomatic(e.target.value); + document.getElementById('countries_image').src = imageManager.getDiplomaticImage(e.target.value); + typePlates.current.classList.add('hidden'); + }; + + $(document).on("change", "#countries_list", function (e) { + $('#countries_diplomatic_list').val('None'); + }); + + $(document).on("change", "#countries_diplomatic_list", function (e) { + $('#countries_list').val('None'); + }); + + const convertImageToText = async () => { + if (!imageData) return; + const worker = await createWorker(); + await worker.load(); + await worker.loadLanguage('eng'); + await worker.initialize('eng'); + const { + data: {text}, + } = await worker.recognize(imageData); + setOcr(text); + console.log(`This is result: ${text}`); + await worker.terminate(); + }; + + function handleImageChange(e) { + const file = e.target.files[0]; + if (!file) return; + const reader = new FileReader(); + reader.onloadend = () => { + const imageDataUri = reader.result; + console.log({imageDataUri}); + setImageData(imageDataUri); + }; + reader.readAsDataURL(file); } - }); - -return ( -
-
- - this is main image - {showElement?
-
Please choose any type of plates
- - -
- -
-
-
-
-
- -
- -
- - -
- -
-
- -
- -
-
-
- - -
- - -


-
-
-
-
- -
-
- -
-
- -
- -
-
-
- + + useEffect(() => { + convertImageToText(); + }, [imageData]); + + const [showElement, setShowElement] = React.useState(true) + useEffect(() => { + setTimeout(function () { + setShowElement(false); + image.current.src = logo; + }, 120000); + }, + []); + + function updateTime() { + if (minutes === 0 && seconds === 0) { + //reset + setSeconds(0); + setMinutes(5); + } else { + if (seconds === 0) { + setMinutes(minutes => minutes - 1); + setSeconds(59); + } else { + setSeconds(seconds => seconds - 1); + } + } + } + + useEffect(() => { + // use set timeout and be confident because updateTime will cause rerender + // rerender mean re call this effect => then it will be similar to how setinterval works + // but with easy to understand logic + const token = setTimeout(updateTime, 1000) + + return function cleanUp() { + clearTimeout(token); + } + }); + + return ( +
+
+ + this is main image + {showElement ?
+
Please + choose + any type of plates +
+ + +
+ +
+
+
+
+
+ +
+ +
+ + +
+ +
+
+ +
+ +
+
+
+ + +
+ + +


+
+
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+ + +
+

Upload photo with car plate

+
+ + setFile(e.target.files[0])} + data-cy="upload_photo"/> +
+
+

+ You will be logged out in time: {minutes}:{seconds} +

+
: <>} + {isShown && }
- -
- -
-
- - -
-

Upload photo with car plate

-
- - setFile(e.target.files[0])} data-cy="upload_photo"/> -
-
-

- You will be logged out in time: {minutes}:{seconds} -

-
:<>} - {isShown && } -
- ); + ); } export default App; diff --git a/frontend/src/components/ImageManager.js b/frontend/src/components/ImageManager.js new file mode 100644 index 00000000..9f34bf80 --- /dev/null +++ b/frontend/src/components/ImageManager.js @@ -0,0 +1,73 @@ +class ImageManager { + constructor() { + this.countryImages = { + "None": "https://media.istockphoto.com/id/1154067988/vector/colorful-hand-drawn-vector-map-of-europe-with-countries-names-doodle-style.jpg?s=612x612&w=0&k=20&c=u10GKRTIjHyhwumg3_eArjO4lGL3xFyHsa3N8luTYXA=", + "armenia": "https://www.plateshack.com/y2k/Armenia/armenia21sc221.jpg", + "austria": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Austrian_license_plate.svg/1280px-Austrian_license_plate.svg.png", + "azerbaijan": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Azerbaijan_licence_plate_format.svg/1024px-Azerbaijan_licence_plate_format.svg.png", + "belarus": "https://upload.wikimedia.org/wikipedia/commons/7/78/Belarus_license_plate.png", + "british": "https://cdn.skoda-storyboard.com/2019/01/GB-license-plate-infographics-en.jpg", + "bulgaria": "https://upload.wikimedia.org/wikipedia/commons/0/0b/Bulgaria-automobile-license-plate.png", + "croatia": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Registarska_plo%C4%8Dica_Delnice_HR_%282016-%29.jpg/1920px-Registarska_plo%C4%8Dica_Delnice_HR_%282016-%29.jpg", + "czech": "https://cdn.skoda-storyboard.com/2019/01/license-plate-infographics-en.jpg", + "estonia": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Estonian_license_plate.svg/1280px-Estonian_license_plate.svg.png", + "france": "https://cdn.skoda-storyboard.com/2019/07/France-license-plate-english.jpg", + "germany": "https://cdn.skoda-storyboard.com/2019/04/germany-license-plate-english-infographic.jpg", + "greece": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Greek_license_plate.svg/1280px-Greek_license_plate.svg.png", + "hungary": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Hungarian_license_plate.svg/1280px-Hungarian_license_plate.svg.png", + "ireland": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Revised_format_Republic_of_Ireland_numberplate_%282013-%29.svg/1920px-Revised_format_Republic_of_Ireland_numberplate_%282013-%29.svg.png", + "italian": "https://cdn.skoda-storyboard.com/2019/06/Italy-license-plate-english.jpg", + "kazakhstan": "https://upload.wikimedia.org/wikipedia/commons/f/fe/License_plate_Kazakhstan_2012.png", + "kosovo": "https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/Kosovo_car_registration_plate_labels.svg/320px-Kosovo_car_registration_plate_labels.svg.png", + "kyrgyzstan": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Plak_shakhsi-KG.png/800px-Plak_shakhsi-KG.png", + "lithuania": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Lithuanian_license_plate.svg/1280px-Lithuanian_license_plate.svg.png", + "malaysia": "https://en.m.wikipedia.org/wiki/Vehicle_registration_plates_of_Malaysia#/media/File%3AMalaysia_penang_license_plate_front.JPG", + "moldova": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Moldova_MD_license_plate_ABC012_2015.svg/1024px-Moldova_MD_license_plate_ABC012_2015.svg.png", + "montenegro": "https://upload.wikimedia.org/wikipedia/commons/f/f6/License_plate_Montenegro.jpg", + "norway": "https://upload.wikimedia.org/wikipedia/commons/3/33/Skilt_elbil.jpg", + "macedonia": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/North_Macedonia_plate_2019.jpg/1024px-North_Macedonia_plate_2019.jpg", + "poland": "https://cdn.skoda-storyboard.com/2019/08/poland-number-plates-infographics-english-1920x1288.jpg", + "romania": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Romanian_license_plate.svg/1024px-Romanian_license_plate.svg.png", + "russia": "https://cdn.skoda-storyboard.com/2019/04/Russian-license-plate-english.jpg", + "serbia": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/License_plate_of_Serbia%2C_2014.JPG/1024px-License_plate_of_Serbia%2C_2014.JPG", + "slovakia": "https://upload.wikimedia.org/wikipedia/commons/1/1d/Slovak_car_registration_plate_2023.jpg", + "slovenia": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Tablica_KR_-_Kranj.jpg/1920px-Tablica_KR_-_Kranj.jpg", + "sweden": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Sweden_licenseplate_EU.JPG/1920px-Sweden_licenseplate_EU.JPG", + "switzerland": "https://cdn.skoda-storyboard.com/2019/10/switzerland-number-plate-english-1920x1751.jpg", + "turkey": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Foreigners_with_temporary_residence_permit_vehicle_license_plate_of_Turkey.svg/1024px-Foreigners_with_temporary_residence_permit_vehicle_license_plate_of_Turkey.svg.png", + "ukraine": "https://upload.wikimedia.org/wikipedia/commons/7/77/License_plate_of_Ukraine_2015.png", + "uzbekistan": "https://upload.wikimedia.org/wikipedia/commons/a/a9/Uzbekistan_2008_passenger_license_plate_legend.png" + }; + + this.diplomaticImages = { + "None": "https://media.istockphoto.com/id/1154067988/vector/colorful-hand-drawn-vector-map-of-europe-with-countries-names-doodle-style.jpg?s=612x612&w=0&k=20&c=u10GKRTIjHyhwumg3_eArjO4lGL3xFyHsa3N8luTYXA=", + "austria": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Austria_diplomatic_license_plate_WD-14021.jpg/1024px-Austria_diplomatic_license_plate_WD-14021.jpg", + "germany": "https://www.tuningblog.eu/wp-content/uploads/2020/07/diplomatenkennzeichen-deutschland-17-CD-147-1.jpg", + "poland": "https://i.postimg.cc/gjby4VRr/poland-dyplomatic.png", + "croatia": "https://licenseplatemania.com/fotos/kroatie/kroatie36.jpg", + "estonia": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Estonia_diplomatic_license_plate_CD_European_standard.jpg", + "france": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/French_diplomatic_license_plate.jpg/1024px-French_diplomatic_license_plate.jpg", + "italian": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Targa_automobilistica_Italia_1985_CD%E2%80%A20213%E2%80%A2XG_Corpo_Diplomatico_Citt%C3%A0_del_Vaticano.jpg/1024px-Targa_automobilistica_Italia_1985_CD%E2%80%A20213%E2%80%A2XG_Corpo_Diplomatico_Citt%C3%A0_del_Vaticano.jpg", + "kyrgyzstan": "https://upload.wikimedia.org/wikipedia/commons/3/38/Kyrgyzstan_diplomatic_technical_staff_license_plate.png", + "lithuania": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Lithuanian_diplomatic_license_plate.JPG?20120714185557", + "malaysia": "https://en.wikipedia.org/wiki/Vehicle_registration_plates_of_Malaysia#/media/File:Diplomat_Plate_Number.jpg", + "montenegro": "https://upload.wikimedia.org/wikipedia/commons/0/08/Montenegro_diplomatic_license_plate_%28Norway%29.jpg", + "norway": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Norway_diplomatic_license_plate_CD_48160_2014_Oslo.jpg/1280px-Norway_diplomatic_license_plate_CD_48160_2014_Oslo.jpg", + "portugal": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Portugal_diplomatic_license_plate_200-CD530.jpg/800px-Portugal_diplomatic_license_plate_200-CD530.jpg", + "romania": "https://upload.wikimedia.org/wikipedia/commons/c/c1/Romania_diplomatic_number_plate_CD_205_113.jpg", + "russia": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Russian_diplomatic_license_plate_014_D_161.jpg/640px-Russian_diplomatic_license_plate_014_D_161.jpg", + "sweden": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Sweden_diplomatic_license_plate_DL004B.jpg/1024px-Sweden_diplomatic_license_plate_DL004B.jpg", + "switzerland": "https://upload.wikimedia.org/wikipedia/commons/2/22/Switzerland_CD_Diplomatic_license_plate_GE_29%E2%80%A2201.jpg" + }; + } + + getCountryImage(country) { + return this.countryImages[country] || this.countryImages["None"]; + } + + getDiplomaticImage(country) { + return this.diplomaticImages[country] || this.diplomaticImages["None"]; + } +} + +export default ImageManager;