batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

translation

Browse source
This commit is contained in:
kene17 2021-04-07 20:05:42 -04:00
commit de604dd068
18 changed files with 765 additions and 1024 deletions
Download patch file Download diff file Expand all files Collapse all files

175
package-lock.json generated
View file

@ -1271,6 +1271,11 @@
}
}
},
"@googlemaps/js-api-loader": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.6.0.tgz",
"integrity": "sha512-amuilneCf7q5A/jDUE3ml83c9NjW/3DzIqiBDFIKZcraD0JSKbetkEQa5s57Z6QY7jxcequXgoL9CKJUY1xZ5A=="
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -1916,6 +1921,156 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
"integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
},
"@reach/auto-id": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.10.5.tgz",
"integrity": "sha512-we4/bwjFxJ3F+2eaddQ1HltbKvJ7AB8clkN719El7Zugpn/vOjfPMOVUiBqTmPGLUvkYrq4tpuFwLvk2HyOVHg==",
"requires": {
"@reach/utils": "0.10.5",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/combobox": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/combobox/-/combobox-0.10.5.tgz",
"integrity": "sha512-UrvdELLk+rnxK0o2e+jWmw6b7dteBWAylX4CEHE9KJuBbdwZ1PJY3YIAwJuvWM13Lcll2Pk7OlFJqRT90r2mRg==",
"requires": {
"@reach/auto-id": "0.10.5",
"@reach/descendants": "0.10.5",
"@reach/popover": "0.10.5",
"@reach/portal": "0.10.5",
"@reach/utils": "0.10.5",
"highlight-words-core": "1.2.2",
"prop-types": "^15.7.2",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/descendants": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.10.5.tgz",
"integrity": "sha512-8HhN4DwS/HsPQ+Ym/Ft/XJ1spXBYdE8hqpnbYR9UcU7Nx3oDbTIdhjA6JXXt23t5avYIx2jRa8YHCtVKSHuiwA==",
"requires": {
"@reach/utils": "0.10.5",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/observe-rect": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
"integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
},
"@reach/popover": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/popover/-/popover-0.10.5.tgz",
"integrity": "sha512-S+qWIsjrN1yMpHjgELhjpdGc4Q3q1plJtXBGGQRxUAjmCUA/5OY7t5w5C8iqMNAEBwCvYXKvK/pLcXFxxLykSw==",
"requires": {
"@reach/portal": "0.10.5",
"@reach/rect": "0.10.5",
"@reach/utils": "0.10.5",
"tabbable": "^4.0.0",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/portal": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.10.5.tgz",
"integrity": "sha512-K5K8gW99yqDPDCWQjEfSNZAbGOQWSx5AN2lpuR1gDVoz4xyWpTJ0k0LbetYJTDVvLP/InEcR7AU42JaDYDCXQw==",
"requires": {
"@reach/utils": "0.10.5",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/rect": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/rect/-/rect-0.10.5.tgz",
"integrity": "sha512-JBKs2HniYecq5zLO6UFReX28SUBPM3n0aizdNgHuvwZmDcTfNV4jsuJYQLqJ+FbCQsrSHkBxKZqWpfGXY9bUEg==",
"requires": {
"@reach/observe-rect": "1.2.0",
"@reach/utils": "0.10.5",
"prop-types": "^15.7.2",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/utils": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.10.5.tgz",
"integrity": "sha512-5E/xxQnUbmpI/LrufBAOXjunl96DnqX6B4zC2MO2KH/dRzLug5gM5VuOwV26egsp0jvsSPxojwciOhS43px3qw==",
"requires": {
"@types/warning": "^3.0.0",
"tslib": "^2.0.0",
"warning": "^4.0.3"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@react-google-maps/api": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-1.13.0.tgz",
"integrity": "sha512-mKwXziG5MbOvvcWG53FyZVZ8zjAuPNYkcS/+nYX9STMFNrI96AFq5l/zUn2QifRJnPzE8iO4V1vyMM+Ie9LpGg==",
"requires": {
"@googlemaps/js-api-loader": "1.6.0",
"@react-google-maps/infobox": "1.12.1",
"@react-google-maps/marker-clusterer": "1.12.1",
"invariant": "2.2.4"
}
},
"@react-google-maps/infobox": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-1.12.1.tgz",
"integrity": "sha512-tD/xijqRtKK/LNRzuerzuyvybnRaD8SLgCA064len4/enTo1abhQN215ZYqwbTOn7RgYt9qMgNnwoX//u3xoWw=="
},
"@react-google-maps/marker-clusterer": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-1.12.1.tgz",
"integrity": "sha512-JBSO5VJuouP/boBnSdRDCWq0UKO7jr3HvZVhis3ew+VGJ/BoCPu3lpU0HDsjjulfng+xwqLfVOIzP3QnvBPdCA=="
},
"@restart/context": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@ -5108,6 +5263,11 @@
"whatwg-url": "^8.0.0"
}
},
"date-fns": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
"integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg=="
},
"debug": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@ -7570,6 +7730,11 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"highlight-words-core": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
"integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
},
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@ -15242,6 +15407,11 @@
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"tabbable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
"integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
},
"table": {
"version": "6.0.7",
"resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
@ -15952,6 +16122,11 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
},
"use-places-autocomplete": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-1.9.1.tgz",
"integrity": "sha512-ZIkCob6qFBT5kP5wvtiDHV2Dw+DjlVSOj8RoM0XRkDB95PPQzICTjWHOhe4ClY0gO2Nq1bFG5K2WfIYYlIYtfg=="
},
"util": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

6
package.json
View file

