[FEAT]Add score frontend
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -39,10 +39,9 @@ class Score
|
||||
$score_item = array(
|
||||
"id" => $row[1],
|
||||
"name" => $row[2],
|
||||
"compositor" => $row[3],
|
||||
"style" => $row[4]
|
||||
"compositor" => $row[3]
|
||||
);
|
||||
|
||||
// "style" => $row[4]
|
||||
array_push($scores_arr["scores"], $score_item);
|
||||
}
|
||||
}
|
||||
|
||||
11
frontend/score/package-lock.json
generated
11
frontend/score/package-lock.json
generated
@@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -1,28 +1,111 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<b-container>
|
||||
<div v-if="loading == true" class="text-center">
|
||||
<b-spinner variant="primary" label="Chargement...."></b-spinner>
|
||||
</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',
|
||||
components: {
|
||||
HelloWorld
|
||||
name: "App",
|
||||
data() {
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
4
frontend/score/src/plugins/bootstrap-vue.js
vendored
4
frontend/score/src/plugins/bootstrap-vue.js
vendored
@@ -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)
|
||||
3
frontend/score/vue.config.js
Normal file
3
frontend/score/vue.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
publicPath: '/score/'
|
||||
}
|
||||
Reference in New Issue
Block a user