aico-image-editor/src/components/versionPanel/versionPanel.html

Combine multiple image into and create single combined image

<div class="block block-rounded" x-data="versionPanel" >
    <div class="block-header border-bottom" x-bind="versionPanelTrigger">
        <h6 class="text-uppercase mb-0" x-text="getTranslatedHTML('restoreVersionBlockTitle')"></h6>
    </div>
    <div class="block-content block-content-full text-center">
        <div class="d-flex align-items-center">
            <label class="form-label fw-bold" for="subject-scaling" x-text="getTranslatedHTML('default')"></label>
            <span class="linedesign ms-3 me-0"></span>
        </div>
        

        <div class="mt-3">
            <div class="row">
                <div class="col-2 border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('numberText')"></h6>
                </div>
                <div class="col-3 border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('picture')"></h6>
                </div>
                <div class="col-4 border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('recordTimeText')"></h6>
                </div>
                <div class="col border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('actionText')"></h6>
                </div>
            </div>    
            <div class="row align-items-stretch">
                <div class="col-2 border-bottom py-2 d-flex flex-column justify-content-center align-items-center">
                    <span>0.</span>
                </div>
                <div class="col-3 border-bottom py-2 d-flex flex-column justify-content-center align-items-center">
                    <span x-show="defaultVersionUrl">
                        <img :src="defaultVersionUrl" class="img-avatar img-avatar48 rounded-0 img-contain border" alt="version image" />
                    </span>
                    <span x-show="!defaultVersionUrl">
                        <span class="img-avatar img-avatar48">
                            <span class="d-flex align-items-center w-100 h-100 bg-gray justify-content-center rounded-3">
                                <i class="fa-regular fa-image"></i>
                            </span>
                        </span>
                    </span>
                </div>
                <div class="col-4 border-bottom py-2 d-flex flex-column align-items-center justify-content-center">
                    <span class="mx-3"x-text="formatDate(new Date())"></span>
                </div>
                <div class="col border-bottom py-2 d-flex flex-column align-items-center justify-content-center">
                    <a class="me-3" href="javascript:void(0)" @click="$store.canvas.resetCanvasData(__canvas)"
                        :title="getTranslatedHTML('viewRecordTitle')" x-data="tooltip" data-bs-toggle="tooltip"><i class="far fa-eye"></i> </a>
                </div>
            </div>
        </div>
        <div x-show="historyRecords.length > 0" class="mt-3">
            <div class="d-flex align-items-center">
                <label class="form-label fw-bold" for="subject-scaling" x-text="getTranslatedHTML('savedRecords')"></label>
                <span class="linedesign ms-3 me-0"></span>
            </div>
            <div class="row">
                <div class="col-2 border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('numberText')"></h6>
                </div>
                <div class="col-3 border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('picture')"></h6>
                </div>
                <div class="col-4 border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('recordTimeText')"></h6>
                </div>
                <div class="col border-bottom py-2">
                    <h6 x-text="getTranslatedHTML('actionText')"></h6>
                </div>
            </div>
            <template x-for="(historyRecord,index) in historyRecords" :key="historyRecord.id">
                <div x-init="async() => {
                    await preloadImage(historyRecord);
                    historyRecord.loadedImage = historyRecord.product3dImage;
                    
                }">
                    <template x-if="historyRecord.loadedImage">
                        <div class="row align-items-stretch">
                            <div class="col-2 border-bottom py-2 d-flex flex-column justify-content-center align-items-center">
                                <span x-text="index + '.'"></span>
                            </div>
                            <div class="col-3 border-bottom py-2 d-flex flex-column justify-content-center align-items-center">
                                <span x-show="historyRecord.product3dImage">
                                    <img  :src="historyRecord.loadedImage"  class="img-avatar img-avatar48 rounded-0 img-contain img-fluid" alt="version image" 
                                        width="48" height="48"/>
                                </span>
                                <span x-show="!historyRecord.product3dImage">
                                    <span class="img-avatar img-avatar48">
                                        <span class="d-flex align-items-center w-100 h-100 bg-gray justify-content-center rounded-3">
                                            <i class="fa-regular fa-image"></i>
                                        </span>
                                    </span>
                                </span>
                            </div>
                            <div class="col-4 border-bottom py-2 d-flex flex-column align-items-center justify-content-center">
                                <span class="mx-3"x-text="formatDate(historyRecord.createdAt)"></span>
                            </div>
                            <div class="col border-bottom py-2 d-flex flex-column align-items-center justify-content-center">
                                <div class="d-flex align-items-center">
                                    <a class="me-3" href="javascript:void(0)" @click="viewPreviousRecord(historyRecord)"
                                        :title="getTranslatedHTML('viewRecordTitle')" x-data="tooltip" data-bs-toggle="tooltip"><i class="far fa-eye"></i> </a>
                                    <a class="me-3" href="javascript:void(0)" @click="replacePreviousRecord(historyRecord)"
                                        :title="getTranslatedHTML('restoreRecordTitle')" x-data="tooltip" data-bs-toggle="tooltip"><i class="fas fa-repeat"></i> </a>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template x-if="!historyRecord.loadedImage">
                        <div class="skeleton img-avatar img-avatar48 w-100 rounded-0 my-2"></div>
                    </template>
                </div>
                
            </template>
        </div>
        
    </div>
</div>