123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <template>
- <div>
- <slot></slot>
- </div>
- </template>
- <script>
- import ExperimentBase from '@/mixins/ExperimentBase'
- import { mapGetters } from 'vuex'
- import { API_ROUTES, findNearestUpper, findNearestLower } from '@/functions'
- import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
- export default {
- name: 'ExperimentBaseExtracts',
- mixins: [ExperimentBase],
- data() {
- return {
- // Updated when `setExtractConfig` is called
- extractConfig: {
- x: null,
- y: null
- },
- extracts: [],
- showHoverBorder: null
- }
- },
- computed: {
- ...mapGetters(['getHostURI'])
- },
- methods: {
- // Load extracts from the API
- async getExtracts(quality = 'min') {
- const URI = `${this.getHostURI}${API_ROUTES.getImageExtracts(this.sceneName, quality, this.extractConfig.x, this.extractConfig.y)}`
- const { data } = await fetch(URI)
- .then(async res => {
- res.json = await res.json()
- return res
- })
- .then(res => {
- if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
- return res.json
- })
- return data
- },
- // Config was updated, load extracts and save progression
- async setExtractConfig(config, configuratorRef) {
- if (!config) return
- this.loadingMessage = 'Loading configuration extracts...'
- this.loadingErrorMessage = null
- try {
- this.extractConfig.x = config.x
- this.extractConfig.y = config.y
- const data = await this.getExtracts()
- const hostURI = this.getHostURI
- this.extracts = data.extracts.map((url, i) => ({
- link: hostURI + url,
- quality: data.info.image.quality,
- zone: i + 1,
- index: i,
- nextQuality: findNearestUpper(data.info.image.quality, this.qualities),
- precQuality: findNearestLower(data.info.image.quality, this.qualities),
- loading: false
- }))
- // If there is a configurator, retract it
- if (configuratorRef) configuratorRef.setVisibility(false)
- }
- catch (err) {
- console.error('Failed to load new configuration', err)
- this.loadingErrorMessage = 'Failed to load new configuration. ' + err.message
- }
- finally {
- this.loadingMessage = null
- this.saveProgress()
- }
- },
- // An action was triggered, load extracts and save progression
- async extractAction(event, extractObj) {
- console.log(event, extractObj)
- const { index, nextQuality, precQuality, quality } = extractObj
- let newQuality
- if (event.button === 0) newQuality = precQuality // Left click
- if (event.button === 2) newQuality = nextQuality // Right click
- // Do not load a new extract if same quality
- if (newQuality === quality) return
- // Set loading state
- this.extracts[index].loading = true
- try {
- // Loading new extract
- const data = await this.getExtracts(newQuality)
- this.extracts[index].link = this.getHostURI + data.extracts[index]
- this.extracts[index].quality = data.info.image.quality
- this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
- this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
- this.extracts[index].loading = false
- // Sending event to WebSocket server
- // this.sendMessage({ msgId: experimentMsgId.DATA, msg: obj })
- }
- catch (err) {
- // TODO: toast message if fail
- console.error('Failed to load extract', err)
- }
- finally {
- this.extracts[index].loading = false
- this.saveProgress()
- }
- },
- // Finish an experiment, sending full data to the server
- // Don't forget to surcharge this function when using this mixin to add more data
- finishExperiment() {
- const obj = {
- experimentName: this.experimentName,
- sceneName: this.sceneName,
- extractConfig: this.extractConfig,
- extracts: this.extracts.map(x => ({
- index: x.index,
- link: x.link,
- nextQuality: x.nextQuality,
- precQuality: x.precQuality,
- quality: x.quality,
- zone: x.zone
- })),
- qualities: this.qualities,
- referenceImage: this.referenceImage
- }
- this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
- this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done: true })
- this.$router.push(`/experiments/${this.experimentName}`)
- }
- }
- }
- </script>
- <style>
- /* White border when hovering on extracts */
- .extract-hover-border:hover {
- z-index: 1;
- outline: 2px #f4f4f4 solid;
- }
- .img-extract-loader {
- height: 100%;
- width: 0px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- </style>
|