oxen-electron-gui-wallet/src/components/settings_general.vue

482 lines
12 KiB
Vue

<template>
<div class="settings-general">
<div class="row justify-between q-mb-md">
<div>
<q-radio
v-model="config_daemon.type"
val="remote"
:label="$t('strings.daemon.remote.title')"
/>
</div>
<div>
<q-radio
v-model="config_daemon.type"
val="local_remote"
:label="$t('strings.daemon.localRemote.title')"
/>
</div>
<div>
<q-radio
v-model="config_daemon.type"
val="local"
:label="$t('strings.daemon.local.title')"
/>
</div>
</div>
<p v-if="config_daemon.type == 'local_remote'" class="tab-desc">
{{ $t("strings.daemon.localRemote.description") }}
</p>
<p v-if="config_daemon.type == 'local'" class="tab-desc">
{{ $t("strings.daemon.local.description") }}
</p>
<p v-if="is_remote" class="tab-desc">
{{ $t("strings.daemon.remote.description") }}
</p>
<template v-if="config_daemon.type != 'remote'">
<div class="row pl-sm">
<OxenField
class="col-8"
:label="$t('fieldLabels.localDaemonIP')"
disable
>
<q-input
v-model="config_daemon.rpc_bind_ip"
:placeholder="daemon_defaults.rpc_bind_ip"
disable
borderless
dense
/>
</OxenField>
<OxenField
class="col-4"
:label="$t('fieldLabels.localDaemonPort') + '(RPC)'"
>
<q-input
v-model="config_daemon.rpc_bind_port"
:placeholder="toString(daemon_defaults.rpc_bind_port)"
type="number"
:decimals="0"
:step="1"
min="1024"
max="65535"
borderless
dense
/>
</OxenField>
</div>
</template>
<template v-if="config_daemon.type != 'local'">
<div class="row q-mt-md pl-sm">
<OxenField class="col-8" :label="$t('fieldLabels.remoteNodeHost')">
<q-input
v-model="config_daemon.remote_host"
:placeholder="daemon_defaults.remote_host"
borderless
dense
/>
<!-- Remote node presets -->
<q-btn-dropdown
v-if="config.app.net_type === 'mainnet'"
class="remote-dropdown"
flat
>
<q-list link no-border>
<q-item
v-for="option in remotes"
:key="option.host"
v-close-popup
@click.native="setPreset(option)"
>
<q-item-label>
<q-item-label header
>{{ option.host }}:{{ option.port }}</q-item-label
>
</q-item-label>
</q-item>
</q-list>
</q-btn-dropdown>
</OxenField>
<OxenField class="col-4" :label="$t('fieldLabels.remoteNodePort')">
<q-input
v-model="config_daemon.remote_port"
:placeholder="toString(daemon_defaults.remote_port)"
type="number"
:decimals="0"
:step="1"
min="1024"
max="65535"
:dark="theme == 'dark'"
borderless
dense
/>
</OxenField>
</div>
</template>
<div class="col q-mt-md pt-sm">
<OxenField :label="$t('fieldLabels.dataStoragePath')" disable-hover>
<q-input
v-model="config.app.data_dir"
disable
:dark="theme == 'dark'"
borderless
dense
/>
<input
id="dataPath"
ref="fileInputData"
type="file"
webkitdirectory
directory
hidden
@change="setDataPath"
/>
<q-btn
color="primary"
:text-color="theme == 'dark' ? 'white' : 'dark'"
@click="selectPath('data')"
>{{ $t("buttons.selectLocation") }}</q-btn
>
</OxenField>
<OxenField :label="$t('fieldLabels.walletStoragePath')" disable-hover>
<q-input
v-model="config.app.wallet_data_dir"
disable
:dark="theme == 'dark'"
borderless
dense
/>
<input
id="walletPath"
ref="fileInputWallet"
type="file"
webkitdirectory
directory
hidden
@change="setWalletDataPath"
/>
<q-btn
color="primary"
:text-color="theme == 'dark' ? 'white' : 'dark'"
@click="selectPath('wallet')"
>{{ $t("buttons.selectLocation") }}</q-btn
>
</OxenField>
</div>
<q-expansion-item
:label="$t('strings.advancedOptions')"
header-class="q-mt-sm non-selectable row reverse advanced-options-label"
>
<div class="row pl-sm q-mt-sm">
<OxenField
class="col-6"
:label="$t('fieldLabels.daemonLogLevel')"
:disable="is_remote"
>
<q-input
v-model="config_daemon.log_level"
:placeholder="toString(daemon_defaults.log_level)"
:disable="is_remote"
:dark="theme == 'dark'"
type="number"
:decimals="0"
:step="1"
min="0"
max="4"
borderless
dense
/>
</OxenField>
<OxenField class="col-6" :label="$t('fieldLabels.walletLogLevel')">
<q-input
v-model="config.wallet.log_level"
:placeholder="toString(defaults.wallet.log_level)"
:dark="theme == 'dark'"
type="number"
:decimals="0"
:step="1"
min="0"
max="4"
borderless
dense
/>
</OxenField>
</div>
<div class="row pl-sm q-mt-md">
<!-- TODO: Can be generalised to a "port" (or similar) field -->
<OxenField
class="col-3"
:label="$t('fieldLabels.maxIncomingPeers')"
:disable="is_remote"
>
<q-input
v-model="config_daemon.in_peers"
:placeholder="toString(daemon_defaults.in_peers)"
:disable="is_remote"
:dark="theme == 'dark'"
type="number"
:decimals="0"
:step="1"
min="-1"
max="65535"
borderless
dense
/>
</OxenField>
<OxenField
class="col-3"
:label="$t('fieldLabels.maxOutgoingPeers')"
:disable="is_remote"
>
<q-input
v-model="config_daemon.out_peers"
:placeholder="toString(daemon_defaults.out_peers)"
:disable="is_remote"
:dark="theme == 'dark'"
type="number"
:decimals="0"
:step="1"
min="-1"
max="65535"
borderless
dense
/>
</OxenField>
<OxenField
class="col-3"
:label="$t('fieldLabels.limitUploadRate')"
:disable="is_remote"
>
<q-input
v-model="config_daemon.limit_rate_up"
:placeholder="toString(daemon_defaults.limit_rate_up)"
:disable="is_remote"
:dark="theme == 'dark'"
type="number"
suffix="Kb/s"
:decimals="0"
:step="1"
min="-1"
max="65535"
borderless
dense
/>
</OxenField>
<OxenField
class="col-3"
:label="$t('fieldLabels.limitDownloadRate')"
:disable="is_remote"
>
<q-input
v-model="config_daemon.limit_rate_down"
:placeholder="toString(daemon_defaults.limit_rate_down)"
:disable="is_remote"
:dark="theme == 'dark'"
type="number"
suffix="Kb/s"
:decimals="0"
:step="1"
min="-1"
max="65535"
borderless
dense
/>
</OxenField>
</div>
<div class="row pl-sm q-mt-md">
<OxenField
class="col-3"
:label="$t('fieldLabels.daemonP2pPort')"
:disable="is_remote"
>
<q-input
v-model="config_daemon.p2p_bind_port"
:placeholder="toString(daemon_defaults.p2p_bind_port)"
:disable="is_remote"
:dark="theme == 'dark'"
float-
type="number"
:decimals="0"
:step="1"
min="1024"
max="65535"
borderless
dense
/>
</OxenField>
<OxenField class="col-3" :label="$t('fieldLabels.internalWalletPort')">
<q-input
v-model="config.app.ws_bind_port"
:placeholder="toString(defaults.app.ws_bind_port)"
:dark="theme == 'dark'"
float-
type="number"
:decimals="0"
:step="1"
min="1024"
max="65535"
borderless
dense
/>
</OxenField>
<OxenField
class="col-3"
:label="$t('fieldLabels.walletRPCPort')"
:disable="is_remote"
>
<q-input
v-model="config.wallet.rpc_bind_port"
:placeholder="toString(defaults.wallet.rpc_bind_port)"
:disable="is_remote"
:dark="theme == 'dark'"
float-
type="number"
:decimals="0"
:step="1"
min="1024"
max="65535"
borderless
dense
/>
</OxenField>
</div>
<OxenField
:helper="$t('fieldLabels.chooseNetwork')"
:label="$t('fieldLabels.network')"
class="network-group-field"
>
<q-option-group
v-model="config.app.net_type"
type="radio"
:options="[
{ label: 'Main Net', value: 'mainnet' },
{ label: 'Stage Net', value: 'stagenet' },
{ label: 'Test Net', value: 'testnet' }
]"
/>
</OxenField>
</q-expansion-item>
</div>
</template>
<script>
import { mapState } from "vuex";
import OxenField from "components/oxen_field";
export default {
name: "SettingsGeneral",
components: {
OxenField
},
props: {
randomiseRemote: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
select: 0
};
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
remotes: state => state.gateway.app.remotes,
config: state => state.gateway.app.pending_config,
config_daemon() {
return this.config.daemons[this.config.app.net_type];
},
is_remote() {
return this.config_daemon.type === "remote";
},
defaults: state => state.gateway.app.defaults,
daemon_defaults() {
return this.defaults.daemons[this.config.app.net_type];
}
}),
mounted() {
if (
this.randomiseRemote &&
this.remotes.length > 0 &&
this.config.app.net_type === "mainnet"
) {
const index = Math.floor(Math.random() * Math.floor(this.remotes.length));
this.setPreset(this.remotes[index]);
}
},
methods: {
selectPath(type) {
const fileInput = type === "data" ? "fileInputData" : "fileInputWallet";
this.$refs[fileInput].click();
},
setDataPath(file) {
if (file.target.files && file.target.files.length > 0) {
this.config.app.data_dir = file.target.files[0].path;
}
},
setWalletDataPath(file) {
if (file.target.files && file.target.files.length > 0) {
this.config.app.wallet_data_dir = file.target.files[0].path;
}
},
setPreset(option) {
if (!option) return;
const { host, port } = option;
if (host) this.config_daemon.remote_host = host;
if (port) this.config_daemon.remote_port = port;
},
toString(value) {
if (!value && typeof value !== "number") return "";
return String(value);
}
}
};
</script>
<style lang="scss">
.settings-general {
.q-field {
margin: 20px 0;
}
.q-if-disabled {
cursor: default !important;
.q-input-target {
cursor: default !important;
}
}
.network-group-field {
color: white;
display: inline-block;
}
.q-item,
.q-collapsible-sub-item {
padding: 0;
}
.row.pl-sm {
> * + * {
padding-left: 16px;
}
}
.col.pt-sm {
> * + * {
padding-top: 16px;
}
}
.remote-dropdown {
padding: 0 !important;
}
}
</style>