test route

.idea/vcs.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
 </project>

index.html

@@ -13,18 +13,18 @@
 		<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
 
 		<script type="riot" src="./onzer.riot"></script>
-	<script type="javascript" src="./onzer.riot"></script>
 
 		<script type="text/javascript">
-		function fetch_data(){
+			async function fetch_data() {
 				return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
 					return response.json();
-			} )
+				});
 			}
 
-		riot.compile().then(() => {
+			riot.compile().then(async () => {
-			riot.mount('onzer', {items: fetch_data()});
+				const data = await fetch_data();
-		})
+				riot.mount('onzer', { items: data });
+			});
 		</script>
 
 	</body>

onzer.riot

@@ -11,9 +11,9 @@
 
         <form onsubmit={add}>
             <div class="flex flex-row items-baseline">
-                <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-20 pl-6 grow"
+                <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 h-20 pl-6 grow"
                        placeholder={state.placeholder} onkeyup={edit} />
-                <input type="button" value="Playlists"
+                <input type="button" value="Playlists" onclick={navigateToPlaylists}
                        class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" />
             </div>
         </form>
@@ -27,78 +27,78 @@
 
     <script>
         export default {
-            async onBeforeMount(props){
+            state: {
-                let data =  await props.items;
-                this.state = {
                 placeholder: "Rechercher dans les albums",
-                    items: data.results,
+                items: [],
                 search: "albums",
                 filter: undefined,
                 id: undefined
-                };
+            },
-                this.paintButton();
+            onBeforeMount(props) {
-                this.album_style = "isActivate";
+                this.loadData(props.items);
-                this.update();
+            },
+            async loadData(items) {
+                const data = await items;
+                this.update({
+                    state: {
+                        ...this.state,
+                        items: data.results
+                    },
+                    album_style: "isActivate",
+                    artist_style: "isDeactivate",
+                    song_style: "isDeactivate"
+                });
             },
             edit(e) {
-                this.state.filter = e.target.value;
+                this.update({
-                console.log(this.state.filter);
+                    state: {
+                        ...this.state,
+                        filter: e.target.value
+                    }
+                });
                 this.fetchData();
-                this.update();
             },
             click(e) {
                 e.preventDefault();
-		        this.paintButton();
+                const newState = {
-		        switch(e.target.value){
+                    ...this.state,
-			        case "Albums":
+                    placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
-				        this.state.placeholder = "Rechercher dans les albums";
+                    search: e.target.value.toLowerCase(),
-                        this.album_style = "isActivate";
+                    filter: undefined
-                        this.state.search = "albums";
+                };
-                        break;
+                this.update({
-                    case "Artists":
+                    state: newState,
-                        this.state.placeholder = "Rechercher dans les artists";
+                    album_style: e.target.value === "Albums" ? "isActivate" : "isDeactivate",
-                        this.artist_style = "isActivate";
+                    artist_style: e.target.value === "Artists" ? "isActivate" : "isDeactivate",
-                        this.state.search = "artists";
+                    song_style: e.target.value === "Songs" ? "isActivate" : "isDeactivate"
-                        break;
+                });
-                    default:
+                this.fetchData();
-                        this.state.placeholder = "Rechercher dans les songs";
-                        this.song_style = "isActivate";
-                        this.state.search = "songs";
-		        }
-                this.fetchData()
-                this.update();
             },
             async fetchData() {
-                let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
+                const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
                 this.update({
+                    state: {
+                        ...this.state,
                         items: data.results
+                    }
                 });
             },
-            paintButton(){
-                this.album_style = "isDeactivate";
-                this.artist_style = "isDeactivate";
-                this.song_style = "isDeactivate";
-            },
             execQuery(table, filter = undefined, id = undefined) {
-                console.log("CCACA");
+                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
-                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
                 let computeHttpRequest;
                 if (filter !== undefined) {
-                    switch(table){
+                    computeHttpRequest = table === "songs" ?
-                        case "songs":
+                        `${baseHttpRequest}${table}?title=${filter}` :
-                            computeHttpRequest = baseHttpRequest+table+"?title="+filter;
+                        `${baseHttpRequest}${table}?name=${filter}`;
-                            break;
-                        default :
-                            computeHttpRequest = baseHttpRequest+table+"?name="+filter;
-                    }
                 } else if (id !== undefined) {
-                    computeHttpRequest = baseHttpRequest+table+"/"+id;
+                    computeHttpRequest = `${baseHttpRequest}${table}/${id}`;
                 } else {
-                    computeHttpRequest = baseHttpRequest+table;
+                    computeHttpRequest = `${baseHttpRequest}${table}`;
                 }
-                return fetch(computeHttpRequest).then(response => {
+                return fetch(computeHttpRequest).then(response => response.json());
-                    return response.json();
+            },
-                });
+            navigateToPlaylists() {
+                route('/playlists');
             }
         }
     </script>