talemate/talemate_frontend/src/components/LoadScene.vue

<template>
    <v-list-subheader @click="toggle()" class="text-uppercase"><v-icon>mdi-script-text-outline</v-icon> Load
        <v-progress-circular v-if="loading" indeterminate color="primary" size="20"></v-progress-circular>
        <v-icon v-if="expanded" icon="mdi-chevron-down"></v-icon>
        <v-icon v-else icon="mdi-chevron-up"></v-icon>
    </v-list-subheader>
    <v-list-item-group v-if="!loading && isConnected() && expanded && !configurationRequired()">
        <v-list-item>
            <v-list-item-content class="mb-3">
                <!-- Toggle buttons for switching between file upload and path input -->
                <v-btn-toggle density="compact" class="mb-3" v-model="inputMethod" mandatory>
                    <v-btn value="file">
                        <v-icon>mdi-file-upload</v-icon>
                    </v-btn>
                    <v-btn value="path">
                        <v-icon>mdi-file-document-outline</v-icon>
                    </v-btn>
                    <v-btn value="creative">
                        <v-icon>mdi-palette-outline</v-icon>
                    </v-btn>
                </v-btn-toggle>
                <!-- File input for file upload -->
                <div  v-if="inputMethod === 'file' && !loading">
                    <v-file-input prepend-icon="" style="height:200px" density="compact" v-model="sceneFile"  @change="loadScene" label="Upload a character card"
                    outlined accept="image/*" variant="solo-filled"></v-file-input>
                </div>
                <!-- Text field for path input -->
                <v-autocomplete v-else-if="inputMethod === 'path' && !loading" v-model="sceneInput" :items="scenes"
                    label="Search scenes" outlined @update:search="updateSearchInput" item-title="label" item-value="path" :loading="sceneSearchLoading">
                </v-autocomplete>
                <!-- Upload/Load button -->
                <v-btn v-if="!loading && inputMethod === 'path'" @click="loadScene" color="primary" block class="mb-3">
                    <v-icon left>mdi-folder</v-icon>
                    Load
                </v-btn>
                <v-btn v-else-if="!loading && inputMethod === 'creative'" @click="loadCreative" color="primary" block class="mb-3">
                    <v-icon left>mdi-palette-outline</v-icon>
                    Creative Mode
                </v-btn>
            </v-list-item-content>
        </v-list-item>
    </v-list-item-group>
    <div v-else-if="configurationRequired()">
        <v-alert type="warning" variant="tonal">You need to configure a Talemate client before you can load scenes.</v-alert>
    </div>
</template>
  

<script>
export default {
    name: 'LoadScene',
    data() {
        return {
            loading: false,
            inputMethod: 'path',
            sceneFile: [],
            sceneInput: '',
            scenes: [],
            sceneSearchInput: null,
            sceneSearchLoading: false,
            expanded: true,
        }
    },
    inject: ['getWebsocket', 'registerMessageHandler', 'isConnected', 'configurationRequired'],
    methods: {
        toggle() {
            this.expanded = !this.expanded;
        },
        updateSearchInput(val) {
            this.sceneSearchInput = val;
            clearTimeout(this.searchTimeout); // Clear the previous timeout
            this.searchTimeout = setTimeout(this.fetchScenes, 300); // Start a new timeout
        },
        fetchScenes() {
            if (!this.sceneSearchInput)
                return
            this.sceneSearchLoading = true;
            console.log("Fetching scenes", this.sceneSearchInput)
            this.getWebsocket().send(JSON.stringify({ type: 'request_scenes_list', query: this.sceneSearchInput }));
        },
        loadCreative() {
            this.loading = true;
            this.getWebsocket().send(JSON.stringify({ type: 'load_scene', file_path: "environment:creative" }));
        },
        loadScene() {
            this.loading = true;
            if (this.inputMethod === 'file' && this.sceneFile.length > 0) { // Check if the input method is "file" and there is at least one file
                // Convert the uploaded file to base64
                const reader = new FileReader();
                reader.readAsDataURL(this.sceneFile[0]); // Access the first file in the array
                reader.onload = () => {
                    //const base64File = reader.result.split(',')[1];
                    this.getWebsocket().send(JSON.stringify({ 
                        type: 'load_scene', 
                        scene_data: reader.result, 
                        filename: this.sceneFile[0].name,
                    }));
                    this.sceneFile = [];
                };
            } else if (this.inputMethod === 'path' && this.sceneInput) { // Check if the input method is "path" and the scene input is not empty
                this.getWebsocket().send(JSON.stringify({ type: 'load_scene', file_path: this.sceneInput }));
                this.sceneInput = '';
            }
        },
        handleMessage(data) {

            // Scene loaded
            if (data.type === "system") {
                if (data.id === 'scene.loaded') {
                    this.loading = false;
                    this.expanded = false;
                }
            }

            // Handle scenes_list message type
            if (data.type === 'scenes_list') {
                this.scenes = data.data;
                this.sceneSearchLoading = false;
                return;
            }

        }
    },
    created() {
        this.registerMessageHandler(this.handleMessage);
    },
    mounted() {
        console.log("Websocket", this.getWebsocket()); // Check if websocket is available
    }
}
</script>

<style scoped>
/* styles for LoadScene component */
</style>