Skip to content

Commit

Permalink
front: Use same feature component everywhere (#1352)
Browse files Browse the repository at this point in the history
  • Loading branch information
atrovato authored Nov 12, 2021
1 parent b3fa509 commit 157c2aa
Show file tree
Hide file tree
Showing 24 changed files with 125 additions and 291 deletions.
18 changes: 3 additions & 15 deletions front/src/components/device/UpdateDeviceForm.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Component } from 'preact';
import { Text, Localizer } from 'preact-i18n';
import { DeviceFeatureCategoriesIcon } from '../../utils/consts';
import get from 'get-value';

import { DEVICE_POLL_FREQUENCIES } from '../../../../server/utils/constants';
import DeviceFeatures from './view/DeviceFeatures';

const maxWidth = {
maxWidth: '400px'
Expand Down Expand Up @@ -83,19 +83,7 @@ class UpdateDeviceForm extends Component {
<label class="form-label">
<Text id="editDeviceForm.featuresLabel" />
</label>
<div class="tags">
{props.device &&
props.device.features &&
props.device.features.map(feature => (
<span class="tag">
<Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
<div class="tag-addon">
<i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`} />
</div>
</span>
))}
{(!props.device.features || props.device.features.length === 0) && <Text id="editDeviceForm.noFeatures" />}
</div>
<DeviceFeatures features={props.device.features} />
</div>
</div>
);
Expand Down
19 changes: 19 additions & 0 deletions front/src/components/device/view/BatteryLevelFeature.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import cx from 'classnames';
import { Text } from 'preact-i18n';

const BatteryLevelFeature = ({ batteryLevel }) => (
<div
class={cx('tag', {
'tag-green': batteryLevel >= 25,
'tag-warning': batteryLevel < 25 && batteryLevel >= 10,
'tag-danger': batteryLevel < 10
})}
>
<Text id="global.percentValue" fields={{ value: batteryLevel }} />
<span class="tag-addon">
<i class="fe fe-battery" />
</span>
</div>
);

export default BatteryLevelFeature;
15 changes: 15 additions & 0 deletions front/src/components/device/view/DeviceFeature.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import get from 'get-value';
import { Text } from 'preact-i18n';

import { DeviceFeatureCategoriesIcon } from '../../../utils/consts';

const DeviceFeature = ({ feature }) => (
<span class="tag">
<Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
<div class="tag-addon">
<i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`} />
</div>
</span>
);

export default DeviceFeature;
23 changes: 23 additions & 0 deletions front/src/components/device/view/DeviceFeatures.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Text } from 'preact-i18n';

import DeviceFeature from './DeviceFeature';

const DeviceFeatures = ({ features = [] }) => {
if (features.length > 0) {
return (
<div class="tags device-features">
{features.map(feature => (
<DeviceFeature feature={feature} />
))}
</div>
);
}

return (
<div class="font-italic device-features">
<Text id="device.noFeatures" />
</div>
);
};

export default DeviceFeatures;
4 changes: 4 additions & 0 deletions front/src/config/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -1918,6 +1918,7 @@ const data = {
external_id: 'bluetooth:0011223341',
service_id: 'a810b8db-6d04-4697-bed3-c4b72c996279',
selector: 'bluetooth-0011223341',
features: [],
params: [
{
name: 'loaded',
Expand All @@ -1930,6 +1931,7 @@ const data = {
model: 'smlc9',
external_id: 'bluetooth:0011223342',
selector: 'bluetooth-0011223342',
features: [],
params: [
{
name: 'loaded',
Expand Down Expand Up @@ -1988,6 +1990,7 @@ const data = {
name: 'BLE Device 1',
external_id: 'bluetooth:0011223341',
selector: 'bluetooth-0011223341',
features: [],
params: [
{
name: 'loaded',
Expand All @@ -2000,6 +2003,7 @@ const data = {
model: 'smlc9',
external_id: 'bluetooth:0011223342',
selector: 'bluetooth-0011223342',
features: [],
params: [
{
name: 'loaded',
Expand Down
13 changes: 4 additions & 9 deletions front/src/config/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
"event": "Event",
"noEventsInRange": "There are no events in this range."
},
"device": {
"noFeatures": "No features"
},
"login": {
"title": "Gladys Assistant",
"welcome": "Welcome",
Expand Down Expand Up @@ -433,7 +436,6 @@
"noNameLabel": "No name",
"roomLabel": "Room",
"featuresLabel": "Features",
"noFeatures": "No features",
"search": "Search devices",
"connectButton": "Connect/Reconnect",
"scanButton": "Scan network",
Expand Down Expand Up @@ -553,7 +555,6 @@
"nameLabel": "Name",
"roomLabel": "Room",
"featuresLabel": "Features",
"noFeatures": "No features",
"saveButton": "Save",
"deleteButton": "Delete",
"editButton": "Edit",
Expand All @@ -575,7 +576,6 @@
"createDeviceInGladys": "Connect in Gladys",
"features": "Features",
"params": "Params",
"noFeatures": "No features",
"nodeId": "Node",
"zwaveNotConfiguredError": "Z-wave is not configured. Please select the USB port where you Z-Wave key is plugged in settings.",
"createDeviceError": "There was an error while creating this device in Gladys.",
Expand Down Expand Up @@ -645,7 +645,6 @@
"externalIdLabel": "External ID",
"roomLabel": "Room",
"featuresLabel": "Features",
"noFeatures": "No features",
"saveButton": "Save",
"deleteButton": "Delete",
"returnButton": "Return back",
Expand Down Expand Up @@ -714,8 +713,7 @@
"featuresLabel": "Features",
"saveButton": "Save",
"deleteButton": "Delete",
"editButton": "Edit details",
"noFeatures": "No features"
"editButton": "Edit details"
},
"setup": {
"title": "Xiaomi devices not in Gladys",
Expand Down Expand Up @@ -812,7 +810,6 @@
"title": "Bluetooth Devices",
"search": "Search devices",
"noDevices": "No Bluetooth devices added yet.",
"noFeatures": "No features",
"nameLabel": "Name",
"namePlaceholder": "Enter device name",
"roomLabel": "Room",
Expand All @@ -821,7 +818,6 @@
"modelLabel": "Model",
"presenceSensorLabel": "Use this device as presence sensor",
"featuresLabel": "Features",
"noFeatureDiscovered": "No features discovered.",
"featureNamePlaceholder": "Enter feature name",
"saveButton": "Save",
"deleteButton": "Delete",
Expand Down Expand Up @@ -1717,7 +1713,6 @@
"roomLabel": "Room",
"featuresLabel": "Features",
"featureCategoryLabel": "Category",
"noFeatures": "No features",
"namePlaceholder": "Enter name",
"externalIdLabel": "External ID",
"externalIdPlaceholder": "Enter external ID",
Expand Down
13 changes: 4 additions & 9 deletions front/src/config/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
"event": "événement",
"noEventsInRange": "Aucuns évènements trouvés dans cette période."
},
"device": {
"noFeatures": "Aucune fonctionnalité"
},
"login": {
"title": "Gladys Assistant",
"welcome": "Bienvenue",
Expand Down Expand Up @@ -381,7 +384,6 @@
"title": "Appareils Bluetooth",
"search": "Chercher un appareil",
"noDevices": "Aucun appareil Bluetooth n'a encore été ajouté.",
"noFeatures": "Aucune fonctionnalité",
"nameLabel": "Nom de l'appareil",
"namePlaceholder": "Entrez le nom de votre appareil",
"roomLabel": "Pièce",
Expand All @@ -390,7 +392,6 @@
"modelLabel": "Modèle",
"presenceSensorLabel": "Utiliser cet appareil comme un détecteur de présence",
"featuresLabel": "Fonctionnalités",
"noFeatureDiscovered": "Aucune fonctionnalité détectée.",
"featureNamePlaceholder": "Nom de la fonctionnalité",
"saveButton": "Sauvegarder",
"deleteButton": "Supprimer",
Expand Down Expand Up @@ -560,7 +561,6 @@
"noNameLabel": "Pas de nom",
"roomLabel": "Pièce",
"featuresLabel": "Fonctionnalités",
"noFeatures": "Aucune fonctionnalité",
"search": "Recherche d'appareils",
"connectButton": "Connecter/Reconnecter",
"scanButton": "Recherche sur le réseau",
Expand Down Expand Up @@ -680,7 +680,6 @@
"nameLabel": "Nom",
"roomLabel": "Pièce",
"featuresLabel": "Fonctionnalités",
"noFeatures": "Pas de fonctionnalités",
"saveButton": "Sauvegarder",
"deleteButton": "Supprimer",
"editButton": "Editer",
Expand All @@ -702,7 +701,6 @@
"createDeviceInGladys": "Connecter dans Gladys",
"features": "Fonctionnalités",
"params": "Paramètre",
"noFeatures": "Aucune fonctionnalité",
"nodeId": "Noeud",
"zwaveNotConfiguredError": "Ce service Z-wave n'est pas configuré. Veuillez sélectionner le port USB où votre clé Z-Wave est branchée dans les paramètres.",
"createDeviceError": "Une erreur s'est produite lors de la création de cet appareil dans Gladys.",
Expand Down Expand Up @@ -772,7 +770,6 @@
"externalIdLabel": "ID externe",
"roomLabel": "Pièce",
"featuresLabel": "Fonctionnalités",
"noFeatures": "Aucune fonctionnalité",
"saveButton": "Sauvegarder",
"deleteButton": "Supprimer",
"returnButton": "Retour",
Expand Down Expand Up @@ -841,8 +838,7 @@
"featuresLabel": "Fonctionnalités",
"saveButton": "Sauvegarder",
"deleteButton": "Supprimer",
"editButton": "Editer les détails",
"noFeatures": "Aucune fonctionnalité"
"editButton": "Editer les détails"
},
"setup": {
"title": "Aucun appareil Xiaomi dans Gladys",
Expand Down Expand Up @@ -1717,7 +1713,6 @@
"roomLabel": "Pièce",
"featuresLabel": "Fonctionnalités",
"featureCategoryLabel": "Catégorie",
"noFeatures": "Aucune fonctionnalité",
"namePlaceholder": "Entrez un nom",
"externalIdLabel": "ID externe",
"externalIdPlaceholder": "Entrez une ID externe",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import get from 'get-value';
import { Link } from 'preact-router';

import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/constants';
import { RequestStatus, DeviceFeatureCategoriesIcon } from '../../../../../utils/consts';

import style from '../style.css';
import { RequestStatus } from '../../../../../utils/consts';
import BatteryLevelFeature from '../../../../../components/device/view/BatteryLevelFeature';
import DeviceFeatures from '../../../../../components/device/view/DeviceFeatures';

class BluetoothDevice extends Component {
refreshDeviceProperty = () => {
Expand Down Expand Up @@ -62,12 +62,7 @@ class BluetoothDevice extends Component {
{device.name}
{batteryLevel && (
<div class="page-options d-flex">
<div class="tag tag-green">
<Text id="global.percentValue" fields={{ value: batteryLevel }} />
<span class="tag-addon">
<i class="fe fe-battery" />
</span>
</div>
<BatteryLevelFeature batteryLevel={batteryLevel} />
</div>
)}
</div>
Expand Down Expand Up @@ -117,25 +112,7 @@ class BluetoothDevice extends Component {
<label>
<Text id="integration.bluetooth.device.featuresLabel" />
</label>
{device.features && (
<div class="tags">
{device.features.map(feature => (
<span class="tag">
<Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
<div class="tag-addon">
<i
class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`}
/>
</div>
</span>
))}
</div>
)}
{(!device.features || device.features.length === 0) && (
<div class={cx('text-center', 'font-italic', 'mt-3', style.featureListBody)}>
<Text id="integration.bluetooth.device.noFeatureDiscovered" />
</div>
)}
<DeviceFeatures features={device.features} />
</div>
<div class="form-group">
<button onClick={this.saveDevice} class="btn btn-success mr-2">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Text } from 'preact-i18n';
import get from 'get-value';

import { DeviceFeatureCategoriesIcon } from '../../../../../utils/consts';
import DeviceFeatures from '../../../../../components/device/view/DeviceFeatures';

const BluetoothPeripheralFeatures = ({ children, device }) => {
const { features = [] } = device;
Expand All @@ -11,26 +10,7 @@ const BluetoothPeripheralFeatures = ({ children, device }) => {
<label class="form-label">
<Text id="integration.bluetooth.device.featuresLabel" />
</label>
<div>
{features.length === 0 && (
<div class="text-center font-italic">
<Text id="integration.bluetooth.device.noFeatureDiscovered" />
</div>
)}
{features.length > 0 &&
(children || (
<div class="tags">
{features.map(feature => (
<span class="tag">
<Text id={`deviceFeatureCategory.${feature.category}.${feature.type}`} />
<div class="tag-addon">
<i class={`fe fe-${get(DeviceFeatureCategoriesIcon, `${feature.category}.${feature.type}`)}`} />
</div>
</span>
))}
</div>
))}
</div>
<div>{children || <DeviceFeatures features={features} />}</div>
</div>
);
};
Expand Down
4 changes: 0 additions & 4 deletions front/src/routes/integration/all/bluetooth/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,3 @@
.bluetoothListBody {
min-height: 200px;
}

.featureListBody {
min-height: 50px;
}
Loading

0 comments on commit 157c2aa

Please sign in to comment.