@ -34,9 +34,13 @@
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-select": "^4.3.0",
"reactstrap": "^8.9.0",
"spectre.css": "^0.5.9",
"web-vitals": "^1.1.1",
"@reach/combobox": "^0.10.2",
"@react-google-maps/api": "^1.9.0",
"date-fns": "^2.13.0",
"use-places-autocomplete": "^1.3.5",
"reactstrap": "^8.9.0",
"yup": "^0.32.9"
},
"scripts": {

32
public/assets/locales/en/translations.json
View file

@ -23,11 +23,43 @@
"Nav_Contact_Us": "Contact Us",
"Nav_listing_page": "listing-page",
"Nav_Login": "Login",
<<<<<<< HEAD
"View_Button": "View",
"MeetTeam": "Meet the Team",
"Sales_Ass":"sales assistant"
=======
"Slogan_1": "YOU ARE NOT BUYING A HOUSE, ",
"Slogan_2": "YOU ARE BUYING A LIFESTYLE. ",
"Info": "Click for Details",
"Home1": "Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses.",
"Home2": "The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the",
"Home3": "website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page",
"Home4": "is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our",
"Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
"Home6": "click the buttons above to explore the houses you want.",
"Desc": "Description",
"Rooms": "1 Bedroom, 2 Bathroom",
"Danger1": "Message could not send.",
"Danger2": "There are some errors in your contact form.",
"Success1": "The message is successfully sent.",
"Success2": "You contact form will be delivered to our support team.",
"Contact-Title": "Contact to Us",
"Contact-House": "Select an Agent",
"Contact-Agent": "Select a House",
"No-Pref": "No preference",
"Contact-First": "First Name",
"Contact-Last": "Last Name",
"Contact-Mail": "Email Address",
"Contact-Message": "Message",
"Contact-Submit": "Submit",
"Contact-Error1": "Please select an item in the list.",
"Contact-Error2": "Please fill out this field.",
"Contact-Error3": "Invalid email address."
>>>>>>> 540f8f4cac411d798ced6e126b65de938da68ad1
}

30
public/assets/locales/fr/translations.json
View file

@ -23,7 +23,37 @@
"Nav_Contact_Us": "Nous contacter",
"Nav_listing_page": "page de liste",
"Nav_Login": "Connexion",
<<<<<<< HEAD
"View_Button": "vue",
"MeetTeam": "Rencontrer l'équipe",
"Sales_Ass":"assistant des ventes"
=======
"Slogan_1": "VOUS N'ACHETEZ PAS UNE MAISON, ",
"Slogan_2": "VOUS ACHETEZ UN STYLE DE VIE. ",
"Info": "Cliquer pour les détails",
"Home1": "Bienvenue chez Kene's Cribs. Kene's Cribs est une véritable société d'estateur qui fournit les maisons aux clients.",
"Home2": "Les maisons limitées aux clients ne se limitent qu'aux rêves des clients. Afin de mieux naviguer dans site Web, utilisez",
"Home3": "la barre de navigation pour basculer entre les pages. La page des listes sert à parcourir les maisons, la page Agents",
"Home4": "est pour parcourir les estators, la page Contactez-nous est pour nous contacter et la page de connexion est pour notre",
"Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
"Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
"Desc": "La Description",
"Rooms": "1 chambre, 2 salles de bains",
"Danger1": "Le message n'a pas pu être envoyé.",
"Danger2": "Il y a des erreurs dans votre formulaire de contact.",
"Success1": "Le message a été envoyé avec succès.",
"Success2": "Votre formulaire de contact sera envoyé à notre équipe d'assistance.",
"Contact-Title": "Contactez-Nous",
"Contact-House": "Sélectionnez un Agent",
"Contact-Agent": "Sélectionnez une Maison",
"No-Pref": "Aucune préférence",
"Contact-First": "Prénom",
"Contact-Last": "Nom de Famille",
"Contact-Mail": "Adresse E-mail",
"Contact-Message": "Le Message",
"Contact-Submit": "Soumettre",
"Contact-Error1": "Veuillez sélectionner un élément dans la liste.",
"Contact-Error2": "Veuillez remplir ce champ.",
"Contact-Error3": "Adresse e-mail invalide."
>>>>>>> 540f8f4cac411d798ced6e126b65de938da68ad1
}

5
src/App.js
View file

