-
Notifications
You must be signed in to change notification settings - Fork 627
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add the Config.vue for Images * Add the CharPage.vue and Image.vue * Hook up the config to the image.vue so that the image height and width can update
- Loading branch information
Showing
6 changed files
with
446 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
<template> | ||
<div class="visual-dl-chart-page"> | ||
<!--<ui-expand-panel isShow="{{expand}}" info="{{total}}" title="{{title}}">--> | ||
<ui-image | ||
class="visual-dl-chart-image" | ||
v-for="tagInfo in filteredPageList" | ||
:tagInfo="tagInfo" | ||
:isActualImageSize="config.isActualImageSize" | ||
:runs="config.runs" | ||
:running="config.running" | ||
:runsItems="runsItems" | ||
></ui-image> | ||
|
||
<v-pagination v-if="total > pageSize" | ||
v-model="currentPage" | ||
:length="total" | ||
:total-visible="pageSize" | ||
></v-pagination> | ||
<!--</ui-expand-panel>--> | ||
</div> | ||
</template> | ||
<script> | ||
//import ExpandPanel from '../../common/component/ExpandPanel'; | ||
import Image from './Image'; | ||
//import Pagination from 'san-mui/Pagination'; | ||
import {cloneDeep, flatten} from 'lodash'; | ||
export default { | ||
props: ['config', 'runsItems', 'tagList', 'title'], | ||
components: { | ||
'ui-image': Image, | ||
//'ui-expand-panel': ExpandPanel, | ||
//'ui-pagination': Pagination | ||
}, | ||
computed: { | ||
filteredRunsList() { | ||
let tagList = this.tagList || []; | ||
let runs = this.config.runs || []; | ||
let list = cloneDeep(tagList); | ||
return flatten(list.slice().map(item => { | ||
return item.tagList.filter(one => runs.includes(one.run)); | ||
})); | ||
}, | ||
filteredPageList() { | ||
let list = this.filteredRunsList || []; | ||
let currentPage = this.currentPage; | ||
let pageSize = this.pageSize; | ||
return list.slice((currentPage - 1) * pageSize, currentPage * pageSize); | ||
}, | ||
total() { | ||
let list = this.tagList || []; | ||
return list.length; | ||
} | ||
}, | ||
data() { | ||
return { | ||
// current page | ||
currentPage: 1, | ||
// item per page | ||
pageSize: 8 | ||
}; | ||
}, | ||
}; | ||
</script> | ||
<style lang="stylus"> | ||
@import '../../style/variables'; | ||
+prefix-classes('visual-dl-') | ||
.chart-page | ||
.image-chart-box | ||
overflow hidden | ||
float left | ||
.visual-dl-chart-image | ||
float left | ||
.image-chart-box:after | ||
content "" | ||
clear both | ||
display block | ||
.sm-pagination | ||
height 50px | ||
float left | ||
width 100% | ||
</style> | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
<template> | ||
<div class="visual-dl-image-config-com"> | ||
<v-text-field | ||
label="Group name RegExp" | ||
hint="input a tag group name to search" | ||
v-model="config.groupNameReg" | ||
dark | ||
></v-text-field> | ||
|
||
<v-checkbox label="Show actual image size" v-model="config.isActualImageSize" dark></v-checkbox> | ||
|
||
<label class="label">Runs</label> | ||
<v-checkbox v-for="item in runsItems" | ||
:key="item.name" | ||
:label="item.name" | ||
:value="item.value" | ||
v-model="config.runs" | ||
dark | ||
></v-checkbox> | ||
|
||
<v-btn :color="config.running ? 'primary' : 'error'" | ||
v-model="config.running" | ||
@click="toggleAllRuns" | ||
dark | ||
> | ||
{{config.running ? 'Running' : 'Stopped'}} | ||
</v-btn> | ||
</div> | ||
</template> | ||
<script> | ||
// TODO: Maybe migrate the CheckBoxGroup from San to Vue | ||
//import CheckBoxGroup from '../../common/component/CheckBoxGroup'; | ||
export default { | ||
props: { | ||
runsItems: Array, | ||
config: Object | ||
}, | ||
data() { | ||
return { | ||
}; | ||
}, | ||
methods: { | ||
toggleAllRuns() { | ||
this.config.running = !this.config.running; | ||
} | ||
} | ||
}; | ||
</script> | ||
<style lang="stylus"> | ||
@import '../../style/variables'; | ||
+prefix-classes('visual-dl-image-') | ||
.config-com | ||
width 90% | ||
margin 20px auto | ||
.run-toggle | ||
width 100% | ||
margin-top 20px | ||
.label | ||
color white | ||
</style> |
Oops, something went wrong.