-
-
@@ -17,6 +12,6 @@ import Navbar from "./components/navbar/Navbar.vue";
min-height: 100vh;
display: grid;
- grid-template-rows: auto 1fr;
+ grid-template-rows: 1fr;
}
diff --git a/src/assets/main.css b/src/assets/main.css
index b1efe19..3b5aefa 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -5,5 +5,23 @@
@tailwind utilities;
body {
- @apply text-slate-300 bg-slate-950
+ @apply text-slate-100 bg-slate-950
}
+
+@layer components {
+ .btn-red {
+ @apply bg-red-600 outline-red-700 hover:bg-red-700
+ }
+ .btn-twitter {
+ @apply bg-twitter-500 outline-twitter-600 hover:bg-twitter-600
+ }
+ .btn-facebook {
+ @apply bg-facebook-500 outline-facebook-600 hover:bg-facebook-600
+ }
+ .btn-instagram {
+ @apply bg-instagram-500 outline-instagram-600 hover:bg-instagram-600
+ }
+ .btn-linkedin {
+ @apply bg-linkedin-500 outline-linkedin-600 hover:bg-linkedin-600
+ }
+}
\ No newline at end of file
diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocRequest.vue
new file mode 100644
index 0000000..5afb95c
--- /dev/null
+++ b/src/components/GeolocRequest.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Qui me représente à l'Assemblée Nationale ?
+
+
+
+
+ Géolocalisation
+
+
+ {{ lastError }}
+
+
+
diff --git a/src/components/RepButton.vue b/src/components/RepButton.vue
new file mode 100644
index 0000000..ddd7e52
--- /dev/null
+++ b/src/components/RepButton.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
new file mode 100644
index 0000000..12d743f
--- /dev/null
+++ b/src/components/RepInfo.vue
@@ -0,0 +1,164 @@
+
+
+
+
+
+
+
+ {{ rep.acteur.profession.libelleCourant }}
+
+
+
+
+
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index e70d581..d07706a 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
diff --git a/src/main.ts b/src/main.ts
index bc8a836..4d9779f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,9 +6,36 @@ import router from "./router";
import "./assets/main.css";
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+ faTwitter,
+ faFacebook,
+ faLinkedin,
+ faInstagram,
+} from "@fortawesome/free-brands-svg-icons";
+import {
+ faLandmark,
+ faLocationDot,
+ faSpinner,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(
+ faTwitter,
+ faFacebook,
+ faLinkedin,
+ faInstagram,
+ faLandmark,
+ faLocationDot,
+ faSpinner
+);
+
const app = createApp(App);
app.use(createPinia());
app.use(router);
+app.component("font-awesome-icon", FontAwesomeIcon);
+
app.mount("#app");
diff --git a/src/models/rep.ts b/src/models/rep.ts
new file mode 100644
index 0000000..1984c48
--- /dev/null
+++ b/src/models/rep.ts
@@ -0,0 +1,146 @@
+export interface Depute {
+ acteur: Acteur;
+}
+
+export interface Acteur {
+ "@xmlns:xsi": string;
+ uid: Uid;
+ etatCivil: EtatCivil;
+ profession: Profession;
+ uri_hatvp: string;
+ adresses: Adresses;
+ mandats: Mandats;
+}
+
+export interface Adresses {
+ adresse: { [key: string]: null | string }[];
+}
+
+export interface EtatCivil {
+ ident: Ident;
+ infoNaissance: InfoNaissance;
+ dateDeces: null;
+}
+
+export interface Ident {
+ civ: string;
+ prenom: string;
+ nom: string;
+ alpha: string;
+ trigramme: string;
+}
+
+export interface InfoNaissance {
+ dateNais: Date;
+ villeNais: string;
+ depNais: string;
+ paysNais: string;
+}
+
+export interface Mandats {
+ mandat: Mandat[];
+}
+
+export interface Mandat {
+ "@xsi:type": XsiType;
+ uid: string;
+ acteurRef: Text;
+ legislature: null | string;
+ typeOrgane: string;
+ dateDebut: Date;
+ datePublication: Date | null;
+ dateFin: Date | null;
+ preseance: string;
+ nominPrincipale: string;
+ infosQualite: InfosQualite;
+ organes: Organes;
+ suppleants?: Suppleants | null;
+ libelle?: null;
+ missionSuivanteRef?: null;
+ missionPrecedenteRef?: null;
+ chambre?: null;
+ election?: Election;
+ mandature?: Mandature;
+ collaborateurs?: Collaborateurs;
+}
+
+export enum XsiType {
+ MandatAvecSuppleantType = "MandatAvecSuppleant_Type",
+ MandatMissionType = "MandatMission_Type",
+ MandatParlementaireType = "MandatParlementaire_type",
+ MandatSimpleType = "MandatSimple_Type",
+}
+
+export enum Text {
+ Pa794094 = "PA794094",
+}
+
+export interface Collaborateurs {
+ collaborateur: Collaborateur[];
+}
+
+export interface Collaborateur {
+ qualite: string;
+ prenom: string;
+ nom: string;
+ dateDebut: null;
+ dateFin: null;
+}
+
+export interface Election {
+ lieu: Lieu;
+ causeMandat: string;
+ refCirconscription: string;
+}
+
+export interface Lieu {
+ region: string;
+ regionType: string;
+ departement: string;
+ numDepartement: string;
+ numCirco: string;
+}
+
+export interface InfosQualite {
+ codeQualite: string;
+ libQualite: string;
+ libQualiteSex: string;
+}
+
+export interface Mandature {
+ datePriseFonction: Date;
+ causeFin: null;
+ premiereElection: string;
+ placeHemicycle: string;
+ matriculeVote: string;
+ mandatRemplaceRef: null;
+}
+
+export interface Organes {
+ organeRef: string;
+}
+
+export interface Suppleants {
+ suppleant: Suppleant;
+}
+
+export interface Suppleant {
+ dateDebut: Date;
+ dateFin: null;
+ suppleantRef: string;
+}
+
+export interface Profession {
+ libelleCourant: string;
+ socProcINSEE: SocProcINSEE;
+}
+
+export interface SocProcINSEE {
+ catSocPro: string;
+ famSocPro: string;
+}
+
+export interface Uid {
+ "@xsi:type": string;
+ "#text": Text;
+}
diff --git a/src/stores/repStore.ts b/src/stores/repStore.ts
index f24c12d..d56dda8 100644
--- a/src/stores/repStore.ts
+++ b/src/stores/repStore.ts
@@ -1,11 +1,25 @@
+import type { Depute } from "@/models/rep";
import { defineStore } from "pinia";
+import { ref } from "vue";
-export const useCirStore = defineStore("repStore", () => {
- async function getRep(lon: number, lat: number): Promise
{
- return fetch(`http://localhost:3000/rep?lat=${lat}&lon=${lon}`).then((t) =>
- t.json()
- );
+const apiUrl = import.meta.env.VITE_API_URL;
+
+export const useRepStore = defineStore("repStore", () => {
+ const currentRep = ref(null);
+
+ async function getRep(lon: number, lat: number): Promise {
+ return fetch(`${apiUrl}/rep?lat=${lat}&lon=${lon}`).then(async (res) => {
+ if (res.ok) {
+ return res.json();
+ } else {
+ throw res.json().then((res) => new Error(res.message));
+ }
+ });
}
- return { getRep };
+ function setRep(rep: Depute) {
+ currentRep.value = rep;
+ }
+
+ return { getRep, setRep, currentRep };
});
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ceb268c..c3deb7c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,33 +1,42 @@
-
-
- {{ currentRepValue }}
-
+
+
+
+
+
+
+
+
diff --git a/tailwind.config.js b/tailwind.config.js
index fa9f9d4..6e97112 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,66 @@ module.exports = {
padding: "2rem",
center: true,
},
+ extend: {
+ colors: {
+ twitter: {
+ DEFAULT: "#1DA1F2",
+ 50: "#CBE9FC",
+ 100: "#B7E1FB",
+ 200: "#91D1F9",
+ 300: "#6AC1F6",
+ 400: "#44B1F4",
+ 500: "#1DA1F2",
+ 600: "#0C82CB",
+ 700: "#096096",
+ 800: "#063E61",
+ 900: "#031C2C",
+ 950: "#010B12",
+ },
+ facebook: {
+ DEFAULT: "#4267B2",
+ 50: "#C3CFE9",
+ 100: "#B4C4E3",
+ 200: "#96ACD8",
+ 300: "#7894CD",
+ 400: "#5B7DC2",
+ 500: "#4267B2",
+ 600: "#334F89",
+ 700: "#243860",
+ 800: "#142037",
+ 900: "#05080E",
+ 950: "#000000",
+ },
+ instagram: {
+ DEFAULT: "#C13584",
+ 50: "#EEC0DA",
+ 100: "#E9B0D0",
+ 200: "#E090BD",
+ 300: "#D870AA",
+ 400: "#CF5098",
+ 500: "#C13584",
+ 600: "#952966",
+ 700: "#691D48",
+ 800: "#3D112A",
+ 900: "#11050C",
+ 950: "#000000",
+ },
+ linkedin: {
+ DEFAULT: "#0072B1",
+ 50: "#6ACAFF",
+ 100: "#55C3FF",
+ 200: "#2CB4FF",
+ 300: "#04A6FF",
+ 400: "#008CDA",
+ 500: "#0072B1",
+ 600: "#004E79",
+ 700: "#002A41",
+ 800: "#000609",
+ 900: "#000000",
+ 950: "#000000",
+ },
+ },
+ },
},
plugins: [],
};