first commit 😇
This commit is contained in:
commit
0fd5a49574
|
|
@ -0,0 +1,14 @@
|
|||
/* eslint-env node */
|
||||
require("@rushstack/eslint-patch/modern-module-resolution");
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/eslint-config-prettier",
|
||||
],
|
||||
env: {
|
||||
"vue/setup-compiler-macros": true,
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# app
|
||||
src/data.json
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# Ceiba Score App
|
||||
|
||||
Vous trouverez ici le code source de l'application de Score de Ceiba Conseil.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ceiba Scores App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "scores.ceiba-conseil.com",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"fetchData": "node --experimental-fetch --no-warnings scripts/fetchData.js",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --port 5050",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@splidejs/vue-splide": "^0.5.18",
|
||||
"pinia": "^2.0.11",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"sass": "^1.49.9",
|
||||
"sass-loader": "^12.6.0",
|
||||
"swiper": "^8.0.7",
|
||||
"vue": "^3.2.31",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.1.0",
|
||||
"@vitejs/plugin-vue": "^2.2.2",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"eslint": "^8.5.0",
|
||||
"eslint-plugin-vue": "^8.2.0",
|
||||
"prettier": "^2.5.1",
|
||||
"vite": "^2.8.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,45 @@
|
|||
import fs from "fs/promises";
|
||||
|
||||
const apiUrl = "https://admin.ceiba-conseil.com";
|
||||
|
||||
async function fetchJSONApi(path) {
|
||||
const url = `${apiUrl}${path}`;
|
||||
const options = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
},
|
||||
};
|
||||
console.log(`fetchJSONApi: ${url}`);
|
||||
const response = await fetch(url, options);
|
||||
|
||||
if (!response.ok) {
|
||||
const errors = await response.json();
|
||||
throw errors.errors[0].message;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
const fields = [
|
||||
"*",
|
||||
"translations.*",
|
||||
"questions.sort",
|
||||
"questions.questions_id.*",
|
||||
"questions.questions_id.translations.*",
|
||||
"questions.questions_id.answers.*",
|
||||
"questions.questions_id.answers.answers_id.*",
|
||||
"questions.questions_id.answers.answers_id.translations.*",
|
||||
"results.*",
|
||||
"results.results_id.*",
|
||||
"results.results_id.translations.*",
|
||||
];
|
||||
const url = `/items/scores?${fields
|
||||
.map((item) => `fields[]=${item}`)
|
||||
.join("&")}`;
|
||||
const data = await fetchJSONApi(url);
|
||||
await fs.writeFile("./src/data.json", JSON.stringify(data.data), "utf8");
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup>
|
||||
import { RouterView } from "vue-router";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import "@/assets/base.css";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
const apiUrl = "https://admin.ceiba-conseil.com";
|
||||
|
||||
export async function fetchJSONApi(path) {
|
||||
const url = `${apiUrl}${path}`;
|
||||
const options = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
},
|
||||
};
|
||||
console.log(`fetchJSONApi: ${url}`);
|
||||
const response = await fetch(url, options);
|
||||
|
||||
if (!response.ok) {
|
||||
const errors = await response.json();
|
||||
throw errors.errors[0].message;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--color-white: #ffffff;
|
||||
--color-black: #181818;
|
||||
|
||||
--header-size-small: 64px;
|
||||
--header-size-big: 128px;
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: #EDE0D4;
|
||||
--color-text: var(--color-black);
|
||||
--header-size: var(--header-size-small);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--color-black);
|
||||
--color-text: var(--color-white);
|
||||
}
|
||||
} */
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--header-size: var(--header-size-big);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
line-height: 1.6;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 16px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 308 B |
|
|
@ -0,0 +1,217 @@
|
|||
<script setup>
|
||||
import data from "@/data.json";
|
||||
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
import { useStore } from "@/stores";
|
||||
|
||||
import { Splide, SplideSlide } from "@splidejs/vue-splide";
|
||||
import "@splidejs/splide/dist/css/splide.min.css";
|
||||
import ScoreHeader from "./ScoreHeader.vue";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const score = data.find((score) => score.id == props.id);
|
||||
const slides = ref();
|
||||
|
||||
const store = useStore();
|
||||
const language = store.language;
|
||||
|
||||
function formatAnswers(answers) {
|
||||
return answers
|
||||
.map((answer) => answer.answers_id)
|
||||
.map((answer) => {
|
||||
const translation = answer.translations.filter(
|
||||
(item) => item.languages_code == language
|
||||
);
|
||||
return {
|
||||
id: answer.id,
|
||||
title: translation.length > 0 ? translation[0].title : "",
|
||||
weight: answer.weight,
|
||||
};
|
||||
})
|
||||
.filter((answer) => answer.title);
|
||||
}
|
||||
|
||||
function formatScore(score) {
|
||||
return score.questions
|
||||
.map((question) => question.questions_id)
|
||||
.map((question) => {
|
||||
const translation = question.translations.filter(
|
||||
(item) => item.languages_code == language
|
||||
);
|
||||
return {
|
||||
id: question.id,
|
||||
value: null,
|
||||
title: translation.length > 0 ? translation[0].title : "",
|
||||
answers: formatAnswers(question.answers),
|
||||
};
|
||||
})
|
||||
.filter((question) => question.title);
|
||||
}
|
||||
|
||||
const title = score ? score.title : "";
|
||||
const questions = ref(formatScore(score));
|
||||
function nextQuestion() {
|
||||
setTimeout(() => slides.value.go(">"), 100);
|
||||
}
|
||||
const scoreSum = computed(() => {
|
||||
return questions.value
|
||||
.map((question) => question.value)
|
||||
.reduce((value, currentValue) => value + currentValue, 0);
|
||||
});
|
||||
const displayScoreResult = computed(
|
||||
() => !questions.value.filter((q) => q.value == null).length
|
||||
);
|
||||
function getResultsFromScore(score) {
|
||||
return score.results
|
||||
.map((result) => result.results_id)
|
||||
.map((result) => {
|
||||
const translation = result.translations.filter(
|
||||
(item) => item.languages_code == language
|
||||
);
|
||||
return {
|
||||
id: result.id,
|
||||
max: result.max,
|
||||
min: result.min,
|
||||
pde_qtra: result.pde_qtra,
|
||||
effets: translation.length > 0 ? translation[0].effets : "",
|
||||
facteur: translation.length > 0 ? translation[0].facteur : "",
|
||||
pde: translation.length > 0 ? translation[0].pde : "",
|
||||
};
|
||||
});
|
||||
}
|
||||
const results = ref(getResultsFromScore(score));
|
||||
const result = computed(() =>
|
||||
displayScoreResult.value
|
||||
? results.value
|
||||
.filter((r) => r.min <= scoreSum.value)
|
||||
.filter((r) => !r.max || r.max >= scoreSum.value)[0]
|
||||
: null
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScoreHeader v-if="title" :title="title" />
|
||||
<Splide
|
||||
ref="slides"
|
||||
v-if="questions"
|
||||
:options="{
|
||||
pagination: false,
|
||||
speed: 700,
|
||||
height: '100vh - var(--header-size)',
|
||||
arrows: false,
|
||||
direction: 'ttb',
|
||||
wheel: true,
|
||||
releaseWheel: true,
|
||||
}"
|
||||
>
|
||||
<SplideSlide v-for="question in questions" :key="question.id">
|
||||
<legend>{{ question.title }}</legend>
|
||||
<template v-if="question.answers">
|
||||
<div class="choice" v-for="answer in question.answers" :key="answer.id">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
:name="`question_${question.id}`"
|
||||
:value="answer.weight"
|
||||
@change="
|
||||
(event) => (question.value = parseFloat(event.target.value))
|
||||
"
|
||||
@click="nextQuestion"
|
||||
/>
|
||||
{{ answer.title }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</SplideSlide>
|
||||
<SplideSlide>
|
||||
<template v-if="displayScoreResult && result">
|
||||
<ul>
|
||||
<li>score : {{ scoreSum }}</li>
|
||||
<li>pde : {{ result.pde }}</li>
|
||||
<li>pde_qtra : {{ result.pde_qtra }}</li>
|
||||
<li>effets : {{ result.effets }}</li>
|
||||
<li>facteur : {{ result.facteur }}</li>
|
||||
</ul>
|
||||
<div class="gradient">
|
||||
<div
|
||||
v-for="(item, index) in [...Array(7).keys()]"
|
||||
:class="{ active: result && result.pde_qtra === index + 1 }"
|
||||
:key="item"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
Vous n'avez pas répondu à toutes les questions.
|
||||
</template>
|
||||
</SplideSlide>
|
||||
</Splide>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.splide
|
||||
position: fixed
|
||||
top: var(--header-size)
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: transparent
|
||||
|
||||
.splide__slide
|
||||
background: transparent
|
||||
position: relative
|
||||
padding: 1rem
|
||||
|
||||
.splide__track
|
||||
overflow: visible!important
|
||||
|
||||
legend
|
||||
font-size: 1.1rem
|
||||
font-weight: bold
|
||||
|
||||
label
|
||||
display: inline-block
|
||||
width: 100%
|
||||
padding: .3rem
|
||||
|
||||
.gradient
|
||||
width: calc(100% - 2rem)
|
||||
padding: 0 1rem
|
||||
height: 3rem
|
||||
background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
|
||||
display: flex
|
||||
margin: 2.5rem 0
|
||||
align-items: center
|
||||
border-radius: 3px
|
||||
position: absolute
|
||||
bottom: 0
|
||||
|
||||
div
|
||||
width: calc(100%/7)
|
||||
text-align: center
|
||||
align-self: center
|
||||
|
||||
.active
|
||||
border: 1px solid black
|
||||
border-radius: 3px
|
||||
height: 200%
|
||||
font-weight: bold
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
&::before
|
||||
content: "PdE\AQTRA"
|
||||
position: absolute
|
||||
font-size: .5rem
|
||||
top: 0
|
||||
line-height: .7rem
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<p>⇠</p>
|
||||
</router-link>
|
||||
<h1>{{ title }}</h1>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
height: var(--header-size);
|
||||
position: fixed;
|
||||
background: #ede0d4;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
border-bottom: 1px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
width: var(--header-size);
|
||||
min-width: var(--header-size);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-right: 1px solid black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
font-size: 2rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 1rem;
|
||||
line-height: 0.9;
|
||||
flex: 1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
p {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<script setup>
|
||||
import data from "@/data.json";
|
||||
import { useStore } from "@/stores";
|
||||
|
||||
const store = useStore();
|
||||
const language = store.language;
|
||||
|
||||
const translationKey = "languages_id";
|
||||
const scores = data.filter((score) => {
|
||||
return (
|
||||
!!score.translations.find(
|
||||
(translation) => translation[translationKey] == language
|
||||
) &&
|
||||
score.results.length &&
|
||||
score.questions.length
|
||||
);
|
||||
});
|
||||
function getTranslation(translations, key) {
|
||||
return translations.find((translation) => translation[key] == language);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Ceiba Scores App</h1>
|
||||
<template v-if="scores">
|
||||
<ul>
|
||||
<li v-for="score in scores" :key="score.id">
|
||||
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
||||
getTranslation(score.translations, "languages_id").title
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
h1
|
||||
background: var(--color-background)
|
||||
text-align: center
|
||||
margin: 1rem
|
||||
padding: 0
|
||||
ul
|
||||
margin: 1rem
|
||||
padding: 0 0 0 1rem
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import piniaPersist from "pinia-plugin-persist";
|
||||
|
||||
import App from "@/App.vue";
|
||||
import router from "@/router";
|
||||
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPersist);
|
||||
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
|
||||
app.mount("#app");
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "@/views/HomeView.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: "/scores/:id",
|
||||
name: "score",
|
||||
props: true,
|
||||
component: () => import("./views/ScoreView.vue"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
export const useStore = defineStore({
|
||||
id: "counter",
|
||||
state: () => ({
|
||||
language: "fr-FR",
|
||||
}),
|
||||
persist: {
|
||||
enabled: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup>
|
||||
import ScoresList from "@/components/ScoresList.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<ScoresList />
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script setup>
|
||||
import Score from "@/components/Score.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Score :id="$route.params.id" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { fileURLToPath, URL } from "url";
|
||||
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue