disable button for previous connections when empty
This commit is contained in:
Vendored
+8
-3
@@ -596,7 +596,7 @@
|
|||||||
isConnected = new State(false);
|
isConnected = new State(false);
|
||||||
isShowingConnectionModal = new State(false);
|
isShowingConnectionModal = new State(false);
|
||||||
previousAddresses = new ListState();
|
previousAddresses = new ListState();
|
||||||
// toggles
|
// guards
|
||||||
cannotConnect = createProxyState(
|
cannotConnect = createProxyState(
|
||||||
[this.serverAddressInput, this.isConnected],
|
[this.serverAddressInput, this.isConnected],
|
||||||
() => this.isConnected.value == true && this.serverAddressInput.value == this.connectionModel.address || this.serverAddressInput.value == ""
|
() => this.isConnected.value == true && this.serverAddressInput.value == this.connectionModel.address || this.serverAddressInput.value == ""
|
||||||
@@ -605,6 +605,10 @@
|
|||||||
[this.isConnected],
|
[this.isConnected],
|
||||||
() => this.isConnected.value == false
|
() => this.isConnected.value == false
|
||||||
);
|
);
|
||||||
|
hasNoPreviousConnections = createProxyState(
|
||||||
|
[this.previousAddresses],
|
||||||
|
() => this.previousAddresses.value.size == 0
|
||||||
|
);
|
||||||
// handlers
|
// handlers
|
||||||
connectionChangeHandler = () => {
|
connectionChangeHandler = () => {
|
||||||
this.isConnected.value = this.connectionModel.isConnected;
|
this.isConnected.value = this.connectionModel.isConnected;
|
||||||
@@ -695,7 +699,8 @@
|
|||||||
{
|
{
|
||||||
class: "flex justify-center",
|
class: "flex justify-center",
|
||||||
"aria-label": translations.homePage.manageConnectionsAudioLabel,
|
"aria-label": translations.homePage.manageConnectionsAudioLabel,
|
||||||
"on:click": connectionViewModel2.showConnectionModal
|
"on:click": connectionViewModel2.showConnectionModal,
|
||||||
|
"toggle:disabled": connectionViewModel2.hasNoPreviousConnections
|
||||||
},
|
},
|
||||||
/* @__PURE__ */ createElement("span", { class: "icon" }, "history")
|
/* @__PURE__ */ createElement("span", { class: "icon" }, "history")
|
||||||
), /* @__PURE__ */ createElement(
|
), /* @__PURE__ */ createElement(
|
||||||
@@ -791,7 +796,7 @@
|
|||||||
// state
|
// state
|
||||||
nameInput = new State("");
|
nameInput = new State("");
|
||||||
firstDayOfWeekInput = new State(0);
|
firstDayOfWeekInput = new State(0);
|
||||||
// toggles
|
// guards
|
||||||
cannotSetName = createProxyState(
|
cannotSetName = createProxyState(
|
||||||
[this.nameInput],
|
[this.nameInput],
|
||||||
() => this.nameInput.value == "" || this.nameInput.value == this.settingsModel.username
|
() => this.nameInput.value == "" || this.nameInput.value == this.settingsModel.username
|
||||||
|
|||||||
@@ -51,6 +51,7 @@ export function HomePage(
|
|||||||
class="flex justify-center"
|
class="flex justify-center"
|
||||||
aria-label={translations.homePage.manageConnectionsAudioLabel}
|
aria-label={translations.homePage.manageConnectionsAudioLabel}
|
||||||
on:click={connectionViewModel.showConnectionModal}
|
on:click={connectionViewModel.showConnectionModal}
|
||||||
|
toggle:disabled={connectionViewModel.hasNoPreviousConnections}
|
||||||
>
|
>
|
||||||
<span class="icon">history</span>
|
<span class="icon">history</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ export default class ConnectionViewModel {
|
|||||||
|
|
||||||
previousAddresses: React.ListState<string> = new React.ListState();
|
previousAddresses: React.ListState<string> = new React.ListState();
|
||||||
|
|
||||||
// toggles
|
// guards
|
||||||
cannotConnect: React.State<boolean> = React.createProxyState(
|
cannotConnect: React.State<boolean> = React.createProxyState(
|
||||||
[this.serverAddressInput, this.isConnected],
|
[this.serverAddressInput, this.isConnected],
|
||||||
() =>
|
() =>
|
||||||
@@ -27,6 +27,10 @@ export default class ConnectionViewModel {
|
|||||||
[this.isConnected],
|
[this.isConnected],
|
||||||
() => this.isConnected.value == false
|
() => this.isConnected.value == false
|
||||||
);
|
);
|
||||||
|
hasNoPreviousConnections: React.State<boolean> = React.createProxyState(
|
||||||
|
[this.previousAddresses],
|
||||||
|
() => this.previousAddresses.value.size == 0
|
||||||
|
);
|
||||||
|
|
||||||
// handlers
|
// handlers
|
||||||
connectionChangeHandler = (): void => {
|
connectionChangeHandler = (): void => {
|
||||||
@@ -48,7 +52,7 @@ export default class ConnectionViewModel {
|
|||||||
|
|
||||||
connectToAddress = (address: string): void => {
|
connectToAddress = (address: string): void => {
|
||||||
this.connectionModel.connect(address);
|
this.connectionModel.connect(address);
|
||||||
}
|
};
|
||||||
|
|
||||||
disconnect = (): void => {
|
disconnect = (): void => {
|
||||||
this.connectionModel.disconnect();
|
this.connectionModel.disconnect();
|
||||||
@@ -57,7 +61,7 @@ export default class ConnectionViewModel {
|
|||||||
removePreviousAddress = (address: string): void => {
|
removePreviousAddress = (address: string): void => {
|
||||||
this.connectionModel.removeAddress(address);
|
this.connectionModel.removeAddress(address);
|
||||||
this.updatePreviousAddresses();
|
this.updatePreviousAddresses();
|
||||||
}
|
};
|
||||||
|
|
||||||
// view methods
|
// view methods
|
||||||
showConnectionModal = (): void => {
|
showConnectionModal = (): void => {
|
||||||
@@ -71,7 +75,7 @@ export default class ConnectionViewModel {
|
|||||||
updatePreviousAddresses = (): void => {
|
updatePreviousAddresses = (): void => {
|
||||||
this.previousAddresses.clear();
|
this.previousAddresses.clear();
|
||||||
this.previousAddresses.add(...this.connectionModel.addresses);
|
this.previousAddresses.add(...this.connectionModel.addresses);
|
||||||
}
|
};
|
||||||
|
|
||||||
// init
|
// init
|
||||||
constructor(storageModel: StorageModel) {
|
constructor(storageModel: StorageModel) {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export default class SettingsViewModel {
|
|||||||
nameInput: React.State<string> = new React.State("");
|
nameInput: React.State<string> = new React.State("");
|
||||||
firstDayOfWeekInput: React.State<number> = new React.State(0);
|
firstDayOfWeekInput: React.State<number> = new React.State(0);
|
||||||
|
|
||||||
// toggles
|
// guards
|
||||||
cannotSetName: React.State<boolean> = React.createProxyState(
|
cannotSetName: React.State<boolean> = React.createProxyState(
|
||||||
[this.nameInput],
|
[this.nameInput],
|
||||||
() =>
|
() =>
|
||||||
|
|||||||
Reference in New Issue
Block a user