creer page creerPartie

science-quest/src/components/jeux/creerPartie.vue

@@ -0,0 +1,102 @@
+<script>
+import { RouterLink } from 'vue-router'
+import { Partie } from '@/data/partie';
+import { ListeJeux } from '@/data/jeu';
+import { Thematiques } from '@/data/thematique';
+import { Difficultes } from '@/data/difficulte';
+
+export default {
+	data(){
+		return {
+			jeuxDispo:[],
+
+			afficherChoixThematiques:false,
+            thematiquesDispo:[],
+            choixThematiques:[],
+
+            afficherChoixDifficultes:false,
+            difficultesDispo:[],
+            choixDifficulte:-1,
+		}
+	},
+    methods:{
+        login(){
+        const partieACreer=new Partie(Object.fromEntries(new FormData(formajouter)))
+		partieACreer.thematiques=this.choixThematiques
+		partieACreer.creerPartie().then(response=>console.log(response))
+		//console.log(partieACreer)
+		return
+        utilisateur.login().then(response=>console.log(response))
+        }
+    },
+    watch:{
+        afficherChoixThematiques(to){
+            if(to && this.thematiquesDispo.length==0){
+                Thematiques.getPage(0,999).then(thematiques=>this.thematiquesDispo=thematiques._embedded)
+            }
+        },
+        afficherChoixDifficultes(to){
+            if(to && this.difficultesDispo.length==0){
+                Difficultes.getPage(0,999).then(difficultes=>this.difficultesDispo=difficultes._embedded)
+            }
+        }
+    },
+	mounted(){
+		ListeJeux.get().then(jeux=>this.jeuxDispo=Object.values(jeux))
+	}
+}
+
+</script>
+
+
+<template>
+    <form @submit.prevent id="formajouter">
+    <h1 class="h3 mb-3 fw-normal">Creer une partie</h1>
+
+    <div class="form-floating">
+    </div>
+    <div class="form-floating">
+        <select>
+            <option v-for="jeu in jeuxDispo" :value="jeu.id">
+                {{ jeu.nom }}
+            </option>
+        </select>
+    </div>
+	<div class="checkbox mb-3">
+                <label for="afficherChoixThematiquesCheckbox">Choisir une thématique </label>
+                <input type="checkbox" id="afficherChoixThematiquesCheckbox" v-model="afficherChoixThematiques"/>
+                <br/>
+                <select v-if="afficherChoixThematiques" v-model="choixThematiques" multiple>
+                    <option v-for="thematique in thematiquesDispo" :value="thematique.id">
+                        {{ thematique.libelle }}
+                    </option>
+                </select>
+            </div>
+            <div class="checkbox mb-3">
+                <label for="afficherChoixDifficultesCheckbox">Choisir une difficulté </label>
+                <input type="checkbox" id="afficherChoixDifficultesCheckbox" v-model="afficherChoixDifficultes"/>
+                <br/>
+                <select v-if="afficherChoixDifficultes" v-model="choixDifficulte" name="idDifficulte">
+                    <option v-for="difficulte in difficultesDispo" :value="difficulte.id">
+                        {{ difficulte.libelle }}
+                    </option>
+                </select>
+            </div>
+
+    <div class="checkbox mb-3">
+        <label>
+            <label for="rememberMe">Se souvenir de moi</label>
+            <input type="checkbox" value="1" id="rememberMe" name="rememberMe">
+        </label>
+    </div>
+    <button class="btn btn-lg btn-primary" @click="login">Se connecter</button>
+    </form>
+</template>
+
+<style>
+form {
+  display: flex;
+  flex-direction:column;
+  align-items: center;
+}
+</style>

science-quest/src/main.js

@@ -15,6 +15,7 @@ import TestParametreURL from "./components/TestParametreURL.vue"
 import Login from "./components/Login.vue"
 import KahootVue from './components/jeux/kahoot/Kahoot.vue'
 import KahootPartie from './components/jeux/kahoot/KahootPartie.vue'
+import CreerPartie from './components/jeux/creerPartie.vue'
 import Pendu from './components/jeux/pendu/Pendu.vue'
 import AdminGestionDonnees from "./components/admin/gestion/Liste.vue"
 import Inscription from './components/Inscription.vue'
@@ -25,6 +26,7 @@ const routes = [
     { path: '/inscription', component: Inscription },
     { path: '/kahoot', component: KahootVue}, //TODO: changer la route pour qu'elle soit trouvée automatiquement par le serveur (ce que demande l'utilisateur)
     { path: '/kahoot/partie/:code', component: KahootPartie},
+    { path: '/partie', component: CreerPartie},
     { path: '/pendu', component: Pendu },
     { path: '/exemple/:id', component: TestParametreURL },
     { path: '/admin/gestion', component: AdminGestionDonnees },