[FEAT]Add score frontend

README.md

@@ -2,3 +2,10 @@
 
 https://codeofaninja.com/2017/02/create-simple-rest-api-in-php.html
 
+https://vuejsdevelopers.com/2020/07/29/bootstrap-vue/
+
+
+to avoid:
+Error: ENOSPC: System limit for number of file watchers reached, watch '
+
+echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

api/objects/score.php

@@ -39,10 +39,9 @@ class Score
                 $score_item = array(
                     "id" => $row[1],
                     "name" => $row[2],
-                    "compositor" => $row[3],
+                    "compositor" => $row[3]
-                    "style" => $row[4]
                 );
-
+                // "style" => $row[4]
                 array_push($scores_arr["scores"], $score_item);
             }
         }

frontend/score/package-lock.json

@@ -2555,6 +2555,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5534,8 +5542,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
-      "dev": true
     },
     "for-in": {
       "version": "1.0.2",

frontend/score/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "bootstrap-vue": "^2.17.3",
     "core-js": "^3.6.5",
     "vue": "^2.6.11"

frontend/score/src/App.vue

@@ -1,28 +1,111 @@
 <template>
-  <div id="app">
+  <b-container>
-    <img alt="Vue logo" src="./assets/logo.png">
+    <div v-if="loading == true" class="text-center">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+      <b-spinner variant="primary" label="Chargement...."></b-spinner>
-  </div>
+    </div>
+    <div v-if="selected == 0">
+      <h1>Partitions</h1>
+      <br/>
+      <b-table selectable select-mode="single" striped hover 
+             :fields="fields" :items="items"
+             @row-selected="onRowSelected">
+      </b-table>
+    </div>
+    <div v-if="selected > 0">
+      <br/>
+      <b-button variant="info" @click="clickBack" >Retour</b-button>
+      <br/>
+      <br/>
+      <h4 class="text-center"> {{selectedItem.compositor}} - {{selectedItem.name}}</h4>
+      <br/>
+      <b-card-group deck v-for="(instrument) in selectedItem.instruments" :key="instrument.id">
+        <b-card :header="instrument.title">
+          <div v-for="(number) in instrument.number" :key="number.id" > 
+            <p>Partie: {{number.id}}</p>
+            <p> Page:</p>
+            <b-list-group>
+              <b-list-group-item v-for="(page) in number.pages" :key="page.name">
+                <b-container class="bv-example-row">
+                  <b-row>
+                    <b-col>{{page.name}}</b-col>
+                    <b-col></b-col>
+                    <b-col><b-button class="btn" style="width:100%" :href="page.uri" target="_blank"><b-icon icon="download"></b-icon></b-button></b-col>
+                  </b-row>
+                </b-container>
+              </b-list-group-item>
+            </b-list-group>
+          </div>
+          <br/>  
+        </b-card>
+      </b-card-group>
+      <br/>
+    </div>
+  </b-container>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import axios from "axios";
 
 export default {
-  name: 'App',
+  name: "App",
-  components: {
+  data() {
-    HelloWorld
+    return {
-  }
+      loading: true,
-}
+      selected: '0',
+      fields: [
+          { key: 'id', label: 'Numéro' },
+          { key: 'name', label: 'Nom' },
+          { key: 'compositor', label: 'Compositeur' },
+      ],
+      items: [],
+      selectedItem: {}
+    };
+  },
+  methods: {
+    async fetchList () {
+      try{
+        let response = await axios.get('http://ohmj2.free.fr/legacy/api/score/read.php')
+        this.items = response.data.scores;
+        this.loading = false
+      }catch(error) {
+        console.log(error);
+      }
+    },
+    async fetchScore (id) {
+      try{
+        let response = await axios.get('http://ohmj2.free.fr/legacy/api/score/read.php?id='+id)
+        this.selectedItem = response.data;
+        this.loading = false
+        console.log('item: ', this.selectedItem)
+      }catch(error) {
+        console.log(error);
+      }
+    },
+    async onRowSelected(items) {
+      this.loading = true
+      this.selected = items[0].id
+      window.scrollTo(0,0);
+      await this.fetchScore(this.selected)
+    },
+    clickBack(){
+      this.selected = 0;
+    }
+  },
+  async mounted() {
+    let uri = window.location.search.substring(1)
+    let params = new URLSearchParams(uri)
+    console.log(params.get("id"))
+    let id = params.get("id")
+    if (id === null) {
+    await this.fetchList()
+    } else {
+      this.selected = id
+      window.scrollTo(0,0);
+      await this.fetchScore(this.selected)
+    }
+  },
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

frontend/score/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

frontend/score/src/plugins/bootstrap-vue.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 
-import BootstrapVue from 'bootstrap-vue'
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'
 
 Vue.use(BootstrapVue)
+Vue.use(BootstrapVueIcons)

frontend/score/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: '/score/'
+}