Weko
/
ceiba-scores
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit 😇

This commit is contained in:
Simon 2022-03-29 23:30:23 +02:00
commit 0fd5a49574
22 changed files with 5355 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.eslintrc.cjs Normal file
View File

@ -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,
},
};

31
.gitignore vendored Normal file
View File

@ -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

3
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
}

35
README.md Normal file
View File

@ -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
```

13
index.html Normal file
View File

@ -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>

4696
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View File

@ -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"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

45
scripts/fetchData.js Normal file
View File

@ -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();

11
src/App.vue Normal file
View File

@ -0,0 +1,11 @@
<script setup>
import { RouterView } from "vue-router";
</script>
<template>
<RouterView />
</template>
<style>
@import "@/assets/base.css";
</style>

20
src/api.js Normal file
View File

@ -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();
}

51
src/assets/base.css Normal file
View File

@ -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;
}

1
src/assets/logo.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

217
src/components/Score.vue Normal file
View File

@ -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>

65
src/components/ScoreHeader.vue Normal file
View File

@ -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>

45
src/components/ScoresList.vue Normal file
View File

@ -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>

15
src/main.js Normal file
View File

@ -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");

21
src/router.js Normal file
View File

@ -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;

11
src/stores.js Normal file
View File

@ -0,0 +1,11 @@
import { defineStore } from "pinia";
export const useStore = defineStore({
id: "counter",
state: () => ({
language: "fr-FR",
}),
persist: {
enabled: true,
},
});

9
src/views/HomeView.vue Normal file
View File

@ -0,0 +1,9 @@
<script setup>
import ScoresList from "@/components/ScoresList.vue";
</script>
<template>
<main>
<ScoresList />
</main>
</template>

7
src/views/ScoreView.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup>
import Score from "@/components/Score.vue";
</script>
<template>
<Score :id="$route.params.id" />
</template>

14
vite.config.js Normal file
View File

@ -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)),
},
},
});