11<template >
2- <div class =" absolute top-0 left-0 w-full h-full bg-ct-light-primary dark:bg-ct-dark-primary flex items-center justify-center text-black dark:text-white"
3- <div class =" text-center"
4- <h1 class =" font-extrabold text-red-600 uppercase" h1 > <br />
2+ <div
3+ ref =" dropzoneRef"
4+ class =" absolute top-0 left-0 w-full h-full bg-ct-light-primary dark:bg-ct-dark-primary flex items-center justify-center text-black dark:text-white"
5+ :class =" isOverDropZone ? 'highlight-zone' : ''"
6+ >
7+ <div class =" text-center" v-if =" isOverDropZone"
8+ <FontAwesomeIcon :icon =" faFileArrowDown" style =" height 40px ;"
9+ <h1 class =" font-extrabold" h1 >
10+ </div >
11+
12+ <div class =" text-center" v-if =" !isOverDropZone"
13+ <h1 class =" font-extrabold text-red-600 uppercase"
14+ WARNING: Make a backup of your config when working with this editor!
15+ </h1 >
16+ <br />
517 <img src =" @/assets/img/config_editor_light.svg" class =" block dark:hidden w-full" alt =" logo"
618 <img src =" @/assets/img/config_editor.svg" class =" hidden dark:block w-full" alt =" logo"
719 <br /><br />
8- <p class =" font-bold" p >
20+ <p class =" font-bold"
21+ Please choose a config file, or drag-and-drop a file here to get started
22+ </p >
923 <br />
10- <button type =" button" @click =" open()" class =" text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
24+ <button
25+ type =" button"
26+ @click =" open()"
27+ class =" text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
28+ >
1129 Select Config File
1230 </button >
1331
14- <button type =" button" @click =" openEmbedEditor()" class =" text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
32+ <button
33+ type =" button"
34+ @click =" openEmbedEditor()"
35+ class =" text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
36+ >
1537 Embed Editor
1638 </button >
1739 <br />
1840 <br />
19- <p class =" text-yellow-500 dark:text-yellow-300 text-sm" i >Simple RPC (3+), Simple RPC (4+), Simple Discord Link (3+) and Simple RPC Stardew Edition</i > configs</p >
41+ <p class =" text-yellow-500 dark:text-yellow-300 text-sm"
42+ Supports:
43+ <i
44+ >Simple RPC (3+), Simple RPC (4+), Simple Discord Link (3+) and Simple RPC Stardew
45+ Edition</i
46+ >
47+ configs
48+ </p >
2049 </div >
2150 </div >
2251</template >
2352
2453<script setup lang="ts">
25- import {onMounted } from " vue" ;
26- import {useFileDialog } from " @vueuse/core" ;
27- import {useEditor } from " @/stores/editor" ;
28- import {useToast } from " @/stores/toaststore" ;
54+ import { ref } from ' vue'
55+ import { useDropZone , useFileDialog } from ' @vueuse/core'
56+ import { useEditor } from ' @/stores/editor'
57+ import { useToast } from ' @/stores/toaststore'
2958import { BACKEND_URL } from ' @/composables/EditorFunctions'
3059import router from ' @/router'
60+ import { FontAwesomeIcon } from ' @fortawesome/vue-fontawesome'
61+ import { faFileArrowDown } from ' @fortawesome/free-solid-svg-icons/faFileArrowDown'
3162
32- onMounted (() => {
33- document .body .addEventListener (' dragover' evt => {
34- evt .preventDefault ();
35- });
63+ const = ref <HTMLDivElement >()
3664
37- document .body .addEventListener (' drop' evt => {
38- evt .preventDefault ();
39- });
40- })
65+ const = (file : File ) => {
66+ const = new FormData ()
67+ formData .append (' file' file )
68+
69+ fetch (` ${BACKEND_URL }/v1/parseupload ` , {
70+ method: ' POST'
71+ body: formData
72+ })
73+ .then (async (res ) => {
74+ const = await res .json ()
75+
76+ if (! dt .error ) {
77+ useEditor ().setConfig (dt .data )
78+ useEditor ().setOriginalConfig (dt .data .original )
79+ useEditor ().setConfigLoaded (true )
80+ useEditor ().setCurrentSection (Object .keys (dt .data .config )[0 ])
81+ useToast ().showToast (' Success' 2000 , ' success'
82+ } else {
83+ useToast ().showToast (dt .message , 2000 , ' error'
84+ }
85+ })
86+ .catch ((err ) => {
87+ console .error (err )
88+ useToast ().showToast (err , 2000 , ' error'
89+ })
90+ }
91+
92+ const = (files : File [] | null ) => {
93+ if (files && files .length > 0 ) {
94+ loadFile (files [0 ])
95+ }
96+ }
97+
98+ const = useDropZone (dropzoneRef , {
99+ onDrop ,
100+ multiple: false ,
101+ preventDefaultForUnhandled: true ,
102+ });
41103
42104const = () => {
43- router .push (" /embed_editor" then (res => {
44- useEditor ().setEmbedEditor (true );
105+ router .push (' /embed_editor' then (() => {
106+ useEditor ().setEmbedEditor (true )
45107 })
46108}
47109
48110const = useFileDialog ({
49111 accept: ' .toml'
50- });
112+ })
51113
52114onChange ((files ) => {
53115 if (files ?.item (0 )) {
54- const = new FormData ();
55- formData .append (' file' files [0 ]);
56-
57- fetch (` ${BACKEND_URL }/v1/parseupload ` , {
58- method: ' POST'
59- body: formData
60- }).then (async res => {
61- const = await res .json ();
62-
63- if (! dt .error ) {
64- useEditor ().setConfig (dt .data );
65- useEditor ().setOriginalConfig (dt .data .original );
66- useEditor ().setConfigLoaded (true );
67- useEditor ().setCurrentSection (Object .keys (dt .data .config )[0 ]);
68- useToast ().showToast (' Success' 2000 , " success"
69- } else {
70- useToast ().showToast (dt .message , 2000 , " error"
71- }
72- }).catch (err => {
73- console .error (err )
74- useToast ().showToast (err , 2000 , " error"
75- })
116+ loadFile (files [0 ]);
76117 }
77118})
78-
79119script >
0 commit comments