-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
178 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,144 @@ | ||
| <template> | ||
| <q-page padding class="row"> | ||
| <div class="col" style="max-width: 300px;"> | ||
| <MenuComponent /> | ||
| </div> | ||
| <div class="col q-pl-lg"> | ||
| <q-select outlined v-model="selectedModule" type="number" class="row q-mt-sm" :options="availableModules" :label="$t('modules.active.selected')" :disable="moduleEnabled" @update:model-value="setConfig"/> | ||
| <q-item class="row q-mt-sm" :v-ripple="selectedModule != null" clickable @click="setModuleEnabled(!moduleEnabled)" :disable="selectedModule == null"> | ||
| <q-item-section> | ||
| <q-item-label>{{ $t('modules.active.enabled.title') }}</q-item-label> | ||
| <q-item-label caption>{{ $t('modules.active.enabled.caption') }}</q-item-label> | ||
| </q-item-section> | ||
| <q-item-section side top> | ||
| <q-toggle color="primary" v-model="moduleEnabled" @update:model-value="setModuleEnabled"/> | ||
| </q-item-section> | ||
| </q-item> | ||
|
|
||
| <div class="text-bold text-h6 q-mt-lg">{{ $t('modules.active.executionLog') }}:</div> | ||
| <q-separator></q-separator> | ||
| <q-input outlined v-model="executionLog" type="textarea" class="row q-mt-sm"/> | ||
| <q-page padding class="row"> | ||
| <div class="col" style="max-width: 300px"> | ||
| <MenuComponent /> | ||
| </div> | ||
| <div class="col q-pl-lg"> | ||
| <q-select | ||
| outlined | ||
| v-model="selectedModule" | ||
| type="number" | ||
| class="row q-mt-sm" | ||
| :options="availableModules" | ||
| :label="$t('modules.active.selected')" | ||
| :disable="moduleEnabled" | ||
| @update:model-value="setConfig" | ||
| /> | ||
| <q-item | ||
| class="row q-mt-sm" | ||
| :v-ripple="selectedModule != null" | ||
| clickable | ||
| @click="setModuleEnabled(!moduleEnabled)" | ||
| :disable="selectedModule == null" | ||
| > | ||
| <q-item-section> | ||
| <q-item-label>{{ $t("modules.active.enabled.title") }}</q-item-label> | ||
| <q-item-label caption>{{ | ||
| $t("modules.active.enabled.caption") | ||
| }}</q-item-label> | ||
| </q-item-section> | ||
| <q-item-section side top> | ||
| <q-toggle | ||
| color="primary" | ||
| v-model="moduleEnabled" | ||
| @update:model-value="setModuleEnabled" | ||
| /> | ||
| </q-item-section> | ||
| </q-item> | ||
|
|
||
| <div class="text-bold text-h6 q-mt-lg">{{ $t('modules.active.stdout') }}:</div> | ||
| <q-separator></q-separator> | ||
| <q-input outlined v-model="stdOUT" type="textarea" class="row q-mt-sm"/> | ||
| <div class="text-bold text-h6 q-mt-lg"> | ||
| {{ $t("modules.active.executionLog") }}: | ||
| </div> | ||
| <q-separator></q-separator> | ||
| <q-input | ||
| outlined | ||
| v-model="executionLog" | ||
| type="textarea" | ||
| class="row q-mt-sm" | ||
| /> | ||
|
|
||
| <div class="text-bold text-h6 q-mt-lg">{{ $t('modules.active.stderr') }}:</div> | ||
| <q-separator></q-separator> | ||
| <q-input outlined v-model="stdERR" type="textarea" class="row q-mt-sm"/> | ||
| </div> | ||
| </q-page> | ||
| <div class="text-bold text-h6 q-mt-lg"> | ||
| {{ $t("modules.active.stdout") }}: | ||
| </div> | ||
| <q-separator></q-separator> | ||
| <q-input outlined v-model="stdOUT" type="textarea" class="row q-mt-sm" /> | ||
|
|
||
| <div class="text-bold text-h6 q-mt-lg"> | ||
| {{ $t("modules.active.stderr") }}: | ||
| </div> | ||
| <q-separator></q-separator> | ||
| <q-input outlined v-model="stdERR" type="textarea" class="row q-mt-sm" /> | ||
| </div> | ||
| </q-page> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { onMounted, onUnmounted, ref } from 'vue' | ||
| import { debounce } from 'quasar' | ||
| import MenuComponent from './MenuComponent.vue' | ||
| import { ModuleName } from 'app/lib/module/module'; | ||
| import { IpcRendererEvent } from 'electron'; | ||
| import { onMounted, onUnmounted, ref } from "vue"; | ||
| import { debounce } from "quasar"; | ||
| import MenuComponent from "./MenuComponent.vue"; | ||
| import { ModuleName } from "app/lib/module/module"; | ||
| import { IpcRendererEvent } from "electron"; | ||
| const moduleEnabled = ref(false) | ||
| const selectedModule = ref(null as ModuleName | null) | ||
| const availableModules = ref([ 'DB1000N', 'DISTRESS', 'MHDDOS_PROXY' ] as ModuleName[]) | ||
| const moduleEnabled = ref(false); | ||
| const selectedModule = ref(null as ModuleName | null); | ||
| const availableModules = ref(["DISTRESS", "MHDDOS_PROXY"] as ModuleName[]); | ||
| const executionLog = ref("") | ||
| const stdOUT = ref("") | ||
| const stdERR = ref("") | ||
| const executionLog = ref(""); | ||
| const stdOUT = ref(""); | ||
| const stdERR = ref(""); | ||
| async function loadState() { | ||
| const executionEngineState = await window.executionEngineAPI.getState() | ||
| moduleEnabled.value = executionEngineState.run | ||
| selectedModule.value = executionEngineState.moduleToRun || null | ||
| const executionEngineState = await window.executionEngineAPI.getState(); | ||
| moduleEnabled.value = executionEngineState.run; | ||
| selectedModule.value = executionEngineState.moduleToRun || null; | ||
| executionLog.value = executionEngineState.executionLog.map((e) => JSON.stringify(e) + "\n").join("") | ||
| stdOUT.value = executionEngineState.stdOut.join("") | ||
| stdERR.value = executionEngineState.stdErr.join("") | ||
| executionLog.value = executionEngineState.executionLog | ||
| .map((e) => JSON.stringify(e) + "\n") | ||
| .join(""); | ||
| stdOUT.value = executionEngineState.stdOut.join(""); | ||
| stdERR.value = executionEngineState.stdErr.join(""); | ||
| } | ||
| const setConfigDebounce = debounce(setConfig, 1000) | ||
| const setConfigDebounce = debounce(setConfig, 1000); | ||
| async function setConfig() { | ||
| await window.executionEngineAPI.setModuleToRun(selectedModule.value || undefined) | ||
| await window.executionEngineAPI.setModuleToRun( | ||
| selectedModule.value || undefined | ||
| ); | ||
| } | ||
| async function setModuleEnabled(enable: boolean) { | ||
| moduleEnabled.value = enable | ||
| if (enable) { | ||
| await window.executionEngineAPI.startModule() | ||
| stdOUT.value = "" | ||
| stdERR.value = "" | ||
| } else { | ||
| await window.executionEngineAPI.stopModule() | ||
| } | ||
| moduleEnabled.value = enable; | ||
| if (enable) { | ||
| await window.executionEngineAPI.startModule(); | ||
| stdOUT.value = ""; | ||
| stdERR.value = ""; | ||
| } else { | ||
| await window.executionEngineAPI.stopModule(); | ||
| } | ||
| } | ||
| function onExecutionLog(_e: IpcRendererEvent, data: any) { | ||
| data = JSON.stringify(data) + "\n" | ||
| executionLog.value += data | ||
| while (executionLog.value.length > 10000) { | ||
| executionLog.value = executionLog.value.slice(1000) | ||
| } | ||
| data = JSON.stringify(data) + "\n"; | ||
| executionLog.value += data; | ||
| while (executionLog.value.length > 10000) { | ||
| executionLog.value = executionLog.value.slice(1000); | ||
| } | ||
| } | ||
| function onStdOut(_e: IpcRendererEvent, data: string) { | ||
| stdOUT.value += data | ||
| while (stdOUT.value.length > 10000) { | ||
| stdOUT.value = stdOUT.value.slice(1000) | ||
| } | ||
| stdOUT.value += data; | ||
| while (stdOUT.value.length > 10000) { | ||
| stdOUT.value = stdOUT.value.slice(1000); | ||
| } | ||
| } | ||
| function onStdErr(_e: IpcRendererEvent, data: string) { | ||
| stdERR.value += data | ||
| while (stdERR.value.length > 10000) { | ||
| stdERR.value = stdERR.value.slice(1000) | ||
| } | ||
| stdERR.value += data; | ||
| while (stdERR.value.length > 10000) { | ||
| stdERR.value = stdERR.value.slice(1000); | ||
| } | ||
| } | ||
| onMounted(async () => { | ||
| window.executionEngineAPI.listenForExecutionLog(onExecutionLog) | ||
| window.executionEngineAPI.listenForStdOut(onStdOut) | ||
| window.executionEngineAPI.listenForStdErr(onStdErr) | ||
| await loadState() | ||
| }) | ||
| window.executionEngineAPI.listenForExecutionLog(onExecutionLog); | ||
| window.executionEngineAPI.listenForStdOut(onStdOut); | ||
| window.executionEngineAPI.listenForStdErr(onStdErr); | ||
| await loadState(); | ||
| }); | ||
| onUnmounted(() => { | ||
| window.executionEngineAPI.stopListeningForExecutionLog(onExecutionLog) | ||
| window.executionEngineAPI.stopListeningForStdOut(onStdOut) | ||
| window.executionEngineAPI.stopListeningForStdErr(onStdErr) | ||
| }) | ||
| </script> | ||
| window.executionEngineAPI.stopListeningForExecutionLog(onExecutionLog); | ||
| window.executionEngineAPI.stopListeningForStdOut(onStdOut); | ||
| window.executionEngineAPI.stopListeningForStdErr(onStdErr); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,82 @@ | ||
| <template> | ||
| <q-card flat square class="fit bg-transparent q-pr-md" style="border-right: solid #ccc 1px;"> | ||
| <q-card-section> | ||
| <div class="text-overline q-mt-md">{{ $t('modules.menu.main') }}</div> | ||
| <div :class="'text-subtitle2 q-pl-xs ' + (isPageActive('modules_active') ? ($q.dark.isActive ? 'bg-black':'bg-grey-4') : 'selectable_menu')" style="border-top: solid #ccc 1px; border-bottom: solid #ccc 1px;" @click="goToPage('modules_active')">{{ $t('modules.menu.active') }}</div> | ||
| <q-card | ||
| flat | ||
| square | ||
| class="fit bg-transparent q-pr-md" | ||
| style="border-right: solid #ccc 1px" | ||
| > | ||
| <q-card-section> | ||
| <div class="text-overline q-mt-md">{{ $t("modules.menu.main") }}</div> | ||
| <div | ||
| :class=" | ||
| 'text-subtitle2 q-pl-xs ' + | ||
| (isPageActive('modules_active') | ||
| ? $q.dark.isActive | ||
| ? 'bg-black' | ||
| : 'bg-grey-4' | ||
| : 'selectable_menu') | ||
| " | ||
| style="border-top: solid #ccc 1px; border-bottom: solid #ccc 1px" | ||
| @click="goToPage('modules_active')" | ||
| > | ||
| {{ $t("modules.menu.active") }} | ||
| </div> | ||
|
|
||
| <div class="text-overline q-mt-md">{{ $t('modules.menu.available') }}</div> | ||
| <div :class="'text-subtitle2 q-pl-xs ' + (isPageActive('modules_db1000n') ? ($q.dark.isActive ? 'bg-black':'bg-grey-4') : 'selectable_menu')" style="border-top: solid #ccc 1px; border-bottom: solid #ccc 1px;" @click="goToPage('modules_db1000n')">DB1000N</div> | ||
| <div :class="'text-subtitle2 q-pl-xs ' + (isPageActive('modules_mhddosproxy') ? ($q.dark.isActive ? 'bg-black':'bg-grey-4') : 'selectable_menu')" style="border-bottom: solid #ccc 1px;" @click="goToPage('modules_mhddosproxy')">MHDDOS PROXY</div> | ||
| <div :class="'text-subtitle2 q-pl-xs ' + (isPageActive('modules_distress') ? ($q.dark.isActive ? 'bg-black':'bg-grey-4') : 'selectable_menu')" style="border-bottom: solid #ccc 1px;" @click="goToPage('modules_distress')">DISTRESS</div> | ||
| </q-card-section> | ||
| </q-card> | ||
| <div class="text-overline q-mt-md"> | ||
| {{ $t("modules.menu.available") }} | ||
| </div> | ||
| <!-- <div :class="'text-subtitle2 q-pl-xs ' + (isPageActive('modules_db1000n') ? ($q.dark.isActive ? 'bg-black':'bg-grey-4') : 'selectable_menu')" style="border-top: solid #ccc 1px; border-bottom: solid #ccc 1px;" @click="goToPage('modules_db1000n')">DB1000N</div> --> | ||
| <div | ||
| :class=" | ||
| 'text-subtitle2 q-pl-xs ' + | ||
| (isPageActive('modules_mhddosproxy') | ||
| ? $q.dark.isActive | ||
| ? 'bg-black' | ||
| : 'bg-grey-4' | ||
| : 'selectable_menu') | ||
| " | ||
| style="border-bottom: solid #ccc 1px" | ||
| @click="goToPage('modules_mhddosproxy')" | ||
| > | ||
| MHDDOS PROXY | ||
| </div> | ||
| <div | ||
| :class=" | ||
| 'text-subtitle2 q-pl-xs ' + | ||
| (isPageActive('modules_distress') | ||
| ? $q.dark.isActive | ||
| ? 'bg-black' | ||
| : 'bg-grey-4' | ||
| : 'selectable_menu') | ||
| " | ||
| style="border-bottom: solid #ccc 1px" | ||
| @click="goToPage('modules_distress')" | ||
| > | ||
| DISTRESS | ||
| </div> | ||
| </q-card-section> | ||
| </q-card> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref } from 'vue' | ||
| import { useRoute, useRouter } from 'vue-router' | ||
| import { ref } from "vue"; | ||
| import { useRoute, useRouter } from "vue-router"; | ||
| const route = useRoute() | ||
| const router = useRouter() | ||
| const route = useRoute(); | ||
| const router = useRouter(); | ||
| function isPageActive(name: string) { | ||
| return (route.name as string).startsWith(name) | ||
| return (route.name as string).startsWith(name); | ||
| } | ||
| function goToPage(name: string) { | ||
| router.push({ name: name }) | ||
| router.push({ name: name }); | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .selectable_menu:hover { | ||
| background-color: #dddddd; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| </style> |