|
|
@ -2,14 +2,22 @@
|
|
|
|
<div id="area-designer">
|
|
|
|
<div id="area-designer">
|
|
|
|
<div class="card mt-2" v-for="(part,p) in partsData">
|
|
|
|
<div class="card mt-2" v-for="(part,p) in partsData">
|
|
|
|
<div class="card-header">
|
|
|
|
<div class="card-header">
|
|
|
|
Part {{p+1}}
|
|
|
|
Part {{ p + 1 }}
|
|
|
|
|
|
|
|
<span v-if="p !== 0" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,-1)">
|
|
|
|
|
|
|
|
<i class="ri-arrow-up-line"></i>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span v-if="p != partsData.length - 1" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,1)">
|
|
|
|
|
|
|
|
<i class="ri-arrow-down-line"></i>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="part-body">
|
|
|
|
<div class="part-body">
|
|
|
|
<div class="row">
|
|
|
|
<div class="row">
|
|
|
|
<template v-for="(valid,i) in valids">
|
|
|
|
<template v-for="(valid,i) in valids">
|
|
|
|
<div @click="changePart(p,valid.segment,valid.part)" :class="`col-md-3 `+(valid.data.name == part.part?'selected-part':'can-select')" >
|
|
|
|
<div @click="changePart(p,valid.segment,valid.part)"
|
|
|
|
<img class="img-fluid mt-2" :src="imageLink+'/'+valid.segment+'/'+valid.part" alt="screeshot">
|
|
|
|
:class="`col-md-3 `+(valid.data.name == part.part?'selected-part':'can-select')">
|
|
|
|
{{valid.part}} [v{{valid.data.version}}]
|
|
|
|
<img class="img-fluid mt-2" :src="imageLink+'/'+valid.segment+'/'+valid.part"
|
|
|
|
|
|
|
|
alt="screeshot">
|
|
|
|
|
|
|
|
{{ valid.part }} [v{{ valid.data.version }}]
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -36,24 +44,24 @@ export default {
|
|
|
|
components: {},
|
|
|
|
components: {},
|
|
|
|
data: () => {
|
|
|
|
data: () => {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
partsData:[],
|
|
|
|
partsData: [],
|
|
|
|
removed:[],
|
|
|
|
removed: [],
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
valids:{
|
|
|
|
valids: {
|
|
|
|
default:[],
|
|
|
|
default: [],
|
|
|
|
type: Array,
|
|
|
|
type: Array,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
parts:{
|
|
|
|
parts: {
|
|
|
|
default:[],
|
|
|
|
default: [],
|
|
|
|
type: Array,
|
|
|
|
type: Array,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
area:{
|
|
|
|
area: {
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
type: Object,
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
imageLink:{
|
|
|
|
imageLink: {
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -62,25 +70,45 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {},
|
|
|
|
computed: {},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
changePart(p,segment,part){
|
|
|
|
changePart(p, segment, part) {
|
|
|
|
this.partsData[p].segment = segment;
|
|
|
|
this.partsData[p].segment = segment;
|
|
|
|
this.partsData[p].part = part;
|
|
|
|
this.partsData[p].part = part;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
addPart(){
|
|
|
|
addPart() {
|
|
|
|
this.partsData.push({
|
|
|
|
this.partsData.push({
|
|
|
|
id: null,
|
|
|
|
id: null,
|
|
|
|
segment: this.valids[0].segment,
|
|
|
|
segment: this.valids[0].segment,
|
|
|
|
part: this.valids[0].part,
|
|
|
|
part: this.valids[0].part,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
rem(i){
|
|
|
|
rem(i) {
|
|
|
|
if (!confirm('Are sure to remove?')){
|
|
|
|
if (!confirm('Are sure to remove?')) {
|
|
|
|
return ;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.removed.push(this.partsData[i].id);
|
|
|
|
this.removed.push(this.partsData[i].id);
|
|
|
|
this.partsData.splice(i,1);
|
|
|
|
this.partsData.splice(i, 1);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
shiftArray(index, offset) {
|
|
|
|
|
|
|
|
console.log(index,offset);
|
|
|
|
|
|
|
|
if (index < 0 || index >= this.partsData.length) {
|
|
|
|
|
|
|
|
return "Index out of bounds";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const removed = this.partsData.splice(index, 1)[0];
|
|
|
|
|
|
|
|
const newIndex = index + offset;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (newIndex < 0) {
|
|
|
|
|
|
|
|
this.partsData.unshift(removed);
|
|
|
|
|
|
|
|
} else if (newIndex >= this.partsData.length) {
|
|
|
|
|
|
|
|
this.partsData.push(removed);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.partsData.splice(newIndex, 0, removed);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
@ -88,10 +116,12 @@ export default {
|
|
|
|
#area-designer {
|
|
|
|
#area-designer {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.selected-part{
|
|
|
|
|
|
|
|
|
|
|
|
.selected-part {
|
|
|
|
background: #32CD3233;
|
|
|
|
background: #32CD3233;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.can-select{
|
|
|
|
|
|
|
|
|
|
|
|
.can-select {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|