Skip to content

Commit

Permalink
feat(zigbee2mqtt): Add z2m ui link in Setup page
Browse files Browse the repository at this point in the history
Fix #1893
  • Loading branch information
cicoub13 committed Sep 28, 2023
1 parent 323d8f6 commit 7871ab4
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 10 deletions.
13 changes: 7 additions & 6 deletions front/src/config/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -561,7 +561,7 @@
"saving": "Saving USB Dongle configuration..."
},
"setup": {
"title": "Zigbe2mqtt configuration",
"title": "Zigbee2mqtt configuration",
"description": "This service uses two independent docker containers (MQTT broker and Zigbee2mqtt). Enable Zigbee2mqtt for deploying these containers.\nLearn more on the Zigbee2mqtt documentation page",
"enableLabel": "Zigbee2mqtt activation",
"nonDockerEnv": "Gladys is not running on Docker, you cannot install a MQTT broker from here.",
Expand All @@ -571,13 +571,14 @@
"serviceStatus": "Zigbee2mqtt Service Status",
"link": "Link",
"connected": "Zigbee2mqtt was started with success.",
"error": "An error occured while starting Zigbee2mqtt.",
"error": "An error occurred while starting Zigbee2mqtt.",
"mqttZigbeeLink": "MQTT - Zigbee",
"gladysMqttLink": "Gladys - MQTT",
"zigbee2Mqtt": "Zigbee2mqtt",
"gladys": "Gladys",
"mqtt": "MQTT",
"status": "Status"
"status": "Status",
"connectionUrl": "Zigbee2mqtt Interface URL: <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>"
},
"device": {
"title": "Zigbee2mqtt devices",
Expand All @@ -588,16 +589,16 @@
"permitJoin": "Permit joining",
"noDeviceDiscovered": "No new device discovered, please click on scan button.",
"serverNoResponse": "Gladys server is not available.",
"serverNoResponseWebSocker": "Gladys server is not available. Pleash refresh the page.",
"serverNoResponseWebSocker": "Gladys server is not available. Please refresh the page.",
"deviceNotHandled": "Device not handled yet, please contact us to help us connect it in Gladys!",
"createGithubIssue": "Suggest this device"
},
"noDeviceFound": "No zigbee2mqtt device found.",
"noDeviceFound": "No Zigbee2mqtt device found.",
"nameLabel": "Device Name",
"namePlaceholder": "Enter the name of your device",
"roomLabel": "Room",
"topicLabel": "Topic",
"topicPlaceholder": "%topic% zigbee2mqtt MQTT value",
"topicPlaceholder": "%topic% Zigbee2mqtt MQTT value",
"featuresLabel": "Features",
"saveButton": "Save",
"deleteButton": "Delete",
Expand Down
7 changes: 4 additions & 3 deletions front/src/config/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -691,10 +691,10 @@
"description": "Ce service utilise deux containers Docker (MQTT broker and Zigbee2mqtt). Activer Zigbee2mqtt pour déployer ces containers.\nPour en savoir plus, rendez-vous sur la page de documentation Zigbee2mqtt",
"enableLabel": "Activation du service Zigbee2mqtt",
"nonDockerEnv": "Gladys ne s'exécute actuellement pas dans Docker, il est impossible d'activer Zigbee2mqtt depuis Gladys.",
"invalidDockerNetwork": "Gladys est basée sur une installation personalisée, pour installer Zigbee2mqtt depuis cette page, le conteneur Docker de Gladys doit être démarré avec l'option \"network=host\".",
"invalidDockerNetwork": "Gladys est basée sur une installation personnalisée, pour installer Zigbee2mqtt depuis cette page, le conteneur Docker de Gladys doit être démarré avec l'option \"network=host\".",
"enableZigbee2mqtt": "Activer Zigbee2mqtt",
"containersStatus": "Conteneurs liés à Zigbee2mqtt",
"serviceStatus": "Etat du service Zigbee2mqtt",
"serviceStatus": "État du service Zigbee2mqtt",
"link": "Lien",
"connected": "Zigbee2mqtt démarré avec succès.",
"error": "Une erreur s'est produite au démarrage du service Zigbee2mqtt.",
Expand All @@ -703,7 +703,8 @@
"zigbee2Mqtt": "Zigbee2mqtt",
"gladys": "Gladys",
"mqtt": "MQTT",
"status": "Status"
"status": "Status",
"connectionUrl": "URL de l'interface Zigbee2mqtt : <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>"
},
"device": {
"title": "Appareils Zigbee",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,17 @@ class SetupTab extends Component {
</p>
)}

{props.zigbee2mqttConnected && props.z2mUrl && (
<div class="form-group">
<MarkupText
id="integration.zigbee2mqtt.setup.connectionUrl"
fields={{
url: props.z2mUrl
}}
/>
</div>
)}

<div class="form-group">
<label for="enableZigbee2mqtt" class="form-label">
<Text id={`integration.zigbee2mqtt.setup.enableLabel`} />
Expand Down
11 changes: 11 additions & 0 deletions front/src/routes/integration/all/zigbee2mqtt/setup-page/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { RequestStatus } from '../../../../../utils/consts';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import get from 'get-value';
import config from '../../../../../config';

dayjs.extend(relativeTime);

Expand Down Expand Up @@ -38,6 +39,16 @@ const createActions = store => {
networkModeValid: zigbee2mqttStatus.networkModeValid
});
}

// Compute Zigbee2Mqtt interface URL if connected locally (not through Gladys Plus Gateway)
let z2mUrl = null;
if (this.session.gatewayClient === undefined) {
const url = new URL(config.localApiUrl);
z2mUrl = `${url.protocol}//${url.hostname}:8080`;
}
store.setState({
z2mUrl
});
},

async startContainer(state) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@ class Zigbee2mqttSetupPage extends Component {
}

export default connect(
'user,session,z2mEnabled,usbConfigured,mqttExist,mqttRunning,dockerBased,networkModeValid,zigbee2mqttExist,zigbee2mqttRunning,gladysConnected,zigbee2mqttConnected,usbConfigured',
'user,session,z2mEnabled,usbConfigured,mqttExist,mqttRunning,dockerBased,networkModeValid,zigbee2mqttExist,zigbee2mqttRunning,gladysConnected,zigbee2mqttConnected,usbConfigured,z2mUrl',
actions
)(Zigbee2mqttSetupPage);

0 comments on commit 7871ab4

Please sign in to comment.