@ -3,7 +3,6 @@ import Footer from "./shared-components/footer-component/Footer";
import Navbar from "./shared-components/navbar-component/Navbar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import i18next from "i18next";
import { useTranslation } from "react-i18next";
import Cookies from "js-cookie";
import HomePage from "./homePage/Homepage";
import ListingsPage from "./listings-page/ListingsPage";
@ -31,7 +30,6 @@ function App() {
const currentLanguage = langauges.find(
(lang) => lang.code === currentLanguageCode
);
const { t } = useTranslation();
useEffect(() => {
document.body.dir = currentLanguage.dir || "ltr";
@ -69,9 +67,6 @@ function App() {
</div>
</div>
</div>
<div className="d-flex flex-column align-items-start">
{t("Welcome_to_React")}
</div>
</div>
<BrowserRouter>
<Navbar></Navbar>

38
src/homePage/Homepage.js
View file

@ -6,6 +6,7 @@ import house3 from "../images/house3.jpg";
import house4 from "../images/house4.jpg";
import Carousel from "react-bootstrap/Carousel";
import Button from "react-bootstrap/Button";
import { withTranslation } from "react-i18next";
@ -19,6 +20,7 @@ class Homepage extends Component {
}
render() {
const { t } = this.props;
const { nextIcon, prevIcon } = this.state;
return (
<div className="homePage">
@ -26,8 +28,8 @@ class Homepage extends Component {
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
<h1 className="big-heading">{t("Slogan_1")}</h1>
<h1 className="big-heading">{t("Slogan_2")}</h1>
</div>
</div>
</div>
@ -39,9 +41,9 @@ class Homepage extends Component {
<img className="headerImg" src={house1} alt="First House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -49,9 +51,9 @@ class Homepage extends Component {
<img className="headerImg" src={house2} alt="Second House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -59,9 +61,9 @@ class Homepage extends Component {
<img className="headerImg" src={house3} alt="Third House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -69,9 +71,9 @@ class Homepage extends Component {
<img className="headerImg" src={house4} alt="Fourth House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">Click for Details</Button>
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -80,13 +82,13 @@ class Homepage extends Component {
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>Description </h2>
<p style={{ fontSize: "110%" }}> Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses. <br></br>
The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the<br></br>
website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page<br></br>
is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our<br></br>
members who want to benefit from our deals. Above are some houses which can interest you. Feel free to<br></br>
click the buttons above to explore the houses you want. </p>
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
<p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
{t("Home2")}<br></br>
{t("Home3")}<br></br>
{t("Home4")}<br></br>
{t("Home5")}<br></br>
{t("Home6")}</p>
</div>
</div>
</div>
@ -98,4 +100,4 @@ class Homepage extends Component {
}
}
export default Homepage;
export default withTranslation()(Homepage);

BIN
src/images/bg1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/images/fbg1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/images/fbg2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/images/fbg3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 KiB

37
src/listings-page/ListingsPage.css
View file

@ -1,3 +1,9 @@
body{
/*background-image: url("../images/bg1.jpg");
background-position: 0px 60px;
*/
}
.booking_button{
text-align: right;
}
@ -6,4 +12,33 @@
font-size: 40px;
font-weight:bolder;
padding-right: 5%;
};
}
.search{
display:inline-block;
margin:3% 0%;
}
.compass{
height:25px;
width:25px;
}
.buttonImg{
background-color: transparent;
border: none !important;
}
.main_borders{
padding:0% 10% 4% 10%;
}
.map_style{
text-align: center;
}
.filters{
margin: 2% 0%
}

504
src/listings-page/ListingsPage.js
View file

@ -2,198 +2,354 @@
import React, { useState, useEffect, Component } from "react";
import {
GoogleMap,
withScriptjs,
withGoogleMap,
useLoadScript,
Marker,
InfoWindow
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
InfoWindow,
} from "@react-google-maps/api";
import usePlacesAutocomplete, {
getGeocode,
getLatLng,
} from "use-places-autocomplete";
import {
Combobox,
ComboboxInput,
ComboboxPopover,
ComboboxList,
ComboboxOption,
} from "@reach/combobox";
import { formatRelative } from "date-fns";
import Select from "react-select";
import "@reach/combobox/styles.css";
import mapStyles from "./mapStyles";
import * as listingData from "./data/property-data.json";
import "./ListingsPage.css";
function Map() {
import compassImg from "./compass.svg";
const [selectedProperty, setSelectedProperty] = useState(null);
const libraries = ["places"];
const mapContainerStyle = {
height: "700px",
width: "100vm",
};
const options = {
styles: mapStyles,
disableDefaultUI: true,
zoomControl: true,
};
const center = {
lat: 45.4231,
lng: -75.6931,
};
export default function ListingsPage() {
const price_filter = [
{
value: null,
label: "Any",
},
{
value: 100000,
label: "$100000",
},
{
value: 200000,
label: "$200000",
},
{
value: 300000,
label: "$300000",
},
{
value: 400000,
label: "$400000",
}
];
const bed_filter = [
{
value: null,
label: "Any",
},
{
value: 1,
label: "One Bed",
},
{
value: 2,
label: "Two Beds",
},
{
value: 3,
label: "Three Beds",
}
];
const bath_filter = [
{
value: null,
label: "Any",
},
{
value: 1,
label: "One Bath",
},
{
value: 2,
label: "Two Baths",
},
{
value: 3,
label: "Three Baths",
}
];
//console.log(data1[0]);
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: `https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`,
libraries,
});
const [selectedBudget, setSelectedBudget] = useState(null);
const [selectedBeds, setSelectedBeds] = useState(null);
const [selectedBaths, setSelectedBaths] = useState(null);
const [markers, setMarkers] = React.useState([]);
const [selected, setSelected] = React.useState(null);
const [budget, setBudget] = useState(null);
const [bed, setBed] = useState(null);
const [bath, setBath] = useState(null);
const mapRef = React.useRef();
const onMapLoad = React.useCallback((map) => {
mapRef.current = map;
//console.log(current);
}, []);
const panTo = React.useCallback(({ lat, lng }) => {
mapRef.current.panTo({ lat, lng });
mapRef.current.setZoom(10);
}, []);
if (loadError) return "Error";
if (!isLoaded) return "Loading...";
// handle onChange event of the dropdown
const handleBudgetChange = (e) => {
setSelectedBudget(e);
setBudget(e.value);
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
//https://stackoverflow.com/questions/57341541/removing-object-from-array-using-hooks-usestate/57341724
};
const handleBedChange = (e) => {
setSelectedBeds(e);
setBed(e.value);
};
const handleBathChange = (e) => {
setSelectedBaths(e);
setBath(e.value);
};
return (
<GoogleMap
defaultZoom={10}
defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
//https://snazzymaps.com/explore
defaultOptions={{ styles: mapStyles }}
>
{listingData.Properties.map(house => (
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0]
}}
onClick={() => {
setSelectedProperty(house)
}}
icon={{
url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50)
}}
<div className="main_borders">
<div class="filters">
<Search class="search" panTo={panTo} />
<Locate class="search" panTo={panTo} />
<Select
class="search"
placeholder="Select Budget"
value={selectedBudget} // set selected value
options={price_filter} // set list of the data
onChange={handleBudgetChange} // assign onChange function
/>
<Select
class="search"
placeholder="# Beds"
value={selectedBeds} // set selected value
options={bed_filter} // set list of the data
onChange={handleBedChange} // assign onChange function
/>
))}
{selectedProperty && (
<InfoWindow
position={{
lat: selectedProperty.coordinates[1],
lng: selectedProperty.coordinates[0]
}}
onCloseClick={() => {
setSelectedProperty(null);
}}
>
<div>
<h2>{selectedProperty.ADDRESS}</h2>
<p> {selectedProperty.DESC}</p>
<div>
<div class="row">
<div className="col-6">
<i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
<i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
</div>
<div className="col-6 booking_button">
<button>Show Listing</button>
</div>
</div>
</div>
</div>
</InfoWindow>
)}
</GoogleMap>
);
}
const MapWrapped = withScriptjs(withGoogleMap(Map))
class ListingsPage extends Component {
render() {
return (
<div className="listings">
<section class="colored-section2" id="cta">
{/*
<div class="row">
<div class="col-12">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
*/}
<div class="row">
<div class="col-12">
<section className="colored-section" id="features">
<div className="container-fluid">
<h2> Map </h2>
</div>
</section>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
</div>
</div>
</section>
<Select
class="search"
placeholder="# Baths"
value={selectedBaths} // set selected value
options={bath_filter} // set list of the data
onChange={handleBathChange} // assign onChange function
/>
</div>
);
}
<div >
<GoogleMap
id="map"
mapContainerStyle={mapContainerStyle}
zoom={10}
center={center}
options={options}
onLoad={onMapLoad}
>
{listingData.Properties.map((house) =>
(budget >= house.PRICE || !budget) &&
(bed == house.BEDS || !bed) &&
(bath == house.BATHS || !bath) ? (
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0],
}}
onClick={() => {
setSelected(house);
}}
icon={{
url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50),
}}
visible={true}
/>
) : (
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0],
}}
onClick={() => {
setSelected(house);
}}
icon={{
url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50),
}}
visible={false}
/>
)
)}
{selected ? (
<InfoWindow
position={{
lat: selected.coordinates[1],
lng: selected.coordinates[0],
}}
onCloseClick={() => {
setSelected(null);
}}
>
<div>
<h2>{selected.ADDRESS}</h2>
<p> {selected.DESC}</p>
<div>
<div class="row">
<div className="col-6">
<i class="fas fa-bed fa-3x"></i>{" "}
<span class="popup_nums"> {selected.BEDS} </span>
<i class="fas fa-bath fa-3x"></i>{" "}
<span class="popup_nums"> {selected.BATHS}</span>
</div>
<div className="col-6 booking_button">
<button>Show Listing</button>
</div>
</div>
</div>
</div>
</InfoWindow>
) : null}
</GoogleMap>
</div>
</div>
);
}
export default ListingsPage;
function Locate({ panTo }) {
return (
<button
data-toggle="tooltip"
data-placement="right"
title="Go to my current location"
class="buttonImg"
onClick={() => {
navigator.geolocation.getCurrentPosition(
(position) => {
panTo({
lat: position.coords.latitude,
lng: position.coords.longitude,
});
},
() => null
);
}}
>
<img src={compassImg} class="compass" alt="my location" />
</button>
);
}
function Search({ panTo }) {
const {
ready,
value,
suggestions: { status, data },
setValue,
clearSuggestions,
} = usePlacesAutocomplete({
requestOptions: {
location: { lat: () => 43.6532, lng: () => -79.3832 },
radius: 100 * 1000,
},
});
// https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest
const handleInput = (e) => {
setValue(e.target.value);
};
const handleSelect = async (address) => {
setValue(address, false);
clearSuggestions();
try {
const results = await getGeocode({ address });
const { lat, lng } = await getLatLng(results[0]);
panTo({ lat, lng });
} catch (error) {
console.log("😱 Error: ", error);
}
};
return (
<div className="search">
<Combobox onSelect={handleSelect}>
<ComboboxInput
value={value}
onChange={handleInput}
disabled={!ready}
placeholder="Search your location"
/>
<ComboboxPopover>
<ComboboxList>
{status === "OK" &&
data.map(({ id, description }) => (
<ComboboxOption key={id} value={description} />
))}
</ComboboxList>
</ComboboxPopover>
</Combobox>
</div>
);
}

