diff --git a/frontend/pages/viewer/index-edit.vue b/frontend/pages/viewer/index-edit.vue index a78d721b1a37fc02a2a6edbe79c457664c0c06a0..17c8c8ae0f707795f6435c95d83ca883c342b391 100644 --- a/frontend/pages/viewer/index-edit.vue +++ b/frontend/pages/viewer/index-edit.vue @@ -144,30 +144,8 @@ export default { this.makeCurrentBoxActive(this.labelCount) this.resetDrawingBox() } - console.log('huhahuha', Object.keys(this.previouslyCreatedBox)[1], Object.values(this.previouslyCreatedBox)[1]) - var i = 0 - var tempArray = [] - Object.keys(this.boxes).forEach((key) => { - console.log(key, this.boxes[key]) - if (key == Object.keys(this.previouslyCreatedBox)[i] ) { - console.log('key', key) - console.log('prevs', Object.keys(this.previouslyCreatedBox)[i] ) - // console.log('PUT' + i) - // delete this.previouslyCreatedBox[Object.keys(this.previouslyCreatedBox)[i]] - console.log(this.previouslyCreatedBox) - } else { - console.log('key', key) - console.log('prevs', Object.keys(this.previouslyCreatedBox)[i] ) - console.log('POST' + i) - tempArray.push(this.boxes[i+1]) - console.log('huyhuy',this.boxes[i+1]) - console.log("asdasd", tempArray[i]) - } - i++ - // for (let idxBox in tempArray) { - // console.log(tempArray[idxBox]) - // } - }) + console.log(this.boxes) + console.log(this.previouslyCreatedBox) }, closeViewer () { this.$router.push('/main/edit') @@ -241,7 +219,16 @@ export default { async saveImage () { // Validate all content name first if (this.validateAllContents()) { + var labelPutPayload = [] var labelPayload = [] + var tempArray = [] + var boxPosition + var bWidth + var bHeight + var realImageAttr + var content_id + var singleBackendObj + var move = 0 var imageAttributes = { screenWidth: this.$refs.image.clientWidth, screenHeight: this.$refs.image.clientHeight, @@ -249,59 +236,61 @@ export default { realHeight: this.$refs.image.naturalHeight } const imagePosition = this.getImagePositionRelativeToScreen(imageAttributes) - var i = 0 - var tempArray = [] - Object.keys(this.boxes).forEach((key) => { + console.log('GOGIGU', this.previouslyCreatedBox) + for (let key in this.boxes) { console.log(key, this.boxes[key]) - if (key == Object.keys(this.previouslyCreatedBox)[i] ) { + if (key == Object.keys(this.previouslyCreatedBox)[key - 1 - move] ) { console.log('key', key) - console.log('prevs', Object.keys(this.previouslyCreatedBox)[i] ) - console.log('PUT' + i) + console.log('prevs', Object.keys(this.previouslyCreatedBox)[key - 1 - move] ) + console.log('PUT' + (key - 1)) // edit - // var boxPosition = this.getBoxPositionRelativeToImage(imagePosition, key, this.boxes) - // var bWidth = this.boxes[key].width - // var bHeight = this.boxes[key].height - // var realImageAttr = this.getRealImageAttributes(imageAttributes, boxPosition, bWidth, bHeight) - // try { - // var content_id = await this.createLabelContent(this.boxes[key].content) - // var singleBackendObj = { - // // TODO: change temporary image_id of 1 to real image_id - // image_id: parseInt(this.image.id), - // label_x_center: realImageAttr.xCenter, - // label_y_center: realImageAttr.yCenter, - // label_width: realImageAttr.width, - // label_height: realImageAttr.height, - // label_content_id: content_id - // } - // labelPayload.push(singleBackendObj) - // console.log('labelPayload: ', labelPayload) - // await this.changeLabelsInImage(labelPayload) - // } catch (error) { - // this.showFailedAlert("Error!", error) - // return - // } - delete this.previouslyCreatedBox[Object.keys(this.previouslyCreatedBox)[i]] + boxPosition = this.getBoxPositionRelativeToImage(imagePosition, key, this.boxes) + bWidth = this.boxes[key].width + bHeight = this.boxes[key].height + realImageAttr = this.getRealImageAttributes(imageAttributes, boxPosition, bWidth, bHeight) + try { + content_id = await this.createLabelContent(this.boxes[key].content) + singleBackendObj = { + // TODO: change temporary image_id of 1 to real image_id + image_id: parseInt(this.image.id), + label_x_center: realImageAttr.xCenter, + label_y_center: realImageAttr.yCenter, + label_width: realImageAttr.width, + label_height: realImageAttr.height, + label_content_id: content_id + } + labelPutPayload.push(singleBackendObj) + console.log('labelPayload: ', labelPutPayload[0]) + console.log('BACKEND') + console.log(Object.values(this.previouslyCreatedBox)[key - 1 - move]) + await this.changeLabelsInImage(labelPutPayload[0], Object.values(this.previouslyCreatedBox)[key - 1 - move]) + } catch (error) { + this.showFailedAlert("Error!", error) + return + } + delete this.previouslyCreatedBox[Object.keys(this.previouslyCreatedBox)[key - 1 - move]] + move++ + labelPutPayload.pop() console.log(this.previouslyCreatedBox) } else { console.log('key', key) - console.log('prevs', Object.keys(this.previouslyCreatedBox)[i] ) - console.log('POST' + i) - tempArray.push(this.boxes[i+1]) - console.log('huyhuy',this.boxes[i+1]) - console.log("asdasd", tempArray[i]) + console.log('prevs', Object.keys(this.previouslyCreatedBox)[key - 1] ) + console.log('POST' + (key-1)) + tempArray.push(this.boxes[key]) + console.log('huyhuy',this.boxes[key]) + console.log("asdasd", tempArray[(key - 1)]) } - i++ - }) + } // push new label if (tempArray != 0) { for (let idxBox in tempArray) { - var boxPosition = this.getBoxPositionRelativeToImage(imagePosition, idxBox, tempArray) - var bWidth = tempArray[idxBox].width - var bHeight = tempArray[idxBox].height - var realImageAttr = this.getRealImageAttributes(imageAttributes, boxPosition, bWidth, bHeight) + boxPosition = this.getBoxPositionRelativeToImage(imagePosition, idxBox, tempArray) + bWidth = tempArray[idxBox].width + bHeight = tempArray[idxBox].height + realImageAttr = this.getRealImageAttributes(imageAttributes, boxPosition, bWidth, bHeight) try { - var content_id = await this.createLabelContent(tempArray[idxBox].content) - var singleBackendObj = { + content_id = await this.createLabelContent(tempArray[idxBox].content) + singleBackendObj = { // TODO: change temporary image_id of 1 to real image_id image_id: parseInt(this.image.id), label_x_center: realImageAttr.xCenter, @@ -404,8 +393,8 @@ export default { const heightRatio = (imageAttributes.realHeight / imageAttributes.screenHeight) var realBoxWidth = widthRatio * bWidth var realBoxHeight = heightRatio * bHeight - var xCenterPosition = widthRatio * boxPosition.lefcreateAllLabelsInImagep + (realBoxHeight / 2) - var yCenterPosition = widthRatio * boxPosition.lefcreateAllLabelsInImagep + (realBoxWidth / 2) + var xCenterPosition = widthRatio * boxPosition.left + (realBoxWidth / 2) + var yCenterPosition = heightRatio * boxPosition.top + (realBoxHeight / 2) return { xCenter: xCenterPosition, yCenter: yCenterPosition, @@ -438,7 +427,8 @@ export default { } }, async changeLabelsInImage (labelPayload, id) { - var url ='api/label' + id + var url ='api/label/' + id + console.log(id) try { var response = await this.$axios.put(url, labelPayload) return response.data.status