@opendash/plugin-openware
Version:
open.WARE Plugin for open.DASH
291 lines • 13.1 kB
JavaScript
import * as React from "react";
import { useState } from "react";
import produce from "immer";
import Parse from "parse";
import axios from "axios";
import { DatabaseOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { Table, Switch, Modal, Descriptions, Input, Button, Tooltip } from "antd";
import { SourcePicker, useSource, AdminLayout } from "opendash";
export default function SensorConfiguration(_a) {
var secure = _a.secure, host = _a.host;
var _b;
var requestServer = React.useMemo(function () {
return axios.create({
baseURL: "http" + (secure ? "s" : "") + "://" + host + "/api",
timeout: 10000,
headers: { "od-session": Parse.User.current().getSessionToken() },
});
}, []);
var source = useSource()[0];
var _c = useState({
items: {},
}), state = _c[0], setState = _c[1];
React.useEffect(function () {
setState(produce(state, function (draft) {
if (draft.items[source.tag]) {
draft.selectedItems = draft.items[source.tag].children;
}
}));
}, [source, (_b = state) === null || _b === void 0 ? void 0 : _b.items]);
React.useEffect(function () {
console.log("Requesting 'admin/sensors'");
requestServer.get("admin/sensors").then(function (res) {
console.log("hier", res);
var groupedItems = {};
res.data.forEach(function (item) {
var active = true;
if ("active" in item.meta) {
active = !!item.meta.active;
}
item.meta.active = active;
var visible = true;
if ("visible" in item.meta) {
visible = !!item.meta.visible;
}
item.meta.visible = visible;
var id_source = item.id;
if ("id_source" in item.meta) {
id_source = item.meta.id_source;
}
item.meta.id_source = id_source;
var source_source = item.user;
if ("source_source" in item.meta) {
source_source = item.meta.source_source;
}
item.meta.source_source = source_source;
if (!groupedItems[item.user]) {
groupedItems[item.user] = {};
groupedItems[item.user].children = [];
groupedItems[item.user].user = item.user;
}
groupedItems[item.user].children.push(item);
});
setState({
items: groupedItems,
});
});
}, []);
var updateItem = React.useCallback(function (id, newItem, deleteItem) {
if (deleteItem) {
requestServer
.delete("admin/sensors/" + newItem.meta.source_source + "/" + id)
.then(function (res) {
console.log(res);
});
return;
}
var update = produce(newItem, function (draft) {
draft.meta.id_source = id;
});
requestServer
.post("admin/sensors/" + newItem.user + "/" + id, [update])
.then(function (res) {
console.log(res);
setState(produce(function (draft) {
draft.items[source.tag].children = draft.items[source.tag].children.map(function (item) {
var itemid = item.meta["id_source"] || item.id;
if (itemid === id) {
return newItem;
}
return item;
});
draft.selectedItems = draft.items[source.tag].children;
}));
});
}, []);
return (React.createElement(AdminLayout, null,
React.createElement(SensorTable, { items: state, updateItem: updateItem })));
}
var SensorTable = function (props) {
var source = useSource()[0];
var _a = useState({}), detail = _a[0], setDetail = _a[1];
var items = props.items;
var updateItem = props.updateItem;
console.log(items);
var detailModal = "";
var modalClose = function () {
setDetail(produce(function (draft) {
delete draft.item;
}));
};
var modalSave = function (idsource, newItem, deleteItem) {
updateItem(idsource, newItem, deleteItem);
setDetail(produce(function (draft) {
delete draft.item;
}));
};
if (detail.item) {
detailModal = (React.createElement(SensorDetailModal, { item: detail.item, onClose: modalClose, onSave: modalSave }));
}
var columns = [
{
title: "Name",
dataIndex: "name",
width: "30%",
key: "name",
render: function (text, row, index) {
return (React.createElement("a", { onClick: function () {
console.log("click");
setDetail(produce(detail, function (draft) {
draft.item = row;
}));
} }, text));
},
},
{
title: "ID",
dataIndex: "id",
width: "30%",
key: "id",
},
{
title: "Zuordnung",
dataIndex: "user",
width: "20%",
key: "user",
},
{
title: (React.createElement(Tooltip, { title: "Werte des Sensors speichern" },
React.createElement(DatabaseOutlined, null))),
dataIndex: "active",
width: "5%",
key: "active",
render: function (text, row, index) {
var active = true;
if ("active" in row.meta) {
active = !!row.meta.active;
}
return (React.createElement(Switch, { checked: active, onChange: function (checked) {
var item = produce(row, function (draft) {
draft.meta.active = checked;
});
modalSave(row.meta.id_source, item);
} }));
},
},
{
title: (React.createElement(Tooltip, { title: "Sensor im Dashboard anzeigen" },
React.createElement(EyeOutlined, null))),
dataIndex: "visible",
width: "5%",
key: "visbile",
render: function (text, row, index) {
return (React.createElement(Switch, { checked: row.meta.visible, onChange: function (checked) {
var item = produce(row, function (draft) {
draft.meta.visible = checked;
});
modalSave(row.meta.id_source, item);
} }));
},
},
{
title: (React.createElement(Tooltip, { title: "Konfiguration zur\u00FCcksetzen" },
React.createElement(DeleteOutlined, null))),
dataIndex: "delete",
width: "5%",
key: "delete",
render: function (text, row, index) {
return (React.createElement(Button, { type: "danger", onClick: function () {
modalSave(row.meta.id_source, row, true);
} },
React.createElement(DeleteOutlined, null)));
},
},
];
return (React.createElement("div", null,
React.createElement(Table, { rowKey: "id", dataSource: items.selectedItems, columns: columns }),
detailModal));
};
var SensorDetailModal = function (props) {
var _a = useState(), source = _a[0], setSource = _a[1];
var _b = useState({ item: props.item }), mState = _b[0], setMState = _b[1];
React.useEffect(function () {
var _a;
if ((_a = source) === null || _a === void 0 ? void 0 : _a.tag) {
setMState(produce(mState, function (draft) {
draft.item.user = source.tag;
}));
}
}, [source]);
var close = props.onClose;
var save = function () {
props.onSave(mState.item.meta.id_source, mState.item);
};
var vTypes = [];
var checkStyle = { display: "block", marginBottom: "10px" };
var getEditableForKey = function (key) {
if (key === "user") {
return React.createElement(SourcePicker, { value: source, setItems: setSource });
}
else {
return (React.createElement(Input, { value: mState.item[key], onChange: function (e) {
setMState(produce(mState, function (draft) {
if (key === "id") {
draft.item.meta["id_source"] =
draft.item.meta["id_source"] || draft.item.id;
}
draft.item[key] = e.target.value;
}));
} }));
}
};
var getEditableForvType = function (index, key) {
return (React.createElement(Input, { value: mState.item.valueTypes[index][key], onChange: function (e) {
setMState(produce(mState, function (draft) {
draft.item.valueTypes[index][key] = e.target.value;
}));
} }));
};
console.log("item", mState.item);
mState.item.valueTypes.forEach(function (value, index) {
vTypes.push(React.createElement(Descriptions.Item, { key: index + "-name", label: "Name Wert " + (index + 1), span: 2 }, !mState.edit
? mState.item.valueTypes[index].name
: getEditableForvType(index, "name")));
vTypes.push(React.createElement(Descriptions.Item, { key: index + "-unit", label: "Einheit Wert " + (index + 1) }, !mState.edit
? mState.item.valueTypes[index].unit
: getEditableForvType(index, "unit")));
});
console.log("vtyoes", vTypes);
return (React.createElement(Modal, { title: 'Details von "' + mState.item.name + '" bearbeiten', verwalten: true, width: "75%", visible: true, onOk: save, onCancel: close },
React.createElement("div", { style: { border: "1px solid #e8e8e8", padding: "10px" } },
React.createElement("div", { className: "ant-descriptions-title" }, "Status"),
React.createElement("div", { style: checkStyle },
React.createElement(Switch, { checked: mState.item.meta.active, onChange: function (checked) {
setMState(produce(mState, function (draft) {
draft.item.meta.active = checked;
}));
} }),
React.createElement("strong", { style: { verticalAlign: "middle", marginLeft: "10px" } },
"Daten von ",
mState.item.name,
" speichern")),
React.createElement("div", { style: checkStyle },
React.createElement(Switch, { checked: mState.item.meta.visible, onChange: function (checked) {
setMState(produce(mState, function (draft) {
draft.item.meta.visible = checked;
}));
} }),
React.createElement("strong", { style: { verticalAlign: "middle", marginLeft: "10px" } }, "Datenquelle im Dashboard anzeigen"))),
React.createElement("div", { style: {
border: "1px solid #e8e8e8",
marginTop: "10px",
marginBottom: "10px",
padding: "10px",
} },
React.createElement("div", { style: {
display: "inline-block",
float: "right",
} },
React.createElement(Switch, { checked: mState.edit, onChange: function (checked) {
setMState(produce(mState, function (draft) {
draft.edit = checked;
}));
} }),
React.createElement("strong", { style: { verticalAlign: "middle", marginLeft: "10px" } }, "Details bearbeiten")),
React.createElement(Descriptions, { title: "Details", bordered: true },
React.createElement(Descriptions.Item, { label: "ID" }, !mState.edit ? mState.item.id : getEditableForKey("id")),
React.createElement(Descriptions.Item, { label: "Zurordnung" }, !mState.edit ? mState.item.user : getEditableForKey("user")),
React.createElement(Descriptions.Item, { label: "Name" }, !mState.edit ? mState.item.name : getEditableForKey("name")),
vTypes))));
};
//# sourceMappingURL=index.js.map