78
src/listings-page/compass.svg Normal file
View file

@ -0,0 +1,78 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="25px" y="25px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#2C5871;" cx="256" cy="256" r="256"/>
<path style="fill:#1C4754;" d="M256,0c-7.933,0-15.777,0.38-23.526,1.086C362.829,12.966,464.948,122.548,464.948,256
S362.829,499.034,232.474,510.914C240.223,511.62,248.067,512,256,512c141.385,0,256-114.615,256-256S397.385,0,256,0z"/>
<circle style="fill:#E6F1FF;" cx="256" cy="256" r="221.06"/>
<path style="fill:#BFCFD6;" d="M256,34.939c-7.948,0-15.795,0.429-23.526,1.247C343.5,47.932,430.009,141.859,430.009,256
S343.5,464.068,232.474,475.814c7.731,0.818,15.578,1.247,23.526,1.247c122.089,0,221.061-98.972,221.061-221.061
S378.089,34.939,256,34.939z"/>
<path style="fill:#66C1FF;" d="M159.806,163.214L233.29,278.71l115.5,73.487c2.226,1.417,4.823-1.18,3.406-3.406l-73.487-115.5
l-115.496-73.484C160.986,158.389,158.389,160.986,159.806,163.214z"/>
<path style="fill:#FF4C4C;" d="M159.807,163.215L233.29,278.71l45.419-45.419l-115.494-73.483
C160.988,158.39,158.39,160.988,159.807,163.215z"/>
<circle style="fill:#555A66;" cx="256" cy="256" r="33.03"/>
<g>
<path style="fill:#2C5871;" d="M377.166,142.576c-1.981,0-3.963-0.756-5.474-2.268c-3.024-3.023-3.024-7.925,0-10.949
l12.408-12.408c3.023-3.023,7.925-3.023,10.949,0c3.024,3.023,3.024,7.925,0,10.949l-12.408,12.408
C381.129,141.82,379.148,142.576,377.166,142.576z"/>
<path style="fill:#2C5871;" d="M122.425,397.317c-1.981,0-3.963-0.756-5.474-2.268c-3.024-3.023-3.024-7.925,0-10.949
l12.408-12.408c3.023-3.023,7.925-3.023,10.949,0s3.024,7.925,0,10.949L127.9,395.049
C126.388,396.56,124.407,397.317,122.425,397.317z"/>
<path style="fill:#2C5871;" d="M389.575,397.317c-1.981,0-3.963-0.756-5.474-2.268l-12.408-12.408
c-3.024-3.023-3.024-7.925,0-10.949c3.023-3.023,7.925-3.023,10.949,0L395.05,384.1c3.024,3.023,3.024,7.925,0,10.949
C393.537,396.56,391.556,397.317,389.575,397.317z"/>
<path style="fill:#2C5871;" d="M134.834,142.576c-1.981,0-3.963-0.756-5.474-2.268L116.951,127.9
c-3.024-3.023-3.024-7.925,0-10.949c3.023-3.023,7.925-3.023,10.949,0l12.408,12.408c3.024,3.023,3.024,7.925,0,10.949
C138.796,141.82,136.815,142.576,134.834,142.576z"/>
<path style="fill:#2C5871;" d="M114.668,275.577c-0.709,2.126-3.331,3.118-6.023,3.118c-2.622,0-5.386-0.992-5.882-3.118
l-4.535-19.133l-4.606,19.133c-0.496,2.126-3.26,3.118-5.882,3.118c-2.693,0-5.386-0.992-6.024-3.118l-14.031-44.573
c-0.071-0.213-0.142-0.567-0.142-0.85c0-2.055,3.26-3.685,5.882-3.685c1.417,0,2.693,0.496,3.047,1.842l11.197,38.408l6.023-24.66
c0.425-1.772,2.48-2.551,4.535-2.551c1.984,0,4.039,0.78,4.465,2.551l6.023,24.66l11.197-38.408
c0.354-1.346,1.63-1.842,3.047-1.842c2.622,0,5.882,1.63,5.882,3.685c0,0.283-0.071,0.638-0.142,0.85L114.668,275.577z"/>
<path style="fill:#2C5871;" d="M420.998,248.72h10.771c1.842,0,2.905,1.772,2.905,3.685c0,1.63-0.921,3.543-2.905,3.543h-10.771
v14.243h20.054c1.842,0,2.905,1.913,2.905,4.11c0,1.913-0.921,3.968-2.905,3.968h-25.228c-2.055,0-4.039-0.992-4.039-2.905v-45.991
c0-1.913,1.984-2.905,4.039-2.905h25.228c1.984,0,2.905,2.055,2.905,3.968c0,2.197-1.063,4.11-2.905,4.11h-20.054V248.72z"/>
<path style="fill:#2C5871;" d="M263.262,108.382l-15.235-28.487v28.487c0,1.913-2.339,2.905-4.606,2.905
c-2.338,0-4.606-0.992-4.606-2.905V62.391c0-1.984,2.268-2.905,4.606-2.905c3.331,0,4.677,0.709,6.874,4.89l13.676,26.432V62.321
c0-1.984,2.268-2.835,4.606-2.835c2.268,0,4.606,0.85,4.606,2.835v46.061c0,1.913-2.339,2.905-4.606,2.905
C266.381,111.287,264.467,110.579,263.262,108.382z"/>
<path style="fill:#2C5871;" d="M263.228,431.434c0-10.63-22.747-7.37-22.747-24.164c0-10.559,9.071-14.173,17.22-14.173
c4.181,0,13.464,0.992,13.464,5.669c0,1.63-1.134,4.89-3.685,4.89c-2.197,0-3.827-2.693-9.779-2.693
c-5.102,0-8.008,2.055-8.008,5.457c0,8.787,22.747,5.74,22.747,24.093c0,10.134-7.087,15.378-16.866,15.378
c-9.283,0-16.369-4.677-16.369-8.787c0-1.984,1.843-4.961,4.039-4.961c2.905,0,4.819,5.457,12.047,5.457
C259.543,437.599,263.228,435.686,263.228,431.434z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

