148 lines
4.4 KiB
Vue
148 lines
4.4 KiB
Vue
<template>
|
|
<div class="container" v-if="hasCode">
|
|
<IconButton
|
|
:text="this.isDesktopVersion ? 'Save' : 'Download'"
|
|
v-on:click="saveCodeAsync"
|
|
icon-prefix="fas"
|
|
:icon-name="this.isDesktopVersion ? 'save' : 'file-download'">
|
|
</IconButton>
|
|
<IconButton
|
|
text="Copy"
|
|
v-on:click="copyCodeAsync"
|
|
icon-prefix="fas" icon-name="copy">
|
|
</IconButton>
|
|
<modal :name="macOsModalName" height="auto" :scrollable="true" :adaptive="true"
|
|
v-if="this.isMacOsCollection">
|
|
<div class="modal">
|
|
<div class="modal__content">
|
|
<MacOsInstructions :fileName="this.fileName" />
|
|
</div>
|
|
<div class="modal__close-button">
|
|
<font-awesome-icon :icon="['fas', 'times']" @click="$modal.hide(macOsModalName)"/>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component } from 'vue-property-decorator';
|
|
import { StatefulVue } from '@/presentation/StatefulVue';
|
|
import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
|
|
import { Clipboard } from '@/infrastructure/Clipboard';
|
|
import IconButton from './IconButton.vue';
|
|
import MacOsInstructions from './MacOsInstructions.vue';
|
|
import { Environment } from '@/application/Environment/Environment';
|
|
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
|
import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
|
|
import { IApplicationCode } from '@/application/Context/State/Code/IApplicationCode';
|
|
import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
|
|
@Component({
|
|
components: {
|
|
IconButton,
|
|
MacOsInstructions,
|
|
},
|
|
})
|
|
export default class TheCodeButtons extends StatefulVue {
|
|
public readonly macOsModalName = 'macos-instructions';
|
|
|
|
public hasCode = false;
|
|
public isDesktopVersion = Environment.CurrentEnvironment.isDesktop;
|
|
public isMacOsCollection = false;
|
|
public fileName = '';
|
|
|
|
public async copyCodeAsync() {
|
|
const code = await this.getCurrentCodeAsync();
|
|
Clipboard.copyText(code.current);
|
|
}
|
|
public async saveCodeAsync() {
|
|
const context = await this.getCurrentContextAsync();
|
|
saveCode(this.fileName, context.state);
|
|
if (this.isMacOsCollection) {
|
|
this.$modal.show(this.macOsModalName);
|
|
}
|
|
}
|
|
|
|
protected handleCollectionState(newState: ICategoryCollectionState): void {
|
|
this.isMacOsCollection = newState.collection.os === OperatingSystem.macOS;
|
|
this.fileName = buildFileName(newState.collection.scripting);
|
|
this.react(newState.code);
|
|
}
|
|
|
|
private async getCurrentCodeAsync(): Promise<IApplicationCode> {
|
|
const context = await this.getCurrentContextAsync();
|
|
const code = context.state.code;
|
|
return code;
|
|
}
|
|
private async react(code: IApplicationCode) {
|
|
this.hasCode = code.current && code.current.length > 0;
|
|
this.events.unsubscribeAll();
|
|
this.events.register(code.changed.on((newCode) => {
|
|
this.hasCode = newCode && newCode.code.length > 0;
|
|
}));
|
|
}
|
|
}
|
|
|
|
function saveCode(fileName: string, state: ICategoryCollectionState) {
|
|
const content = state.code.current;
|
|
const type = getType(state.collection.scripting.language);
|
|
SaveFileDialog.saveFile(content, fileName, type);
|
|
}
|
|
|
|
function getType(language: ScriptingLanguage) {
|
|
switch (language) {
|
|
case ScriptingLanguage.batchfile:
|
|
return FileType.BatchFile;
|
|
case ScriptingLanguage.shellscript:
|
|
return FileType.ShellScript;
|
|
default:
|
|
throw new Error('unknown file type');
|
|
}
|
|
}
|
|
function buildFileName(scripting: IScriptingDefinition) {
|
|
const fileName = 'privacy-script';
|
|
if (scripting.fileExtension) {
|
|
return `${fileName}.${scripting.fileExtension}`;
|
|
}
|
|
return fileName;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/colors.scss";
|
|
@import "@/presentation/styles/fonts.scss";
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
.container > * + * {
|
|
margin-left: 30px;
|
|
}
|
|
.modal {
|
|
font-family: $normal-font;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&__content {
|
|
width: 100%;
|
|
margin: 5%;
|
|
}
|
|
|
|
&__close-button {
|
|
width: auto;
|
|
font-size: 1.5em;
|
|
margin-right:0.25em;
|
|
align-self: flex-start;
|
|
cursor: pointer;
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
</style>
|