16
src/listings-page/data/property-data.json
View file

@ -5,7 +5,9 @@
{
"LISTING_ID": 1,
"ADDRESS": "8720 Russell Road",
"PRICE": "$500000",
"PRICE": 400000,
"BEDS":3,
"BATHS":3,
"IMAGES":[
],
@ -26,7 +28,9 @@
"LISTING_ID": 2,
"ADDRESS": "1490 Youville Drive",
"PRICE": "$500000",
"PRICE": 100000,
"BEDS":1,
"BATHS":1,
"IMAGES":[
],
@ -49,7 +53,9 @@
"LISTING_ID": 3,
"ADDRESS": "100 Charlie Rogers Place",
"PRICE": "$500000",
"PRICE": 200000,
"BEDS":2,
"BATHS":3,
"IMAGES":[
],
@ -72,7 +78,9 @@
"LISTING_ID": 4,
"ADDRESS": "2785 8th Line Road",
"PRICE": "$500000",
"PRICE": 300000,
"BEDS":3,
"BATHS":3,
"IMAGES":[
],

789
src/listings-page/data/testing_stuff.json
View file

@ -1,789 +0,0 @@
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {"name": "urn: ogc: def: crs: OGC: 1.3: CRS84"}
},
"features": [
{
"type": "Feature",
"properties": {
"PARK_ID": 960,
"FACILITYID": 28014,
"NAME": "Bearbrook Skateboard Park",
"NAME_FR": "Bearbrook skate park",
"ADDRESS": "8720 Russell Road",
"ADDRESS_FR": "8720, chemin Russell",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.3372987731628, 45.383321536272049]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1219,
"FACILITYID": 28001,
"NAME": "Bob MacQuarrie Skateboard Park (SK8 Extreme Park)",
"NAME_FR": "Bob-MacQuarrie Skate Park (SK8 Extreme Park)",
"ADDRESS": "1490 Youville Drive",
"ADDRESS_FR": "1490, promenade Youville",
"FACILITY_T": "other",
"FACILITY_1": "other",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Community: mid size facility to service population of 40,000 plus",
"FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
"DESCRIPTIO": "Flat asphalt surface, 10 components, City run learn to skateboard programs, City run skateboard camps in summer",
"DESCRIPT_1": "Flat asphalt surface, 10 modules, programs and summer skateboard camps managed by the City",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.546518086577947, 45.467134581917357]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1157,
"FACILITYID": 28002,
"NAME": "Walter Baker Skateboard Park",
"NAME_FR": "Walter-Baker skate park",
"ADDRESS": "100 Charlie Rogers Place",
"ADDRESS_FR": "100, place Charlie Rogers",
"FACILITY_T": "bowl",
"FACILITY_1": "bowl",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Community: mid size facility to service population of 40,000 plus",
"FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
"DESCRIPTIO": "Concrete bowl, 7,000 sq ft",
"DESCRIPT_1": "Concrete bowl, 7,000 sq. Ft.",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.898610599532319, 45.295014379864874]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 9,
"FACILITYID": 28006,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "2785 8th Line Road",
"ADDRESS_FR": "2785, chemin 8th Line",
"FACILITY_T": "other",
"FACILITY_1": "other",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor - Mobile",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Metcalfe Community Center - Roving Skateboard Park Location",
"FACILITY_F": "Metcalfe Community Center - Itinerant skate park site",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.468561642270757, 45.23032561834377]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1160,
"FACILITYID": 28007,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "10 Warner Colpitts Lane",
"ADDRESS_FR": "10, ruelle Warner Colpitts",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "yes / oui",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Indoor - Summer",
"MODIFIED_D": "2018/03/07",
"CREATED_DA": null,
"FACILITY": "Johnny Leroux Stittsville Community Arena - Roving Skateboard Park Location",
"FACILITY_F": "Stittsville Johnny-Leroux community arena - Itinerant skate park site",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.926651366520872, 45.260659774950561]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1693,
"FACILITYID": 28016,
"NAME": "Legacy Skateboard Park",
"NAME_FR": "Skatepark Legacy",
"ADDRESS": "101 Centrepointe Drive",
"ADDRESS_FR": "101, promenade Centrepointe",
"FACILITY_T": "bowl",
"FACILITY_1": "bowl",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "District: larger facility to service population of 100,000 plus",
"FACILITY_F": "District: large facility providing services to 100,000 or more residents.",
"DESCRIPTIO": "Large concrete bowl, many street and vertical components, 17,000 sq ft",
"DESCRIPT_1": "Large concrete bowl, street modules and vertical modules, 17,000 ft2",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.760933332842754, 45.345566668964558]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1717,
"FACILITYID": 28018,
"NAME": "Greenboro Skateboard Park",
"NAME_FR": "Greenboro skate park",
"ADDRESS": "3142 Conroy Road",
"ADDRESS_FR": "3142, chemin Conroy",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.625996131485707, 45.375401587496128]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 137,
"FACILITYID": 28019,
"NAME": "Bridlewood Skateboard Park",
"NAME_FR": "Bridlewood skate park",
"ADDRESS": "65 Stonehaven Drive",
"ADDRESS_FR": "65 Stonehaven Drive",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.857009812435976, 45.290758029776626]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1133,
"FACILITYID": 28020,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "100 Clifford Campbell Street",
"ADDRESS_FR": "100, rue Clifford-Campbell",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Fitzroy Harbor Community Center - Roving Skateboard Park Location",
"FACILITY_F": "Fitzroy Harbor Community Center - Itinerant skate park site",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-76.206087708136721, 45.470459866077654]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 657,
"FACILITYID": 28000,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "110 Malvern Drive",
"ADDRESS_FR": "110, promenade Malvern",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Walter Baker Sports Center - Roving Skateboard Park Location",
"FACILITY_F": "Walter-Baker Sports Center - Itinerant skate park site",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.760235255689508, 45.280622216516925]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 653,
"FACILITYID": 28008,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "5660 Osgoode Main Street",
"ADDRESS_FR": "5660, rue Osgoode Main",
"FACILITY_T": "other",
"FACILITY_1": "other",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor - Mobile",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Osgoode Community Center - Roving Skateboard Park Location",
"FACILITY_F": "Osgoode Community Center - Itinerant skate park site",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.60118478829267, 45.147641950106689]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 812,
"FACILITYID": 35050,
"NAME": "Charlie Bowins Skateboard Park",
"NAME_FR": "Charlie-Bowins skate park",
"ADDRESS": "435 Bronson Avenue",
"ADDRESS_FR": "435, avenue Bronson",
"FACILITY_T": "bowl",
"FACILITY_1": "bowl",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor (Commemoratively named Charlie Bowins Skateboard Park on June 10, 2015)",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": "2015/05/20",
"FACILITY": "District: larger facility to service population of 100,000 plus",
"FACILITY_F": "District: large facility providing services to 100,000 or more residents.",
"DESCRIPTIO": "Flat concrete surface, 10 plus components (large half pipe), City run learn to skateboard programs, City run skateboard camps in summer",
"DESCRIPT_1": "Flat concrete surface, 10 or more modules (large halfpipe), summer skateboard programs and camps managed by the City",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.703622500360268, 45.408488357092367]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 2457,
"FACILITYID": 35637,
"NAME": "Diamond Jubilee Skateboard Park",
"NAME_FR": "Diamond Jubilee Skate Park",
"ADDRESS": "2810 Findlay Creek Drive",
"ADDRESS_FR": "2810 Findlay Creek Drive",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "yes / oui",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2017/07/11",
"CREATED_DA": "2016/06/22",
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.609516309730921, 45.314086718258636]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 430,
"FACILITYID": 28005,
"NAME": "Blackburn Skateboard Park",
"NAME_FR": "Blackburn skate park",
"ADDRESS": "190 Glen Park Drive",
"ADDRESS_FR": "190 Glen Park Drive",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.562796920677627, 45.429643413219814]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 989,
"FACILITYID": 28017,
"NAME": "Goulbourn Skateboard Park",
"NAME_FR": "Planchodrome Goulbourn",
"ADDRESS": "1500 Shea Road",
"ADDRESS_FR": "1500, chemin Shea",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 6 components",
"DESCRIPT_1": "Flat asphalt surface, 6 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.907108695123526, 45.26222860981953]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 1334,
"FACILITYID": 28011,
"NAME": "Constance Bay Skateboard Park",
"NAME_FR": "Constance Bay skate park",
"ADDRESS": "262 Len Purcell Drive",
"ADDRESS_FR": "262, Len-Purcell promenade",
"FACILITY_T": "other",
"FACILITY_1": "other",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-76.09244957349965, 45.499050061534312]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 923,
"FACILITYID": 28013,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "334 River Road",
"ADDRESS_FR": "334, chemin River",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Eccolands Park - Roving Skateboard Park Location",
"FACILITY_F": "Parc Eccolands - Location of an itinerant skate park",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.695392300925718, 45.315355581248873]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 762,
"FACILITYID": 28004,
"NAME": "Trillium Park Skateboard Park",
"NAME_FR": "Park Trillium skate park",
"ADDRESS": "2030 Ogilvie Road",
"ADDRESS_FR": "2030, chemin Ogilvie",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat asphalt surface, 5 components",
"DESCRIPT_1": "Flat asphalt surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.601158413850058, 45.436441777242031]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 52,
"FACILITYID": 35120,
"NAME": "Lansdowne Skateboard Park",
"NAME_FR": "Lansdowne Skate Park",
"ADDRESS": "450 Queen Elizabeth Driveway",
"ADDRESS_FR": "450 Queen Elizabeth Drive",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "yes / oui",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2017/07/11",
"CREATED_DA": "2015/09/23",
"FACILITY": "A series of skateboard ramps ideally suited to beginners.",
"FACILITY_F": "A series of ramps suitable for beginners.",
"DESCRIPTIO": "Flat asphalt surface",
"DESCRIPT_1": "Flat asphalt surface",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.681193500335723, 45.400372622455215]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 2488,
"FACILITYID": 35815,
"NAME": "Greely Village Skateboard Park",
"NAME_FR": "Planchodrome Greely Village",
"ADDRESS": "7292 Parkway Road",
"ADDRESS_FR": "7292, chemin Parkway",
"FACILITY_T": "other",
"FACILITY_1": "other",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "yes / oui",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/01/04",
"CREATED_DA": "2017/04/28",
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat concrete surface, 5 components",
"DESCRIPT_1": "Flat concrete surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.553065849890629, 45.265433081236672]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 330,
"FACILITYID": 28003,
"NAME": "Manotick Skateboard Park",
"NAME_FR": "Planchodrome Manotick",
"ADDRESS": "5572 Doctor Leach Drive",
"ADDRESS_FR": "5572, Doctor-Leach promenade",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "yes / oui",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor - Joined with basketball",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Community: mid size facility to service population of 40,000 plus",
"FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
"DESCRIPTIO": "Flat asphalt surface, 8 components",
"DESCRIPT_1": "Flat asphalt surface, 8 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.686746214582783, 45.22266136322127]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 693,
"FACILITYID": 28010,
"NAME": "Roving Skateboard Park Location",
"NAME_FR": "Location of an itinerant skate park",
"ADDRESS": "1448 Meadow Drive",
"ADDRESS_FR": "1448 Meadow Drive",
"FACILITY_T": "other",
"FACILITY_1": "other",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor - Mobile",
"MODIFIED_D": "2018/01/18",
"CREATED_DA": null,
"FACILITY": "Andy Shields Park - Roving Skateboard Park Location",
"FACILITY_F": "Andy-Shields Park - Location of an itinerant skate park",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.556978502821494, 45.261353985880973]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 2544,
"FACILITYID": 35667,
"NAME": "Berrigan Skateboard Park",
"NAME_FR": "Planchodrome Berrigan",
"ADDRESS": "51 Berrigan Drive",
"ADDRESS_FR": "51, promenade Berrigan",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "no / non",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/02/27",
"CREATED_DA": "2016/06/27",
"FACILITY": "Community: mid size facility to service population of 40,000 plus",
"FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
"DESCRIPTIO": "Flat concrete surface, 10 plus components",
"DESCRIPT_1": "Flat concrete surface, 10 or more modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.747348794023239, 45.275696004260205]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 2599,
"FACILITYID": 49251,
"NAME": "Eugène Martineau Skateboard Park",
"NAME_FR": "Planchodrome Eugène-Martineau",
"ADDRESS": "710 Mikinak Road",
"ADDRESS_FR": "710, chemin Mikinak",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "yes / oui",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/11/29",
"CREATED_DA": "2018/11/29",
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.632030968141081, 45.450696284941976]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 2278,
"FACILITYID": 49211,
"NAME": "Vista Skateboard Park",
"NAME_FR": "Planchodrome Vista",
"ADDRESS": "720 Vistapark Drive",
"ADDRESS_FR": "720, Vistapark promenade",
"FACILITY_T": "flat",
"FACILITY_1": "flat",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "yes / oui",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2018/11/29",
"CREATED_DA": "2018/06/22",
"FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
"FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
"DESCRIPTIO": "Flat surface, 5 components",
"DESCRIPT_1": "Flat surface, 5 modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.471003922143311, 45.450391044010431]
}
},
{
"type": "Feature",
"properties": {
"PARK_ID": 2113,
"FACILITYID": 35299,
"NAME": "Innovation Skateboard Park",
"NAME_FR": "Planchomdrome Innovation",
"ADDRESS": "4101 Innovation Drive",
"ADDRESS_FR": "4101, promenade Innovation",
"FACILITY_T": "bowl",
"FACILITY_1": "bowl",
"ACCESSCTRL": "no / non",
"ACCESSIBLE": "yes / oui",
"OPEN": null,
"NOTES": "Outdoor",
"MODIFIED_D": "2017/07/11",
"CREATED_DA": "2016/02/08",
"FACILITY": "District: larger facility to service population of 100,000 plus",
"FACILITY_F": "District: large facility providing services to 100,000 or more residents.",
"DESCRIPTIO": "Large concrete bowl, 10 plus components, many street and vertical components",
"DESCRIPT_1": "Large concrete bowl, 10 or more modules, street modules and vertical modules",
"PICTURE_LI": null,
"PICTURE_DE": null,
"PICTURE__1": null
},
"geometry": {
"type": "Point",
"coordinates": [-75.931122879767898, 45.34125624499935]
}
}
]
}

2
src/shared-components/contact-us/Contact-us.css
View file

@ -19,7 +19,7 @@
}
.heading-1{
padding-left: 38%;
padding-left: 36%;
padding-top: 10px;
padding-bottom: 20%;
font-size: 40px;

75
src/shared-components/contact-us/contact-us.js
View file

@ -7,6 +7,7 @@ import {
FormWithConstraints
} from 'react-form-with-constraints';
import Alert from 'react-bootstrap/Alert';
import { withTranslation } from "react-i18next";
@ -28,25 +29,26 @@ class ContactUs extends Component {
render() {
const { t } = this.props;
return (
<div className="contact-us">
<Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
<Alert.Heading>Message could not send.</Alert.Heading>
<Alert.Heading>{t("Danger1")}</Alert.Heading>
<p>
There are some errors in your contact form.
</p>
{t("Danger2")}
</p>
</Alert>
<Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
<Alert.Heading>The message is successfully sent.</Alert.Heading>
<Alert.Heading>{t("Success1")}</Alert.Heading>
<p>
You contact form will be delivered to our support team.
</p>
{t("Success2")}
</p>
</Alert>
<div className="container">
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<h2 className="heading-1">{t("Contact-Title")}</h2>
<FormWithConstraints ref={form => this.form = form}
id="contact-form"
onSubmit={this.handleSubmit.bind(this)}
@ -57,30 +59,34 @@ class ContactUs extends Component {
<div className="row">
<div className="col-6">
<select className="form-group" name="agent" id="dropdown" required onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
<option value="">Select an Agent</option>
<option value="">{t("Contact-Agent")}</option>
<option value="Michael">Michael</option>
<option value="Jin">Jin </option>
<option value="Anita">Anita</option>
<option value="Alex">Alex</option>
<option value="Xuan">Xuan</option>
<option value="Walter">Walter</option>
<option value="No preference">No preference</option>
<option value="No preference">{t("No-Pref")}</option>
</select>
<FieldFeedbacks for="agent">
<FieldFeedback when="*" />
<FieldFeedback when="*">
{t("Contact-Error1")}
</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="col-6">
<select className="form-group" name="house" id="dropdown" required onChange={this.onHouseChange.bind(this)} value={this.state.house}>
<option value="">Select a House</option>
<option value="">{t("Contact-House")}</option>
<option value="100 Charlie Rogers">100 Charlie Rogers</option>
<option value="1490 Youville Drive">1490 Youville Drive </option>
<option value="8720 Russell Road">8720 Russell Road</option>
<option value="2785 8th Line Road">2785 8th Line Road</option>
<option value="No preference">No preference</option>
<option value="No preference">{t("No-Pref")}</option>
</select>
<FieldFeedbacks for="house">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error1")}
</FieldFeedback>
</FieldFeedbacks>
</div>
</div>
@ -90,24 +96,28 @@ class ContactUs extends Component {
<input name="firstname"
type="text"
className="form-control"
placeholder="First Name"
placeholder={t("Contact-First")}
value={this.state.firstname}
required onChange={this.onFirstNameChange.bind(this)}
/>
<FieldFeedbacks for="firstname">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error2")}
</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="col-6">
<input name="lastname"
type="text"
className="form-control"
placeholder="Last Name"
placeholder={t("Contact-Last")}
value={this.state.lastname}
required onChange={this.onLastNameChange.bind(this)}
/>
<FieldFeedbacks for="lastname">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error2")}
</FieldFeedback>
</FieldFeedbacks>
</div>
</div>
@ -115,31 +125,34 @@ class ContactUs extends Component {
<input name="email"
type="email"
className="form-control"
placeholder="Email Address"
placeholder={t("Contact-Mail")}
aria-describedby="emailHelp"
value={this.state.email}
required onChange={this.onEmailChange.bind(this)}
/>
<FieldFeedbacks for="email">
<FieldFeedback when="*" />
<FieldFeedback when={value => value.length === 0}>{t("Contact-Error2")}</FieldFeedback>
<FieldFeedback when={value => !/\S+@\S+/.test(value)}>{t("Contact-Error3")}</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="form-group">
<textarea name="message"
className="form-control"
placeholder="Message"
placeholder={t("Contact-Message")}
rows="5"
value={this.state.message}
required onChange={this.onMessageChange.bind(this)}
/>
<FieldFeedbacks for="message">
<FieldFeedback when="*" />
<FieldFeedbacks for="agent">
<FieldFeedback when="*">
{t("Contact-Error1")}
</FieldFeedback>
</FieldFeedbacks>
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">
Submit
</button>
{t("Contact-Submit")}
</button>
</div>
</FormWithConstraints>
</div>
@ -203,12 +216,12 @@ class ContactUs extends Component {
}
alertSuccess(){
alertSuccess() {
this.setState({ alertBad: false, alertSucess: true })
}
alertBad(){
this.setState({ alertSucess: false, alertBad: true })
alertBad() {
this.setState({ alertSucess: false, alertBad: true })
}
resetForm() {
@ -217,4 +230,4 @@ class ContactUs extends Component {
}
export default ContactUs;
export default withTranslation()(ContactUs);

2
src/shared-components/footer-component/Footer.css
View file

@ -1,6 +1,8 @@
#footer{
text-align: center;
padding: 5% 7%;
background-color: white ;
}
.social-icon{