admin/31877
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: admin:master
Branches Tags
admin:master
admin:ai-dev
..
compare: admin:ai-dev
Branches Tags
admin:ai-dev
admin:master

1 Commits
master ... ai-dev

Author SHA1 Message Date
Flatlogic Bot
0bbc000dbf Updated via schema editor on 2025-06-02 13:54 2025-06-02 13:55:33 +00:00
41 changed files with 6626 additions and 509 deletions
Show Stats Expand all files Collapse all files

5
.gitignore vendored
View File

@ -1,3 +1,8 @@
node_modules/
*/node_modules/
*/build/
**/node_modules/
**/build/
.DS_Store
.env

7
app-shell/src/_schema.json
View File

File diff suppressed because one or more lines are too long

383
backend/src/db/api/settings.js Normal file
View File

@ -0,0 +1,383 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
const Utils = require('../utils');
const Sequelize = db.Sequelize;
const Op = Sequelize.Op;
module.exports = class SettingsDBApi {
static async create(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const settings = await db.settings.create(
{
id: data.id || undefined,
system_name: data.system_name || null,
location_text: data.location_text || null,
latitude: data.latitude || null,
longitude: data.longitude || null,
wifi_ssid: data.wifi_ssid || null,
wifi_password: data.wifi_password || null,
ip_mode: data.ip_mode || null,
ip_address: data.ip_address || null,
sensor_selector: data.sensor_selector || null,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
},
{ transaction },
);
return settings;
}
static async bulkImport(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
// Prepare data - wrapping individual data transformations in a map() method
const settingsData = data.map((item, index) => ({
id: item.id || undefined,
system_name: item.system_name || null,
location_text: item.location_text || null,
latitude: item.latitude || null,
longitude: item.longitude || null,
wifi_ssid: item.wifi_ssid || null,
wifi_password: item.wifi_password || null,
ip_mode: item.ip_mode || null,
ip_address: item.ip_address || null,
sensor_selector: item.sensor_selector || null,
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
createdAt: new Date(Date.now() + index * 1000),
}));
// Bulk create items
const settings = await db.settings.bulkCreate(settingsData, {
transaction,
});
// For each item created, replace relation files
return settings;
}
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const settings = await db.settings.findByPk(id, {}, { transaction });
const updatePayload = {};
if (data.system_name !== undefined)
updatePayload.system_name = data.system_name;
if (data.location_text !== undefined)
updatePayload.location_text = data.location_text;
if (data.latitude !== undefined) updatePayload.latitude = data.latitude;
if (data.longitude !== undefined) updatePayload.longitude = data.longitude;
if (data.wifi_ssid !== undefined) updatePayload.wifi_ssid = data.wifi_ssid;
if (data.wifi_password !== undefined)
updatePayload.wifi_password = data.wifi_password;
if (data.ip_mode !== undefined) updatePayload.ip_mode = data.ip_mode;
if (data.ip_address !== undefined)
updatePayload.ip_address = data.ip_address;
if (data.sensor_selector !== undefined)
updatePayload.sensor_selector = data.sensor_selector;
updatePayload.updatedById = currentUser.id;
await settings.update(updatePayload, { transaction });
return settings;
}
static async deleteByIds(ids, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const settings = await db.settings.findAll({
where: {
id: {
[Op.in]: ids,
},
},
transaction,
});
await db.sequelize.transaction(async (transaction) => {
for (const record of settings) {
await record.update({ deletedBy: currentUser.id }, { transaction });
}
for (const record of settings) {
await record.destroy({ transaction });
}
});
return settings;
}
static async remove(id, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const settings = await db.settings.findByPk(id, options);
await settings.update(
{
deletedBy: currentUser.id,
},
{
transaction,
},
);
await settings.destroy({
transaction,
});
return settings;
}
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const settings = await db.settings.findOne({ where }, { transaction });
if (!settings) {
return settings;
}
const output = settings.get({ plain: true });
return output;
}
static async findAll(filter, options) {
const limit = filter.limit || 0;
let offset = 0;
let where = {};
const currentPage = +filter.page;
offset = currentPage * limit;
const orderBy = null;
const transaction = (options && options.transaction) || undefined;
let include = [];
if (filter) {
if (filter.id) {
where = {
...where,
['id']: Utils.uuid(filter.id),
};
}
if (filter.system_name) {
where = {
...where,
[Op.and]: Utils.ilike('settings', 'system_name', filter.system_name),
};
}
if (filter.location_text) {
where = {
...where,
[Op.and]: Utils.ilike(
'settings',
'location_text',
filter.location_text,
),
};
}
if (filter.wifi_ssid) {
where = {
...where,
[Op.and]: Utils.ilike('settings', 'wifi_ssid', filter.wifi_ssid),
};
}
if (filter.wifi_password) {
where = {
...where,
[Op.and]: Utils.ilike(
'settings',
'wifi_password',
filter.wifi_password,
),
};
}
if (filter.ip_address) {
where = {
...where,
[Op.and]: Utils.ilike('settings', 'ip_address', filter.ip_address),
};
}
if (filter.latitudeRange) {
const [start, end] = filter.latitudeRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
latitude: {
...where.latitude,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
latitude: {
...where.latitude,
[Op.lte]: end,
},
};
}
}
if (filter.longitudeRange) {
const [start, end] = filter.longitudeRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
longitude: {
...where.longitude,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
longitude: {
...where.longitude,
[Op.lte]: end,
},
};
}
}
if (filter.active !== undefined) {
where = {
...where,
active: filter.active === true || filter.active === 'true',
};
}
if (filter.ip_mode) {
where = {
...where,
ip_mode: filter.ip_mode,
};
}
if (filter.sensor_selector) {
where = {
...where,
sensor_selector: filter.sensor_selector,
};
}
if (filter.createdAtRange) {
const [start, end] = filter.createdAtRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.lte]: end,
},
};
}
}
}
const queryOptions = {
where,
include,
distinct: true,
order:
filter.field && filter.sort
? [[filter.field, filter.sort]]
: [['createdAt', 'desc']],
transaction: options?.transaction,
logging: console.log,
};
if (!options?.countOnly) {
queryOptions.limit = limit ? Number(limit) : undefined;
queryOptions.offset = offset ? Number(offset) : undefined;
}
try {
const { rows, count } = await db.settings.findAndCountAll(queryOptions);
return {
rows: options?.countOnly ? [] : rows,
count: count,
};
} catch (error) {
console.error('Error executing query:', error);
throw error;
}
}
static async findAllAutocomplete(query, limit, offset) {
let where = {};
if (query) {
where = {
[Op.or]: [
{ ['id']: Utils.uuid(query) },
Utils.ilike('settings', 'system_name', query),
],
};
}
const records = await db.settings.findAll({
attributes: ['id', 'system_name'],
where,
limit: limit ? Number(limit) : undefined,
offset: offset ? Number(offset) : undefined,
orderBy: [['system_name', 'ASC']],
});
return records.map((record) => ({
id: record.id,
label: record.system_name,
}));
}
};

304
backend/src/db/api/status.js Normal file
View File

@ -0,0 +1,304 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
const Utils = require('../utils');
const Sequelize = db.Sequelize;
const Op = Sequelize.Op;
module.exports = class StatusDBApi {
static async create(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const status = await db.status.create(
{
id: data.id || undefined,
wifi_status: data.wifi_status || null,
wifi_strength: data.wifi_strength || null,
sensor_status: data.sensor_status || false,
thingsboard_status: data.thingsboard_status || false,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
},
{ transaction },
);
return status;
}
static async bulkImport(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
// Prepare data - wrapping individual data transformations in a map() method
const statusData = data.map((item, index) => ({
id: item.id || undefined,
wifi_status: item.wifi_status || null,
wifi_strength: item.wifi_strength || null,
sensor_status: item.sensor_status || false,
thingsboard_status: item.thingsboard_status || false,
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
createdAt: new Date(Date.now() + index * 1000),
}));
// Bulk create items
const status = await db.status.bulkCreate(statusData, { transaction });
// For each item created, replace relation files
return status;
}
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const status = await db.status.findByPk(id, {}, { transaction });
const updatePayload = {};
if (data.wifi_status !== undefined)
updatePayload.wifi_status = data.wifi_status;
if (data.wifi_strength !== undefined)
updatePayload.wifi_strength = data.wifi_strength;
if (data.sensor_status !== undefined)
updatePayload.sensor_status = data.sensor_status;
if (data.thingsboard_status !== undefined)
updatePayload.thingsboard_status = data.thingsboard_status;
updatePayload.updatedById = currentUser.id;
await status.update(updatePayload, { transaction });
return status;
}
static async deleteByIds(ids, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const status = await db.status.findAll({
where: {
id: {
[Op.in]: ids,
},
},
transaction,
});
await db.sequelize.transaction(async (transaction) => {
for (const record of status) {
await record.update({ deletedBy: currentUser.id }, { transaction });
}
for (const record of status) {
await record.destroy({ transaction });
}
});
return status;
}
static async remove(id, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const status = await db.status.findByPk(id, options);
await status.update(
{
deletedBy: currentUser.id,
},
{
transaction,
},
);
await status.destroy({
transaction,
});
return status;
}
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const status = await db.status.findOne({ where }, { transaction });
if (!status) {
return status;
}
const output = status.get({ plain: true });
return output;
}
static async findAll(filter, options) {
const limit = filter.limit || 0;
let offset = 0;
let where = {};
const currentPage = +filter.page;
offset = currentPage * limit;
const orderBy = null;
const transaction = (options && options.transaction) || undefined;
let include = [];
if (filter) {
if (filter.id) {
where = {
...where,
['id']: Utils.uuid(filter.id),
};
}
if (filter.wifi_status) {
where = {
...where,
[Op.and]: Utils.ilike('status', 'wifi_status', filter.wifi_status),
};
}
if (filter.wifi_strengthRange) {
const [start, end] = filter.wifi_strengthRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
wifi_strength: {
...where.wifi_strength,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
wifi_strength: {
...where.wifi_strength,
[Op.lte]: end,
},
};
}
}
if (filter.active !== undefined) {
where = {
...where,
active: filter.active === true || filter.active === 'true',
};
}
if (filter.sensor_status) {
where = {
...where,
sensor_status: filter.sensor_status,
};
}
if (filter.thingsboard_status) {
where = {
...where,
thingsboard_status: filter.thingsboard_status,
};
}
if (filter.createdAtRange) {
const [start, end] = filter.createdAtRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.lte]: end,
},
};
}
}
}
const queryOptions = {
where,
include,
distinct: true,
order:
filter.field && filter.sort
? [[filter.field, filter.sort]]
: [['createdAt', 'desc']],
transaction: options?.transaction,
logging: console.log,
};
if (!options?.countOnly) {
queryOptions.limit = limit ? Number(limit) : undefined;
queryOptions.offset = offset ? Number(offset) : undefined;
}
try {
const { rows, count } = await db.status.findAndCountAll(queryOptions);
return {
rows: options?.countOnly ? [] : rows,
count: count,
};
} catch (error) {
console.error('Error executing query:', error);
throw error;
}
}
static async findAllAutocomplete(query, limit, offset) {
let where = {};
if (query) {
where = {
[Op.or]: [
{ ['id']: Utils.uuid(query) },
Utils.ilike('status', 'wifi_status', query),
],
};
}
const records = await db.status.findAll({
attributes: ['id', 'wifi_status'],
where,
limit: limit ? Number(limit) : undefined,
offset: offset ? Number(offset) : undefined,
orderBy: [['wifi_status', 'ASC']],
});
return records.map((record) => ({
id: record.id,
label: record.wifi_status,
}));
}
};

52
backend/src/db/migrations/1748872417660.js Normal file
View File

@ -0,0 +1,52 @@
module.exports = {
/**
* @param {QueryInterface} queryInterface
* @param {Sequelize} Sequelize
* @returns {Promise<void>}
*/
async up(queryInterface, Sequelize) {
/**
* @type {Transaction}
*/
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.renameTable('system_settings', 'settings', {
transaction,
});
await queryInterface.renameTable('system_status', 'status', {
transaction,
});
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
/**
* @param {QueryInterface} queryInterface
* @param {Sequelize} Sequelize
* @returns {Promise<void>}
*/
async down(queryInterface, Sequelize) {
/**
* @type {Transaction}
*/
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.renameTable('status', 'system_status', {
transaction,
});
await queryInterface.renameTable('settings', 'system_settings', {
transaction,
});
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
};

85
backend/src/db/models/settings.js Normal file
View File

@ -0,0 +1,85 @@
const config = require('../../config');
const providers = config.providers;
const crypto = require('crypto');
const bcrypt = require('bcrypt');
const moment = require('moment');
module.exports = function (sequelize, DataTypes) {
const settings = sequelize.define(
'settings',
{
id: {
type: DataTypes.UUID,
defaultValue: DataTypes.UUIDV4,
primaryKey: true,
},
system_name: {
type: DataTypes.TEXT,
},
location_text: {
type: DataTypes.TEXT,
},
latitude: {
type: DataTypes.DECIMAL,
},
longitude: {
type: DataTypes.DECIMAL,
},
wifi_ssid: {
type: DataTypes.TEXT,
},
wifi_password: {
type: DataTypes.TEXT,
},
ip_mode: {
type: DataTypes.ENUM,
values: ['static', 'dhcp'],
},
ip_address: {
type: DataTypes.TEXT,
},
sensor_selector: {
type: DataTypes.ENUM,
values: ['none', 'DHT11', 'DHT22', 'DS18B20'],
},
importHash: {
type: DataTypes.STRING(255),
allowNull: true,
unique: true,
},
},
{
timestamps: true,
paranoid: true,
freezeTableName: true,
},
);
settings.associate = (db) => {
/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
//end loop
db.settings.belongsTo(db.users, {
as: 'createdBy',
});
db.settings.belongsTo(db.users, {
as: 'updatedBy',
});
};
return settings;
};

67
backend/src/db/models/status.js Normal file
View File

@ -0,0 +1,67 @@
const config = require('../../config');
const providers = config.providers;
const crypto = require('crypto');
const bcrypt = require('bcrypt');
const moment = require('moment');
module.exports = function (sequelize, DataTypes) {
const status = sequelize.define(
'status',
{
id: {
type: DataTypes.UUID,
defaultValue: DataTypes.UUIDV4,
primaryKey: true,
},
wifi_status: {
type: DataTypes.TEXT,
},
wifi_strength: {
type: DataTypes.INTEGER,
},
sensor_status: {
type: DataTypes.BOOLEAN,
allowNull: false,
defaultValue: false,
},
thingsboard_status: {
type: DataTypes.BOOLEAN,
allowNull: false,
defaultValue: false,
},
importHash: {
type: DataTypes.STRING(255),
allowNull: true,
unique: true,
},
},
{
timestamps: true,
paranoid: true,
freezeTableName: true,
},
);
status.associate = (db) => {
/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
//end loop
db.status.belongsTo(db.users, {
as: 'createdBy',
});
db.status.belongsTo(db.users, {
as: 'updatedBy',
});
};
return status;
};

220
backend/src/db/seeders/20200430130760-user-roles.js
View File

@ -85,10 +85,10 @@ module.exports = {
const entities = [
'users',
'integrations',
'status',
'sensors',
'system_settings',
'system_status',
'integrations',
'settings',
'roles',
'permissions',
,
@ -202,83 +202,6 @@ primary key ("roles_permissionsId", "permissionId")
permissionId: getId('CREATE_USERS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('UPDATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('DELETE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('DataViewer'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('DataViewer'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('GuestUser'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
@ -367,168 +290,77 @@ primary key ("roles_permissionsId", "permissionId")
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('CREATE_SYSTEM_SETTINGS'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('READ_SYSTEM_SETTINGS'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
permissionId: getId('UPDATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('DELETE_SYSTEM_SETTINGS'),
permissionId: getId('DELETE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('CREATE_SYSTEM_SETTINGS'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('READ_SYSTEM_SETTINGS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('CREATE_SYSTEM_SETTINGS'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('READ_SYSTEM_SETTINGS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('DataViewer'),
permissionId: getId('CREATE_SYSTEM_SETTINGS'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('DataViewer'),
permissionId: getId('READ_SYSTEM_SETTINGS'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('GuestUser'),
permissionId: getId('CREATE_SYSTEM_SETTINGS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('CREATE_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('READ_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('UPDATE_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('HiveMaster'),
permissionId: getId('DELETE_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('CREATE_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('BeeKeeper'),
permissionId: getId('READ_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('CREATE_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('TechSpecialist'),
permissionId: getId('READ_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('DataViewer'),
permissionId: getId('CREATE_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('DataViewer'),
permissionId: getId('READ_SYSTEM_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('GuestUser'),
permissionId: getId('CREATE_SYSTEM_STATUS'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
@ -595,25 +427,25 @@ primary key ("roles_permissionsId", "permissionId")
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('CREATE_INTEGRATIONS'),
permissionId: getId('CREATE_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('READ_INTEGRATIONS'),
permissionId: getId('READ_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('UPDATE_INTEGRATIONS'),
permissionId: getId('UPDATE_STATUS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('DELETE_INTEGRATIONS'),
permissionId: getId('DELETE_STATUS'),
},
{
@ -645,50 +477,50 @@ primary key ("roles_permissionsId", "permissionId")
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('CREATE_SYSTEM_SETTINGS'),
permissionId: getId('CREATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('READ_SYSTEM_SETTINGS'),
permissionId: getId('READ_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
permissionId: getId('UPDATE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('DELETE_SYSTEM_SETTINGS'),
permissionId: getId('DELETE_INTEGRATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('CREATE_SYSTEM_STATUS'),
permissionId: getId('CREATE_SETTINGS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('READ_SYSTEM_STATUS'),
permissionId: getId('READ_SETTINGS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('UPDATE_SYSTEM_STATUS'),
permissionId: getId('UPDATE_SETTINGS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('DELETE_SYSTEM_STATUS'),
permissionId: getId('DELETE_SETTINGS'),
},
{

324
backend/src/db/seeders/20231127130745-sample-data.js
View File

@ -1,13 +1,77 @@
const db = require('../models');
const Users = db.users;
const Integrations = db.integrations;
const Status = db.status;
const Sensors = db.sensors;
const SystemSettings = db.system_settings;
const Integrations = db.integrations;
const SystemStatus = db.system_status;
const Settings = db.settings;
const StatusData = [
{
wifi_status: 'Gregor Mendel',
wifi_strength: 1,
sensor_status: true,
thingsboard_status: false,
},
{
wifi_status: 'Werner Heisenberg',
wifi_strength: 3,
sensor_status: false,
thingsboard_status: false,
},
{
wifi_status: 'Max Born',
wifi_strength: 3,
sensor_status: false,
thingsboard_status: false,
},
];
const SensorsData = [
{
name: 'Left Scale',
type: 'scale',
value: 12.5,
last_updated: new Date('2023-10-01T10:00:00Z'),
},
{
name: 'Right Scale',
type: 'temperature',
value: 13,
last_updated: new Date('2023-10-01T10:05:00Z'),
},
{
name: 'Temperature Sensor',
type: 'humidity',
value: 25.3,
last_updated: new Date('2023-10-01T10:10:00Z'),
},
];
const IntegrationsData = [
{
@ -23,7 +87,7 @@ const IntegrationsData = [
},
{
connection_status: false,
connection_status: true,
customer_id: 'cust456',
@ -45,249 +109,81 @@ const IntegrationsData = [
thingsboard_key: 'key789',
},
{
connection_status: true,
customer_id: 'cust012',
server_address: 'thingsboard.example.co',
provision_secret: 'secret012',
thingsboard_key: 'key012',
},
{
connection_status: true,
customer_id: 'cust345',
server_address: 'thingsboard.example.io',
provision_secret: 'secret345',
thingsboard_key: 'key345',
},
];
const SensorsData = [
const SettingsData = [
{
name: 'Left Scale',
system_name: 'Jean Baptiste Lamarck',
type: 'scale',
location_text: 'Johannes Kepler',
value: 12.5,
latitude: 80.25,
last_updated: new Date('2023-10-01T10:00:00Z'),
longitude: 72.91,
wifi_ssid: 'Thomas Hunt Morgan',
wifi_password: 'Michael Faraday',
ip_mode: 'static',
ip_address: 'August Kekule',
sensor_selector: 'DS18B20',
},
{
name: 'Right Scale',
system_name: 'Jonas Salk',
type: 'scale',
location_text: 'Louis Victor de Broglie',
value: 13,
latitude: 91.51,
last_updated: new Date('2023-10-01T10:05:00Z'),
longitude: 12.35,
wifi_ssid: 'Murray Gell-Mann',
wifi_password: 'Albert Einstein',
ip_mode: 'static',
ip_address: 'Isaac Newton',
sensor_selector: 'DHT22',
},
{
name: 'Temperature Sensor',
system_name: 'Louis Victor de Broglie',
type: 'humidity',
location_text: 'Dmitri Mendeleev',
value: 25.3,
latitude: 47.18,
last_updated: new Date('2023-10-01T10:10:00Z'),
},
longitude: 19.03,
{
name: 'Humidity Sensor',
wifi_ssid: 'Ludwig Boltzmann',
type: 'temperature',
value: 60.2,
last_updated: new Date('2023-10-01T10:15:00Z'),
},
{
name: 'Backup Scale',
type: 'scale',
value: 11.8,
last_updated: new Date('2023-10-01T10:20:00Z'),
},
];
const SystemSettingsData = [
{
system_name: 'Hive Monitor 1',
location_text: 'Garden Apiary',
latitude: 34.0522,
longitude: -118.2437,
wifi_ssid: 'BeehiveNet',
wifi_password: 'securepassword',
wifi_password: 'Ernest Rutherford',
ip_mode: 'dhcp',
ip_address: '192.168.1.10',
ip_address: 'Andreas Vesalius',
sensor_selector: 'none',
},
{
system_name: 'Hive Monitor 2',
location_text: 'Rooftop Apiary',
latitude: 40.7128,
longitude: -74.006,
wifi_ssid: 'HiveNetwork',
wifi_password: 'anotherpassword',
ip_mode: 'static',
ip_address: '192.168.1.11',
sensor_selector: 'DHT11',
},
{
system_name: 'Hive Monitor 3',
location_text: 'Field Apiary',
latitude: 51.5074,
longitude: -0.1278,
wifi_ssid: 'FieldNet',
wifi_password: 'fieldpassword',
ip_mode: 'static',
ip_address: '192.168.1.12',
sensor_selector: 'DHT11',
},
{
system_name: 'Hive Monitor 4',
location_text: 'Forest Apiary',
latitude: 48.8566,
longitude: 2.3522,
wifi_ssid: 'ForestNet',
wifi_password: 'forestpassword',
ip_mode: 'static',
ip_address: '192.168.1.13',
sensor_selector: 'DHT11',
},
{
system_name: 'Hive Monitor 5',
location_text: 'Urban Apiary',
latitude: 35.6895,
longitude: 139.6917,
wifi_ssid: 'UrbanNet',
wifi_password: 'urbanpassword',
ip_mode: 'static',
ip_address: '192.168.1.14',
sensor_selector: 'DHT11',
},
];
const SystemStatusData = [
{
wifi_status: 'Connected',
wifi_strength: 75,
sensor_status: true,
thingsboard_status: true,
},
{
wifi_status: 'Disconnected',
wifi_strength: 0,
sensor_status: false,
thingsboard_status: false,
},
{
wifi_status: 'Connected',
wifi_strength: 85,
sensor_status: true,
thingsboard_status: true,
},
{
wifi_status: 'Connected',
wifi_strength: 65,
sensor_status: true,
thingsboard_status: true,
},
{
wifi_status: 'Disconnected',
wifi_strength: 0,
sensor_status: false,
thingsboard_status: true,
},
];
// Similar logic for "relation_many"
module.exports = {
up: async (queryInterface, Sequelize) => {
await Integrations.bulkCreate(IntegrationsData);
await Status.bulkCreate(StatusData);
await Sensors.bulkCreate(SensorsData);
await SystemSettings.bulkCreate(SystemSettingsData);
await Integrations.bulkCreate(IntegrationsData);
await SystemStatus.bulkCreate(SystemStatusData);
await Settings.bulkCreate(SettingsData);
await Promise.all([
// Similar logic for "relation_many"
@ -295,12 +191,12 @@ module.exports = {
},
down: async (queryInterface, Sequelize) => {
await queryInterface.bulkDelete('integrations', null, {});
await queryInterface.bulkDelete('status', null, {});
await queryInterface.bulkDelete('sensors', null, {});
await queryInterface.bulkDelete('system_settings', null, {});
await queryInterface.bulkDelete('integrations', null, {});
await queryInterface.bulkDelete('system_status', null, {});
await queryInterface.bulkDelete('settings', null, {});
},
};

103
backend/src/db/seeders/20250602135337.js Normal file
View File

@ -0,0 +1,103 @@
const { v4: uuid } = require('uuid');
const db = require('../models');
const Sequelize = require('sequelize');
const config = require('../../config');
module.exports = {
/**
* @param{import("sequelize").QueryInterface} queryInterface
* @return {Promise<void>}
*/
async up(queryInterface) {
const createdAt = new Date();
const updatedAt = new Date();
/** @type {Map<string, string>} */
const idMap = new Map();
/**
* @param {string} key
* @return {string}
*/
function getId(key) {
if (idMap.has(key)) {
return idMap.get(key);
}
const id = uuid();
idMap.set(key, id);
return id;
}
/**
* @param {string} name
*/
function createPermissions(name) {
return [
{
id: getId(`CREATE_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `CREATE_${name.toUpperCase()}`,
},
{
id: getId(`READ_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `READ_${name.toUpperCase()}`,
},
{
id: getId(`UPDATE_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `UPDATE_${name.toUpperCase()}`,
},
{
id: getId(`DELETE_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `DELETE_${name.toUpperCase()}`,
},
];
}
const entities = ['settings', 'status'];
const previousValues = ['system_settings', 'system_status'];
const createdPreviousPermissions =
previousValues.flatMap(createPermissions);
const namesPreviousPermissions = createdPreviousPermissions.map(
(p) => p.name,
);
const createdPermissions = entities.flatMap(createPermissions);
// Add permissions to database
await queryInterface.bulkInsert('permissions', createdPermissions);
// Get permissions ids
const permissionsIds = createdPermissions.map((p) => p.id);
// Get admin role
const adminRole = await db.roles.findOne({
where: { name: config.roles.admin },
});
if (adminRole) {
// Add permissions to admin role if it exists
await adminRole.addPermissions(permissionsIds);
}
// Remove previous permissions
await db.permissions.destroy({
where: {
name: {
[Sequelize.Op.in]: namesPreviousPermissions,
},
},
});
},
down: async (queryInterface, Sequelize) => {
await queryInterface.bulkDelete(
'permissions',
entities.flatMap(createPermissions),
);
},
};

18
backend/src/index.js
View File

@ -19,13 +19,13 @@ const openaiRoutes = require('./routes/openai');
const usersRoutes = require('./routes/users');
const integrationsRoutes = require('./routes/integrations');
const statusRoutes = require('./routes/status');
const sensorsRoutes = require('./routes/sensors');
const system_settingsRoutes = require('./routes/system_settings');
const integrationsRoutes = require('./routes/integrations');
const system_statusRoutes = require('./routes/system_status');
const settingsRoutes = require('./routes/settings');
const rolesRoutes = require('./routes/roles');
@ -103,9 +103,9 @@ app.use(
);
app.use(
'/api/integrations',
'/api/status',
passport.authenticate('jwt', { session: false }),
integrationsRoutes,
statusRoutes,
);
app.use(
@ -115,15 +115,15 @@ app.use(
);
app.use(
'/api/system_settings',
'/api/integrations',
passport.authenticate('jwt', { session: false }),
system_settingsRoutes,
integrationsRoutes,
);
app.use(
'/api/system_status',
'/api/settings',
passport.authenticate('jwt', { session: false }),
system_statusRoutes,
settingsRoutes,
);
app.use(

469
backend/src/routes/settings.js Normal file
View File

@ -0,0 +1,469 @@
const express = require('express');
const SettingsService = require('../services/settings');
const SettingsDBApi = require('../db/api/settings');
const wrapAsync = require('../helpers').wrapAsync;
const router = express.Router();
const { parse } = require('json2csv');
const { checkCrudPermissions } = require('../middlewares/check-permissions');
router.use(checkCrudPermissions('settings'));
/**
* @swagger
* components:
* schemas:
* Settings:
* type: object
* properties:
* system_name:
* type: string
* default: system_name
* location_text:
* type: string
* default: location_text
* wifi_ssid:
* type: string
* default: wifi_ssid
* wifi_password:
* type: string
* default: wifi_password
* ip_address:
* type: string
* default: ip_address
* latitude:
* type: integer
* format: int64
* longitude:
* type: integer
* format: int64
*
*
*/
/**
* @swagger
* tags:
* name: Settings
* description: The Settings managing API
*/
/**
* @swagger
* /api/settings:
* post:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Add new item
* description: Add new item
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* data:
* description: Data of the updated item
* type: object
* $ref: "#/components/schemas/Settings"
* responses:
* 200:
* description: The item was successfully added
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Settings"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 405:
* description: Invalid input data
* 500:
* description: Some server error
*/
router.post(
'/',
wrapAsync(async (req, res) => {
const referer =
req.headers.referer ||
`${req.protocol}://${req.hostname}${req.originalUrl}`;
const link = new URL(referer);
await SettingsService.create(
req.body.data,
req.currentUser,
true,
link.host,
);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/budgets/bulk-import:
* post:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Bulk import items
* description: Bulk import items
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* data:
* description: Data of the updated items
* type: array
* items:
* $ref: "#/components/schemas/Settings"
* responses:
* 200:
* description: The items were successfully imported
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Settings"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 405:
* description: Invalid input data
* 500:
* description: Some server error
*
*/
router.post(
'/bulk-import',
wrapAsync(async (req, res) => {
const referer =
req.headers.referer ||
`${req.protocol}://${req.hostname}${req.originalUrl}`;
const link = new URL(referer);
await SettingsService.bulkImport(req, res, true, link.host);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/settings/{id}:
* put:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Update the data of the selected item
* description: Update the data of the selected item
* parameters:
* - in: path
* name: id
* description: Item ID to update
* required: true
* schema:
* type: string
* requestBody:
* description: Set new item data
* required: true
* content:
* application/json:
* schema:
* properties:
* id:
* description: ID of the updated item
* type: string
* data:
* description: Data of the updated item
* type: object
* $ref: "#/components/schemas/Settings"
* required:
* - id
* responses:
* 200:
* description: The item data was successfully updated
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Settings"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.put(
'/:id',
wrapAsync(async (req, res) => {
await SettingsService.update(req.body.data, req.body.id, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/settings/{id}:
* delete:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Delete the selected item
* description: Delete the selected item
* parameters:
* - in: path
* name: id
* description: Item ID to delete
* required: true
* schema:
* type: string
* responses:
* 200:
* description: The item was successfully deleted
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Settings"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.delete(
'/:id',
wrapAsync(async (req, res) => {
await SettingsService.remove(req.params.id, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/settings/deleteByIds:
* post:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Delete the selected item list
* description: Delete the selected item list
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* ids:
* description: IDs of the updated items
* type: array
* responses:
* 200:
* description: The items was successfully deleted
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Settings"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Items not found
* 500:
* description: Some server error
*/
router.post(
'/deleteByIds',
wrapAsync(async (req, res) => {
await SettingsService.deleteByIds(req.body.data, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/settings:
* get:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Get all settings
* description: Get all settings
* responses:
* 200:
* description: Settings list successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Settings"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get(
'/',
wrapAsync(async (req, res) => {
const filetype = req.query.filetype;
const currentUser = req.currentUser;
const payload = await SettingsDBApi.findAll(req.query, { currentUser });
if (filetype && filetype === 'csv') {
const fields = [
'id',
'system_name',
'location_text',
'wifi_ssid',
'wifi_password',
'ip_address',
'latitude',
'longitude',
];
const opts = { fields };
try {
const csv = parse(payload.rows, opts);
res.status(200).attachment(csv);
res.send(csv);
} catch (err) {
console.error(err);
}
} else {
res.status(200).send(payload);
}
}),
);
/**
* @swagger
* /api/settings/count:
* get:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Count all settings
* description: Count all settings
* responses:
* 200:
* description: Settings count successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Settings"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get(
'/count',
wrapAsync(async (req, res) => {
const currentUser = req.currentUser;
const payload = await SettingsDBApi.findAll(req.query, null, {
countOnly: true,
currentUser,
});
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/settings/autocomplete:
* get:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Find all settings that match search criteria
* description: Find all settings that match search criteria
* responses:
* 200:
* description: Settings list successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Settings"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get('/autocomplete', async (req, res) => {
const payload = await SettingsDBApi.findAllAutocomplete(
req.query.query,
req.query.limit,
req.query.offset,
);
res.status(200).send(payload);
});
/**
* @swagger
* /api/settings/{id}:
* get:
* security:
* - bearerAuth: []
* tags: [Settings]
* summary: Get selected item
* description: Get selected item
* parameters:
* - in: path
* name: id
* description: ID of item to get
* required: true
* schema:
* type: string
* responses:
* 200:
* description: Selected item successfully received
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Settings"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.get(
'/:id',
wrapAsync(async (req, res) => {
const payload = await SettingsDBApi.findBy({ id: req.params.id });
res.status(200).send(payload);
}),
);
router.use('/', require('../helpers').commonErrorHandler);
module.exports = router;

437
backend/src/routes/status.js Normal file
View File

@ -0,0 +1,437 @@
const express = require('express');
const StatusService = require('../services/status');
const StatusDBApi = require('../db/api/status');
const wrapAsync = require('../helpers').wrapAsync;
const router = express.Router();
const { parse } = require('json2csv');
const { checkCrudPermissions } = require('../middlewares/check-permissions');
router.use(checkCrudPermissions('status'));
/**
* @swagger
* components:
* schemas:
* Status:
* type: object
* properties:
* wifi_status:
* type: string
* default: wifi_status
* wifi_strength:
* type: integer
* format: int64
*/
/**
* @swagger
* tags:
* name: Status
* description: The Status managing API
*/
/**
* @swagger
* /api/status:
* post:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Add new item
* description: Add new item
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* data:
* description: Data of the updated item
* type: object
* $ref: "#/components/schemas/Status"
* responses:
* 200:
* description: The item was successfully added
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Status"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 405:
* description: Invalid input data
* 500:
* description: Some server error
*/
router.post(
'/',
wrapAsync(async (req, res) => {
const referer =
req.headers.referer ||
`${req.protocol}://${req.hostname}${req.originalUrl}`;
const link = new URL(referer);
await StatusService.create(req.body.data, req.currentUser, true, link.host);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/budgets/bulk-import:
* post:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Bulk import items
* description: Bulk import items
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* data:
* description: Data of the updated items
* type: array
* items:
* $ref: "#/components/schemas/Status"
* responses:
* 200:
* description: The items were successfully imported
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Status"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 405:
* description: Invalid input data
* 500:
* description: Some server error
*
*/
router.post(
'/bulk-import',
wrapAsync(async (req, res) => {
const referer =
req.headers.referer ||
`${req.protocol}://${req.hostname}${req.originalUrl}`;
const link = new URL(referer);
await StatusService.bulkImport(req, res, true, link.host);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/status/{id}:
* put:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Update the data of the selected item
* description: Update the data of the selected item
* parameters:
* - in: path
* name: id
* description: Item ID to update
* required: true
* schema:
* type: string
* requestBody:
* description: Set new item data
* required: true
* content:
* application/json:
* schema:
* properties:
* id:
* description: ID of the updated item
* type: string
* data:
* description: Data of the updated item
* type: object
* $ref: "#/components/schemas/Status"
* required:
* - id
* responses:
* 200:
* description: The item data was successfully updated
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Status"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.put(
'/:id',
wrapAsync(async (req, res) => {
await StatusService.update(req.body.data, req.body.id, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/status/{id}:
* delete:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Delete the selected item
* description: Delete the selected item
* parameters:
* - in: path
* name: id
* description: Item ID to delete
* required: true
* schema:
* type: string
* responses:
* 200:
* description: The item was successfully deleted
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Status"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.delete(
'/:id',
wrapAsync(async (req, res) => {
await StatusService.remove(req.params.id, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/status/deleteByIds:
* post:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Delete the selected item list
* description: Delete the selected item list
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* ids:
* description: IDs of the updated items
* type: array
* responses:
* 200:
* description: The items was successfully deleted
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Status"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Items not found
* 500:
* description: Some server error
*/
router.post(
'/deleteByIds',
wrapAsync(async (req, res) => {
await StatusService.deleteByIds(req.body.data, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/status:
* get:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Get all status
* description: Get all status
* responses:
* 200:
* description: Status list successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Status"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get(
'/',
wrapAsync(async (req, res) => {
const filetype = req.query.filetype;
const currentUser = req.currentUser;
const payload = await StatusDBApi.findAll(req.query, { currentUser });
if (filetype && filetype === 'csv') {
const fields = ['id', 'wifi_status', 'wifi_strength'];
const opts = { fields };
try {
const csv = parse(payload.rows, opts);
res.status(200).attachment(csv);
res.send(csv);
} catch (err) {
console.error(err);
}
} else {
res.status(200).send(payload);
}
}),
);
/**
* @swagger
* /api/status/count:
* get:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Count all status
* description: Count all status
* responses:
* 200:
* description: Status count successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Status"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get(
'/count',
wrapAsync(async (req, res) => {
const currentUser = req.currentUser;
const payload = await StatusDBApi.findAll(req.query, null, {
countOnly: true,
currentUser,
});
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/status/autocomplete:
* get:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Find all status that match search criteria
* description: Find all status that match search criteria
* responses:
* 200:
* description: Status list successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Status"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get('/autocomplete', async (req, res) => {
const payload = await StatusDBApi.findAllAutocomplete(
req.query.query,
req.query.limit,
req.query.offset,
);
res.status(200).send(payload);
});
/**
* @swagger
* /api/status/{id}:
* get:
* security:
* - bearerAuth: []
* tags: [Status]
* summary: Get selected item
* description: Get selected item
* parameters:
* - in: path
* name: id
* description: ID of item to get
* required: true
* schema:
* type: string
* responses:
* 200:
* description: Selected item successfully received
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Status"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.get(
'/:id',
wrapAsync(async (req, res) => {
const payload = await StatusDBApi.findBy({ id: req.params.id });
res.status(200).send(payload);
}),
);
router.use('/', require('../helpers').commonErrorHandler);
module.exports = router;

16
backend/src/services/search.js
View File

@ -43,6 +43,10 @@ module.exports = class SearchService {
const tableColumns = {
users: ['firstName', 'lastName', 'phoneNumber', 'email'],
status: ['wifi_status'],
sensors: ['name'],
integrations: [
'customer_id',
@ -53,9 +57,7 @@ module.exports = class SearchService {
'thingsboard_key',
],
sensors: ['name'],
system_settings: [
settings: [
'system_name',
'location_text',
@ -66,15 +68,13 @@ module.exports = class SearchService {
'ip_address',
],
system_status: ['wifi_status'],
};
const columnsInt = {
status: ['wifi_strength'],
sensors: ['value'],
system_settings: ['latitude', 'longitude'],
system_status: ['wifi_strength'],
settings: ['latitude', 'longitude'],
};
let allFoundRecords = [];

114
backend/src/services/settings.js Normal file
View File

@ -0,0 +1,114 @@
const db = require('../db/models');
const SettingsDBApi = require('../db/api/settings');
const processFile = require('../middlewares/upload');
const ValidationError = require('./notifications/errors/validation');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
const stream = require('stream');
module.exports = class SettingsService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await SettingsDBApi.create(data, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async bulkImport(req, res, sendInvitationEmails = true, host) {
const transaction = await db.sequelize.transaction();
try {
await processFile(req, res);
const bufferStream = new stream.PassThrough();
const results = [];
await bufferStream.end(Buffer.from(req.file.buffer, 'utf-8')); // convert Buffer to Stream
await new Promise((resolve, reject) => {
bufferStream
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', async () => {
console.log('CSV results', results);
resolve();
})
.on('error', (error) => reject(error));
});
await SettingsDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async update(data, id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
let settings = await SettingsDBApi.findBy({ id }, { transaction });
if (!settings) {
throw new ValidationError('settingsNotFound');
}
const updatedSettings = await SettingsDBApi.update(id, data, {
currentUser,
transaction,
});
await transaction.commit();
return updatedSettings;
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async deleteByIds(ids, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await SettingsDBApi.deleteByIds(ids, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async remove(id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await SettingsDBApi.remove(id, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
};

114
backend/src/services/status.js Normal file
View File

@ -0,0 +1,114 @@
const db = require('../db/models');
const StatusDBApi = require('../db/api/status');
const processFile = require('../middlewares/upload');
const ValidationError = require('./notifications/errors/validation');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
const stream = require('stream');
module.exports = class StatusService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await StatusDBApi.create(data, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async bulkImport(req, res, sendInvitationEmails = true, host) {
const transaction = await db.sequelize.transaction();
try {
await processFile(req, res);
const bufferStream = new stream.PassThrough();
const results = [];
await bufferStream.end(Buffer.from(req.file.buffer, 'utf-8')); // convert Buffer to Stream
await new Promise((resolve, reject) => {
bufferStream
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', async () => {
console.log('CSV results', results);
resolve();
})
.on('error', (error) => reject(error));
});
await StatusDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async update(data, id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
let status = await StatusDBApi.findBy({ id }, { transaction });
if (!status) {
throw new ValidationError('statusNotFound');
}
const updatedStatus = await StatusDBApi.update(id, data, {
currentUser,
transaction,
});
await transaction.commit();
return updatedStatus;
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async deleteByIds(ids, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await StatusDBApi.deleteByIds(ids, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async remove(id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await StatusDBApi.remove(id, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
};

197
frontend/src/components/Settings/CardSettings.tsx Normal file
View File

@ -0,0 +1,197 @@
import React from 'react';
import ImageField from '../ImageField';
import ListActionsPopover from '../ListActionsPopover';
import { useAppSelector } from '../../stores/hooks';
import dataFormatter from '../../helpers/dataFormatter';
import { Pagination } from '../Pagination';
import { saveFile } from '../../helpers/fileSaver';
import LoadingSpinner from '../LoadingSpinner';
import Link from 'next/link';
import { hasPermission } from '../../helpers/userPermissions';
type Props = {
settings: any[];
loading: boolean;
onDelete: (id: string) => void;
currentPage: number;
numPages: number;
onPageChange: (page: number) => void;
};
const CardSettings = ({
settings,
loading,
onDelete,
currentPage,
numPages,
onPageChange,
}: Props) => {
const asideScrollbarsStyle = useAppSelector(
(state) => state.style.asideScrollbarsStyle,
);
const bgColor = useAppSelector((state) => state.style.cardsColor);
const darkMode = useAppSelector((state) => state.style.darkMode);
const corners = useAppSelector((state) => state.style.corners);
const focusRing = useAppSelector((state) => state.style.focusRingColor);
const currentUser = useAppSelector((state) => state.auth.currentUser);
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_SETTINGS');
return (
<div className={'p-4'}>
{loading && <LoadingSpinner />}
<ul
role='list'
className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
>
{!loading &&
settings.map((item, index) => (
<li
key={item.id}
className={`overflow-hidden ${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} border ${focusRing} border-gray-200 dark:border-dark-700 ${
darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
}`}
>
<div
className={`flex items-center ${bgColor} p-6 gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}
>
<Link
href={`/settings/settings-view/?id=${item.id}`}
className='text-lg font-bold leading-6 line-clamp-1'
>
{item.system_name}
</Link>
<div className='ml-auto '>
<ListActionsPopover
onDelete={onDelete}
itemId={item.id}
pathEdit={`/settings/settings-edit/?id=${item.id}`}
pathView={`/settings/settings-view/?id=${item.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>
</div>
<dl className='divide-y divide-stone-300 dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
SystemName
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.system_name}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
LocationText
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.location_text}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Latitude
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.latitude}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Longitude
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.longitude}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Wi-FiSSID
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.wifi_ssid}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Wi-FiPassword
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.wifi_password}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
IPMode
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.ip_mode}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
IPAddress
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.ip_address}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
SensorSelector
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.sensor_selector}
</div>
</dd>
</div>
</dl>
</li>
))}
{!loading && settings.length === 0 && (
<div className='col-span-full flex items-center justify-center h-40'>
<p className=''>No data to display</p>
</div>
)}
</ul>
<div className={'flex items-center justify-center my-6'}>
<Pagination
currentPage={currentPage}
numPages={numPages}
setCurrentPage={onPageChange}
/>
</div>
</div>
);
};
export default CardSettings;

133
frontend/src/components/Settings/ListSettings.tsx Normal file
View File

@ -0,0 +1,133 @@
import React from 'react';
import CardBox from '../CardBox';
import ImageField from '../ImageField';
import dataFormatter from '../../helpers/dataFormatter';
import { saveFile } from '../../helpers/fileSaver';
import ListActionsPopover from '../ListActionsPopover';
import { useAppSelector } from '../../stores/hooks';
import { Pagination } from '../Pagination';
import LoadingSpinner from '../LoadingSpinner';
import Link from 'next/link';
import { hasPermission } from '../../helpers/userPermissions';
type Props = {
settings: any[];
loading: boolean;
onDelete: (id: string) => void;
currentPage: number;
numPages: number;
onPageChange: (page: number) => void;
};
const ListSettings = ({
settings,
loading,
onDelete,
currentPage,
numPages,
onPageChange,
}: Props) => {
const currentUser = useAppSelector((state) => state.auth.currentUser);
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_SETTINGS');
const corners = useAppSelector((state) => state.style.corners);
const bgColor = useAppSelector((state) => state.style.cardsColor);
return (
<>
<div className='relative overflow-x-auto p-4 space-y-4'>
{loading && <LoadingSpinner />}
{!loading &&
settings.map((item) => (
<div key={item.id}>
<CardBox hasTable isList className={'rounded shadow-none'}>
<div
className={`flex ${bgColor} ${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} dark:bg-dark-900 border border-stone-300 items-center overflow-hidden`}
>
<Link
href={`/settings/settings-view/?id=${item.id}`}
className={
'flex-1 px-4 py-6 h-24 flex divide-x-2 divide-stone-300 items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
}
>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>SystemName</p>
<p className={'line-clamp-2'}>{item.system_name}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>LocationText</p>
<p className={'line-clamp-2'}>{item.location_text}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>Latitude</p>
<p className={'line-clamp-2'}>{item.latitude}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>Longitude</p>
<p className={'line-clamp-2'}>{item.longitude}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>Wi-FiSSID</p>
<p className={'line-clamp-2'}>{item.wifi_ssid}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>
Wi-FiPassword
</p>
<p className={'line-clamp-2'}>{item.wifi_password}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>IPMode</p>
<p className={'line-clamp-2'}>{item.ip_mode}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>IPAddress</p>
<p className={'line-clamp-2'}>{item.ip_address}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>
SensorSelector
</p>
<p className={'line-clamp-2'}>{item.sensor_selector}</p>
</div>
</Link>
<ListActionsPopover
onDelete={onDelete}
itemId={item.id}
pathEdit={`/settings/settings-edit/?id=${item.id}`}
pathView={`/settings/settings-view/?id=${item.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>
</CardBox>
</div>
))}
{!loading && settings.length === 0 && (
<div className='col-span-full flex items-center justify-center h-40'>
<p className=''>No data to display</p>
</div>
)}
</div>
<div className={'flex items-center justify-center my-6'}>
<Pagination
currentPage={currentPage}
numPages={numPages}
setCurrentPage={onPageChange}
/>
</div>
</>
);
};
export default ListSettings;

497
frontend/src/components/Settings/TableSettings.tsx Normal file
View File

@ -0,0 +1,497 @@
import React, { useEffect, useState, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { ToastContainer, toast } from 'react-toastify';
import BaseButton from '../BaseButton';
import CardBoxModal from '../CardBoxModal';
import CardBox from '../CardBox';
import {
fetch,
update,
deleteItem,
setRefetch,
deleteItemsByIds,
} from '../../stores/settings/settingsSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { Field, Form, Formik } from 'formik';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { loadColumns } from './configureSettingsCols';
import _ from 'lodash';
import dataFormatter from '../../helpers/dataFormatter';
import { dataGridStyles } from '../../styles';
import ListSettings from './ListSettings';
const perPage = 10;
const TableSampleSettings = ({
filterItems,
setFilterItems,
filters,
showGrid,
}) => {
const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
const dispatch = useAppDispatch();
const router = useRouter();
const pagesList = [];
const [id, setId] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
const [filterRequest, setFilterRequest] = React.useState('');
const [columns, setColumns] = useState<GridColDef[]>([]);
const [selectedRows, setSelectedRows] = useState([]);
const [sortModel, setSortModel] = useState([
{
field: '',
sort: 'desc',
},
]);
const {
settings,
loading,
count,
notify: settingsNotify,
refetch,
} = useAppSelector((state) => state.settings);
const { currentUser } = useAppSelector((state) => state.auth);
const focusRing = useAppSelector((state) => state.style.focusRingColor);
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
const corners = useAppSelector((state) => state.style.corners);
const numPages =
Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
for (let i = 0; i < numPages; i++) {
pagesList.push(i);
}
const loadData = async (page = currentPage, request = filterRequest) => {
if (page !== currentPage) setCurrentPage(page);
if (request !== filterRequest) setFilterRequest(request);
const { sort, field } = sortModel[0];
const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
dispatch(fetch({ limit: perPage, page, query }));
};
useEffect(() => {
if (settingsNotify.showNotification) {
notify(settingsNotify.typeNotification, settingsNotify.textNotification);
}
}, [settingsNotify.showNotification]);
useEffect(() => {
if (!currentUser) return;
loadData();
}, [sortModel, currentUser]);
useEffect(() => {
if (refetch) {
loadData(0);
dispatch(setRefetch(false));
}
}, [refetch, dispatch]);
const [isModalInfoActive, setIsModalInfoActive] = useState(false);
const [isModalTrashActive, setIsModalTrashActive] = useState(false);
const handleModalAction = () => {
setIsModalInfoActive(false);
setIsModalTrashActive(false);
};
const handleDeleteModalAction = (id: string) => {
setId(id);
setIsModalTrashActive(true);
};
const handleDeleteAction = async () => {
if (id) {
await dispatch(deleteItem(id));
await loadData(0);
setIsModalTrashActive(false);
}
};
const generateFilterRequests = useMemo(() => {
let request = '&';
filterItems.forEach((item) => {
const isRangeFilter = filters.find(
(filter) =>
filter.title === item.fields.selectedField &&
(filter.number || filter.date),
);
if (isRangeFilter) {
const from = item.fields.filterValueFrom;
const to = item.fields.filterValueTo;
if (from) {
request += `${item.fields.selectedField}Range=${from}&`;
}
if (to) {
request += `${item.fields.selectedField}Range=${to}&`;
}
} else {
const value = item.fields.filterValue;
if (value) {
request += `${item.fields.selectedField}=${value}&`;
}
}
});
return request;
}, [filterItems, filters]);
const deleteFilter = (value) => {
const newItems = filterItems.filter((item) => item.id !== value);
if (newItems.length) {
setFilterItems(newItems);
} else {
loadData(0, '');
setFilterItems(newItems);
}
};
const handleSubmit = () => {
loadData(0, generateFilterRequests);
};
const handleChange = (id) => (e) => {
const value = e.target.value;
const name = e.target.name;
setFilterItems(
filterItems.map((item) => {
if (item.id !== id) return item;
if (name === 'selectedField') return { id, fields: { [name]: value } };
return { id, fields: { ...item.fields, [name]: value } };
}),
);
};
const handleReset = () => {
setFilterItems([]);
loadData(0, '');
};
const onPageChange = (page: number) => {
loadData(page);
setCurrentPage(page);
};
useEffect(() => {
if (!currentUser) return;
loadColumns(handleDeleteModalAction, `settings`, currentUser).then(
(newCols) => setColumns(newCols),
);
}, [currentUser]);
const handleTableSubmit = async (id: string, data) => {
if (!_.isEmpty(data)) {
await dispatch(update({ id, data }))
.unwrap()
.then((res) => res)
.catch((err) => {
throw new Error(err);
});
}
};
const onDeleteRows = async (selectedRows) => {
await dispatch(deleteItemsByIds(selectedRows));
await loadData(0);
};
const controlClasses =
'w-full py-2 px-2 my-2 rounded dark:placeholder-gray-400 ' +
` ${bgColor} ${focusRing} ${corners} ` +
'dark:bg-slate-800 border';
const dataGrid = (
<div className='relative overflow-x-auto'>
<DataGrid
autoHeight
rowHeight={64}
sx={dataGridStyles}
className={'datagrid--table'}
getRowClassName={() => `datagrid--row`}
rows={settings ?? []}
columns={columns}
initialState={{
pagination: {
paginationModel: {
pageSize: 10,
},
},
}}
disableRowSelectionOnClick
onProcessRowUpdateError={(params) => {
console.log('Error', params);
}}
processRowUpdate={async (newRow, oldRow) => {
const data = dataFormatter.dataGridEditFormatter(newRow);
try {
await handleTableSubmit(newRow.id, data);
return newRow;
} catch {
return oldRow;
}
}}
sortingMode={'server'}
checkboxSelection
onRowSelectionModelChange={(ids) => {
setSelectedRows(ids);
}}
onSortModelChange={(params) => {
params.length
? setSortModel(params)
: setSortModel([{ field: '', sort: 'desc' }]);
}}
rowCount={count}
pageSizeOptions={[10]}
paginationMode={'server'}
loading={loading}
onPaginationModelChange={(params) => {
onPageChange(params.page);
}}
/>
</div>
);
return (
<>
{filterItems && Array.isArray(filterItems) && filterItems.length ? (
<CardBox>
<Formik
initialValues={{
checkboxes: ['lorem'],
switches: ['lorem'],
radio: 'lorem',
}}
onSubmit={() => null}
>
<Form>
<>
{filterItems &&
filterItems.map((filterItem) => {
return (
<div key={filterItem.id} className='flex mb-4'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
Filter
</div>
<Field
className={controlClasses}
name='selectedField'
id='selectedField'
component='select'
value={filterItem?.fields?.selectedField || ''}
onChange={handleChange(filterItem.id)}
>
{filters.map((selectOption) => (
<option
key={selectOption.title}
value={`${selectOption.title}`}
>
{selectOption.label}
</option>
))}
</Field>
</div>
{filters.find(
(filter) =>
filter.title === filterItem?.fields?.selectedField,
)?.type === 'enum' ? (
<div className='flex flex-col w-full mr-3'>
<div className='text-gray-500 font-bold'>Value</div>
<Field
className={controlClasses}
name='filterValue'
id='filterValue'
component='select'
value={filterItem?.fields?.filterValue || ''}
onChange={handleChange(filterItem.id)}
>
<option value=''>Select Value</option>
{filters
.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)
?.options?.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</Field>
</div>
) : filters.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)?.number ? (
<div className='flex flex-row w-full mr-3'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
From
</div>
<Field
className={controlClasses}
name='filterValueFrom'
placeholder='From'
id='filterValueFrom'
value={
filterItem?.fields?.filterValueFrom || ''
}
onChange={handleChange(filterItem.id)}
/>
</div>
<div className='flex flex-col w-full'>
<div className=' text-gray-500 font-bold'>
To
</div>
<Field
className={controlClasses}
name='filterValueTo'
placeholder='to'
id='filterValueTo'
value={filterItem?.fields?.filterValueTo || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
</div>
) : filters.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)?.date ? (
<div className='flex flex-row w-full mr-3'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
From
</div>
<Field
className={controlClasses}
name='filterValueFrom'
placeholder='From'
id='filterValueFrom'
type='datetime-local'
value={
filterItem?.fields?.filterValueFrom || ''
}
onChange={handleChange(filterItem.id)}
/>
</div>
<div className='flex flex-col w-full'>
<div className=' text-gray-500 font-bold'>
To
</div>
<Field
className={controlClasses}
name='filterValueTo'
placeholder='to'
id='filterValueTo'
type='datetime-local'
value={filterItem?.fields?.filterValueTo || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
</div>
) : (
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
Contains
</div>
<Field
className={controlClasses}
name='filterValue'
placeholder='Contained'
id='filterValue'
value={filterItem?.fields?.filterValue || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
)}
<div className='flex flex-col'>
<div className=' text-gray-500 font-bold'>
Action
</div>
<BaseButton
className='my-2'
type='reset'
color='danger'
label='Delete'
onClick={() => {
deleteFilter(filterItem.id);
}}
/>
</div>
</div>
);
})}
<div className='flex'>
<BaseButton
className='my-2 mr-3'
type='submit'
color='info'
label='Apply'
onClick={handleSubmit}
/>
<BaseButton
className='my-2'
type='reset'
color='info'
outline
label='Cancel'
onClick={handleReset}
/>
</div>
</>
</Form>
</Formik>
</CardBox>
) : null}
<CardBoxModal
title='Please confirm'
buttonColor='info'
buttonLabel={loading ? 'Deleting...' : 'Confirm'}
isActive={isModalTrashActive}
onConfirm={handleDeleteAction}
onCancel={handleModalAction}
>
<p>Are you sure you want to delete this item?</p>
</CardBoxModal>
{settings && Array.isArray(settings) && !showGrid && (
<ListSettings
settings={settings}
loading={loading}
onDelete={handleDeleteModalAction}
currentPage={currentPage}
numPages={numPages}
onPageChange={onPageChange}
/>
)}
{showGrid && dataGrid}
{selectedRows.length > 0 &&
createPortal(
<BaseButton
className='me-4'
color='danger'
label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
onClick={() => onDeleteRows(selectedRows)}
/>,
document.getElementById('delete-rows-button'),
)}
<ToastContainer />
</>
);
};
export default TableSampleSettings;

174
frontend/src/components/Settings/configureSettingsCols.tsx Normal file
View File

@ -0,0 +1,174 @@
import React from 'react';
import BaseIcon from '../BaseIcon';
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
import axios from 'axios';
import {
GridActionsCellItem,
GridRowParams,
GridValueGetterParams,
} from '@mui/x-data-grid';
import ImageField from '../ImageField';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import DataGridMultiSelect from '../DataGridMultiSelect';
import ListActionsPopover from '../ListActionsPopover';
import { hasPermission } from '../../helpers/userPermissions';
type Params = (id: string) => void;
export const loadColumns = async (
onDelete: Params,
entityName: string,
user,
) => {
async function callOptionsApi(entityName: string) {
if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
try {
const data = await axios(`/${entityName}/autocomplete?limit=100`);
return data.data;
} catch (error) {
console.log(error);
return [];
}
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_SETTINGS');
return [
{
field: 'system_name',
headerName: 'SystemName',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'location_text',
headerName: 'LocationText',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'latitude',
headerName: 'Latitude',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'number',
},
{
field: 'longitude',
headerName: 'Longitude',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'number',
},
{
field: 'wifi_ssid',
headerName: 'Wi-FiSSID',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'wifi_password',
headerName: 'Wi-FiPassword',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'ip_mode',
headerName: 'IPMode',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'ip_address',
headerName: 'IPAddress',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'sensor_selector',
headerName: 'SensorSelector',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'actions',
type: 'actions',
minWidth: 30,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
getActions: (params: GridRowParams) => {
return [
<div key={params?.row?.id}>
<ListActionsPopover
onDelete={onDelete}
itemId={params?.row?.id}
pathEdit={`/settings/settings-edit/?id=${params?.row?.id}`}
pathView={`/settings/settings-view/?id=${params?.row?.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>,
];
},
},
];
};

142
frontend/src/components/Status/CardStatus.tsx Normal file
View File

@ -0,0 +1,142 @@
import React from 'react';
import ImageField from '../ImageField';
import ListActionsPopover from '../ListActionsPopover';
import { useAppSelector } from '../../stores/hooks';
import dataFormatter from '../../helpers/dataFormatter';
import { Pagination } from '../Pagination';
import { saveFile } from '../../helpers/fileSaver';
import LoadingSpinner from '../LoadingSpinner';
import Link from 'next/link';
import { hasPermission } from '../../helpers/userPermissions';
type Props = {
status: any[];
loading: boolean;
onDelete: (id: string) => void;
currentPage: number;
numPages: number;
onPageChange: (page: number) => void;
};
const CardStatus = ({
status,
loading,
onDelete,
currentPage,
numPages,
onPageChange,
}: Props) => {
const asideScrollbarsStyle = useAppSelector(
(state) => state.style.asideScrollbarsStyle,
);
const bgColor = useAppSelector((state) => state.style.cardsColor);
const darkMode = useAppSelector((state) => state.style.darkMode);
const corners = useAppSelector((state) => state.style.corners);
const focusRing = useAppSelector((state) => state.style.focusRingColor);
const currentUser = useAppSelector((state) => state.auth.currentUser);
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_STATUS');
return (
<div className={'p-4'}>
{loading && <LoadingSpinner />}
<ul
role='list'
className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
>
{!loading &&
status.map((item, index) => (
<li
key={item.id}
className={`overflow-hidden ${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} border ${focusRing} border-gray-200 dark:border-dark-700 ${
darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
}`}
>
<div
className={`flex items-center ${bgColor} p-6 gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}
>
<Link
href={`/status/status-view/?id=${item.id}`}
className='text-lg font-bold leading-6 line-clamp-1'
>
{item.wifi_status}
</Link>
<div className='ml-auto '>
<ListActionsPopover
onDelete={onDelete}
itemId={item.id}
pathEdit={`/status/status-edit/?id=${item.id}`}
pathView={`/status/status-view/?id=${item.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>
</div>
<dl className='divide-y divide-stone-300 dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Wi-FiStatus
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.wifi_status}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Wi-FiStrength
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{item.wifi_strength}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
SensorStatus
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{dataFormatter.booleanFormatter(item.sensor_status)}
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
ThingsBoardStatus
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{dataFormatter.booleanFormatter(item.thingsboard_status)}
</div>
</dd>
</div>
</dl>
</li>
))}
{!loading && status.length === 0 && (
<div className='col-span-full flex items-center justify-center h-40'>
<p className=''>No data to display</p>
</div>
)}
</ul>
<div className={'flex items-center justify-center my-6'}>
<Pagination
currentPage={currentPage}
numPages={numPages}
setCurrentPage={onPageChange}
/>
</div>
</div>
);
};
export default CardStatus;

114
frontend/src/components/Status/ListStatus.tsx Normal file
View File

@ -0,0 +1,114 @@
import React from 'react';
import CardBox from '../CardBox';
import ImageField from '../ImageField';
import dataFormatter from '../../helpers/dataFormatter';
import { saveFile } from '../../helpers/fileSaver';
import ListActionsPopover from '../ListActionsPopover';
import { useAppSelector } from '../../stores/hooks';
import { Pagination } from '../Pagination';
import LoadingSpinner from '../LoadingSpinner';
import Link from 'next/link';
import { hasPermission } from '../../helpers/userPermissions';
type Props = {
status: any[];
loading: boolean;
onDelete: (id: string) => void;
currentPage: number;
numPages: number;
onPageChange: (page: number) => void;
};
const ListStatus = ({
status,
loading,
onDelete,
currentPage,
numPages,
onPageChange,
}: Props) => {
const currentUser = useAppSelector((state) => state.auth.currentUser);
const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_STATUS');
const corners = useAppSelector((state) => state.style.corners);
const bgColor = useAppSelector((state) => state.style.cardsColor);
return (
<>
<div className='relative overflow-x-auto p-4 space-y-4'>
{loading && <LoadingSpinner />}
{!loading &&
status.map((item) => (
<div key={item.id}>
<CardBox hasTable isList className={'rounded shadow-none'}>
<div
className={`flex ${bgColor} ${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} dark:bg-dark-900 border border-stone-300 items-center overflow-hidden`}
>
<Link
href={`/status/status-view/?id=${item.id}`}
className={
'flex-1 px-4 py-6 h-24 flex divide-x-2 divide-stone-300 items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
}
>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>Wi-FiStatus</p>
<p className={'line-clamp-2'}>{item.wifi_status}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>
Wi-FiStrength
</p>
<p className={'line-clamp-2'}>{item.wifi_strength}</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>SensorStatus</p>
<p className={'line-clamp-2'}>
{dataFormatter.booleanFormatter(item.sensor_status)}
</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>
ThingsBoardStatus
</p>
<p className={'line-clamp-2'}>
{dataFormatter.booleanFormatter(
item.thingsboard_status,
)}
</p>
</div>
</Link>
<ListActionsPopover
onDelete={onDelete}
itemId={item.id}
pathEdit={`/status/status-edit/?id=${item.id}`}
pathView={`/status/status-view/?id=${item.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>
</CardBox>
</div>
))}
{!loading && status.length === 0 && (
<div className='col-span-full flex items-center justify-center h-40'>
<p className=''>No data to display</p>
</div>
)}
</div>
<div className={'flex items-center justify-center my-6'}>
<Pagination
currentPage={currentPage}
numPages={numPages}
setCurrentPage={onPageChange}
/>
</div>
</>
);
};
export default ListStatus;

497
frontend/src/components/Status/TableStatus.tsx Normal file
View File

@ -0,0 +1,497 @@
import React, { useEffect, useState, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { ToastContainer, toast } from 'react-toastify';
import BaseButton from '../BaseButton';
import CardBoxModal from '../CardBoxModal';
import CardBox from '../CardBox';
import {
fetch,
update,
deleteItem,
setRefetch,
deleteItemsByIds,
} from '../../stores/status/statusSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { Field, Form, Formik } from 'formik';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { loadColumns } from './configureStatusCols';
import _ from 'lodash';
import dataFormatter from '../../helpers/dataFormatter';
import { dataGridStyles } from '../../styles';
import CardStatus from './CardStatus';
const perPage = 10;
const TableSampleStatus = ({
filterItems,
setFilterItems,
filters,
showGrid,
}) => {
const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
const dispatch = useAppDispatch();
const router = useRouter();
const pagesList = [];
const [id, setId] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
const [filterRequest, setFilterRequest] = React.useState('');
const [columns, setColumns] = useState<GridColDef[]>([]);
const [selectedRows, setSelectedRows] = useState([]);
const [sortModel, setSortModel] = useState([
{
field: '',
sort: 'desc',
},
]);
const {
status,
loading,
count,
notify: statusNotify,
refetch,
} = useAppSelector((state) => state.status);
const { currentUser } = useAppSelector((state) => state.auth);
const focusRing = useAppSelector((state) => state.style.focusRingColor);
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
const corners = useAppSelector((state) => state.style.corners);
const numPages =
Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
for (let i = 0; i < numPages; i++) {
pagesList.push(i);
}
const loadData = async (page = currentPage, request = filterRequest) => {
if (page !== currentPage) setCurrentPage(page);
if (request !== filterRequest) setFilterRequest(request);
const { sort, field } = sortModel[0];
const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
dispatch(fetch({ limit: perPage, page, query }));
};
useEffect(() => {
if (statusNotify.showNotification) {
notify(statusNotify.typeNotification, statusNotify.textNotification);
}
}, [statusNotify.showNotification]);
useEffect(() => {
if (!currentUser) return;
loadData();
}, [sortModel, currentUser]);
useEffect(() => {
if (refetch) {
loadData(0);
dispatch(setRefetch(false));
}
}, [refetch, dispatch]);
const [isModalInfoActive, setIsModalInfoActive] = useState(false);
const [isModalTrashActive, setIsModalTrashActive] = useState(false);
const handleModalAction = () => {
setIsModalInfoActive(false);
setIsModalTrashActive(false);
};
const handleDeleteModalAction = (id: string) => {
setId(id);
setIsModalTrashActive(true);
};
const handleDeleteAction = async () => {
if (id) {
await dispatch(deleteItem(id));
await loadData(0);
setIsModalTrashActive(false);
}
};
const generateFilterRequests = useMemo(() => {
let request = '&';
filterItems.forEach((item) => {
const isRangeFilter = filters.find(
(filter) =>
filter.title === item.fields.selectedField &&
(filter.number || filter.date),
);
if (isRangeFilter) {
const from = item.fields.filterValueFrom;
const to = item.fields.filterValueTo;
if (from) {
request += `${item.fields.selectedField}Range=${from}&`;
}
if (to) {
request += `${item.fields.selectedField}Range=${to}&`;
}
} else {
const value = item.fields.filterValue;
if (value) {
request += `${item.fields.selectedField}=${value}&`;
}
}
});
return request;
}, [filterItems, filters]);
const deleteFilter = (value) => {
const newItems = filterItems.filter((item) => item.id !== value);
if (newItems.length) {
setFilterItems(newItems);
} else {
loadData(0, '');
setFilterItems(newItems);
}
};
const handleSubmit = () => {
loadData(0, generateFilterRequests);
};
const handleChange = (id) => (e) => {
const value = e.target.value;
const name = e.target.name;
setFilterItems(
filterItems.map((item) => {
if (item.id !== id) return item;
if (name === 'selectedField') return { id, fields: { [name]: value } };
return { id, fields: { ...item.fields, [name]: value } };
}),
);
};
const handleReset = () => {
setFilterItems([]);
loadData(0, '');
};
const onPageChange = (page: number) => {
loadData(page);
setCurrentPage(page);
};
useEffect(() => {
if (!currentUser) return;
loadColumns(handleDeleteModalAction, `status`, currentUser).then(
(newCols) => setColumns(newCols),
);
}, [currentUser]);
const handleTableSubmit = async (id: string, data) => {
if (!_.isEmpty(data)) {
await dispatch(update({ id, data }))
.unwrap()
.then((res) => res)
.catch((err) => {
throw new Error(err);
});
}
};
const onDeleteRows = async (selectedRows) => {
await dispatch(deleteItemsByIds(selectedRows));
await loadData(0);
};
const controlClasses =
'w-full py-2 px-2 my-2 rounded dark:placeholder-gray-400 ' +
` ${bgColor} ${focusRing} ${corners} ` +
'dark:bg-slate-800 border';
const dataGrid = (
<div className='relative overflow-x-auto'>
<DataGrid
autoHeight
rowHeight={64}
sx={dataGridStyles}
className={'datagrid--table'}
getRowClassName={() => `datagrid--row`}
rows={status ?? []}
columns={columns}
initialState={{
pagination: {
paginationModel: {
pageSize: 10,
},
},
}}
disableRowSelectionOnClick
onProcessRowUpdateError={(params) => {
console.log('Error', params);
}}
processRowUpdate={async (newRow, oldRow) => {
const data = dataFormatter.dataGridEditFormatter(newRow);
try {
await handleTableSubmit(newRow.id, data);
return newRow;
} catch {
return oldRow;
}
}}
sortingMode={'server'}
checkboxSelection
onRowSelectionModelChange={(ids) => {
setSelectedRows(ids);
}}
onSortModelChange={(params) => {
params.length
? setSortModel(params)
: setSortModel([{ field: '', sort: 'desc' }]);
}}
rowCount={count}
pageSizeOptions={[10]}
paginationMode={'server'}
loading={loading}
onPaginationModelChange={(params) => {
onPageChange(params.page);
}}
/>
</div>
);
return (
<>
{filterItems && Array.isArray(filterItems) && filterItems.length ? (
<CardBox>
<Formik
initialValues={{
checkboxes: ['lorem'],
switches: ['lorem'],
radio: 'lorem',
}}
onSubmit={() => null}
>
<Form>
<>
{filterItems &&
filterItems.map((filterItem) => {
return (
<div key={filterItem.id} className='flex mb-4'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
Filter
</div>
<Field
className={controlClasses}
name='selectedField'
id='selectedField'
component='select'
value={filterItem?.fields?.selectedField || ''}
onChange={handleChange(filterItem.id)}
>
{filters.map((selectOption) => (
<option
key={selectOption.title}
value={`${selectOption.title}`}
>
{selectOption.label}
</option>
))}
</Field>
</div>
{filters.find(
(filter) =>
filter.title === filterItem?.fields?.selectedField,
)?.type === 'enum' ? (
<div className='flex flex-col w-full mr-3'>
<div className='text-gray-500 font-bold'>Value</div>
<Field
className={controlClasses}
name='filterValue'
id='filterValue'
component='select'
value={filterItem?.fields?.filterValue || ''}
onChange={handleChange(filterItem.id)}
>
<option value=''>Select Value</option>
{filters
.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)
?.options?.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</Field>
</div>
) : filters.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)?.number ? (
<div className='flex flex-row w-full mr-3'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
From
</div>
<Field
className={controlClasses}
name='filterValueFrom'
placeholder='From'
id='filterValueFrom'
value={
filterItem?.fields?.filterValueFrom || ''
}
onChange={handleChange(filterItem.id)}
/>
</div>
<div className='flex flex-col w-full'>
<div className=' text-gray-500 font-bold'>
To
</div>
<Field
className={controlClasses}
name='filterValueTo'
placeholder='to'
id='filterValueTo'
value={filterItem?.fields?.filterValueTo || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
</div>
) : filters.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)?.date ? (
<div className='flex flex-row w-full mr-3'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
From
</div>
<Field
className={controlClasses}
name='filterValueFrom'
placeholder='From'
id='filterValueFrom'
type='datetime-local'
value={
filterItem?.fields?.filterValueFrom || ''
}
onChange={handleChange(filterItem.id)}
/>
</div>
<div className='flex flex-col w-full'>
<div className=' text-gray-500 font-bold'>
To
</div>
<Field
className={controlClasses}
name='filterValueTo'
placeholder='to'
id='filterValueTo'
type='datetime-local'
value={filterItem?.fields?.filterValueTo || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
</div>
) : (
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
Contains
</div>
<Field
className={controlClasses}
name='filterValue'
placeholder='Contained'
id='filterValue'
value={filterItem?.fields?.filterValue || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
)}
<div className='flex flex-col'>
<div className=' text-gray-500 font-bold'>
Action
</div>
<BaseButton
className='my-2'
type='reset'
color='danger'
label='Delete'
onClick={() => {
deleteFilter(filterItem.id);
}}
/>
</div>
</div>
);
})}
<div className='flex'>
<BaseButton
className='my-2 mr-3'
type='submit'
color='info'
label='Apply'
onClick={handleSubmit}
/>
<BaseButton
className='my-2'
type='reset'
color='info'
outline
label='Cancel'
onClick={handleReset}
/>
</div>
</>
</Form>
</Formik>
</CardBox>
) : null}
<CardBoxModal
title='Please confirm'
buttonColor='info'
buttonLabel={loading ? 'Deleting...' : 'Confirm'}
isActive={isModalTrashActive}
onConfirm={handleDeleteAction}
onCancel={handleModalAction}
>
<p>Are you sure you want to delete this item?</p>
</CardBoxModal>
{status && Array.isArray(status) && !showGrid && (
<CardStatus
status={status}
loading={loading}
onDelete={handleDeleteModalAction}
currentPage={currentPage}
numPages={numPages}
onPageChange={onPageChange}
/>
)}
{showGrid && dataGrid}
{selectedRows.length > 0 &&
createPortal(
<BaseButton
className='me-4'
color='danger'
label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
onClick={() => onDeleteRows(selectedRows)}
/>,
document.getElementById('delete-rows-button'),
)}
<ToastContainer />
</>
);
};
export default TableSampleStatus;

116
frontend/src/components/Status/configureStatusCols.tsx Normal file
View File

@ -0,0 +1,116 @@
import React from 'react';
import BaseIcon from '../BaseIcon';
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
import axios from 'axios';
import {
GridActionsCellItem,
GridRowParams,
GridValueGetterParams,
} from '@mui/x-data-grid';
import ImageField from '../ImageField';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import DataGridMultiSelect from '../DataGridMultiSelect';
import ListActionsPopover from '../ListActionsPopover';
import { hasPermission } from '../../helpers/userPermissions';
type Params = (id: string) => void;
export const loadColumns = async (
onDelete: Params,
entityName: string,
user,
) => {
async function callOptionsApi(entityName: string) {
if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
try {
const data = await axios(`/${entityName}/autocomplete?limit=100`);
return data.data;
} catch (error) {
console.log(error);
return [];
}
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_STATUS');
return [
{
field: 'wifi_status',
headerName: 'Wi-FiStatus',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'wifi_strength',
headerName: 'Wi-FiStrength',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'number',
},
{
field: 'sensor_status',
headerName: 'SensorStatus',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'boolean',
},
{
field: 'thingsboard_status',
headerName: 'ThingsBoardStatus',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'boolean',
},
{
field: 'actions',
type: 'actions',
minWidth: 30,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
getActions: (params: GridRowParams) => {
return [
<div key={params?.row?.id}>
<ListActionsPopover
onDelete={onDelete}
itemId={params?.row?.id}
pathEdit={`/status/status-edit/?id=${params?.row?.id}`}
pathView={`/status/status-view/?id=${params?.row?.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>,
];
},
},
];
};

38
frontend/src/menuAside.ts
View File

@ -17,15 +17,15 @@ const menuAside: MenuAsideItem[] = [
permissions: 'READ_USERS',
},
{
href: '/integrations/integrations-list',
label: 'Integrations',
href: '/status/status-list',
label: 'Status',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon:
'mdiCloudOutline' in icon
? icon['mdiCloudOutline' as keyof typeof icon]
'mdiSignal' in icon
? icon['mdiSignal' as keyof typeof icon]
: icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_INTEGRATIONS',
permissions: 'READ_STATUS',
},
{
href: '/sensors/sensors-list',
@ -39,26 +39,26 @@ const menuAside: MenuAsideItem[] = [
permissions: 'READ_SENSORS',
},
{
href: '/system_settings/system_settings-list',
label: 'System settings',
href: '/integrations/integrations-list',
label: 'Integrations',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon:
'mdiCloudOutline' in icon
? icon['mdiCloudOutline' as keyof typeof icon]
: icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_INTEGRATIONS',
},
{
href: '/settings/settings-list',
label: 'Settings',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon:
'mdiSettings' in icon
? icon['mdiSettings' as keyof typeof icon]
: icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_SYSTEM_SETTINGS',
},
{
href: '/system_status/system_status-list',
label: 'System status',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon:
'mdiSignal' in icon
? icon['mdiSignal' as keyof typeof icon]
: icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_SYSTEM_STATUS',
permissions: 'READ_SETTINGS',
},
{
href: '/roles/roles-list',

110
frontend/src/pages/dashboard.tsx
View File

@ -29,10 +29,10 @@ const Dashboard = () => {
});
const [users, setUsers] = React.useState(loadingMessage);
const [integrations, setIntegrations] = React.useState(loadingMessage);
const [status, setStatus] = React.useState(loadingMessage);
const [sensors, setSensors] = React.useState(loadingMessage);
const [system_settings, setSystem_settings] = React.useState(loadingMessage);
const [system_status, setSystem_status] = React.useState(loadingMessage);
const [integrations, setIntegrations] = React.useState(loadingMessage);
const [settings, setSettings] = React.useState(loadingMessage);
const [roles, setRoles] = React.useState(loadingMessage);
const [permissions, setPermissions] = React.useState(loadingMessage);
@ -47,19 +47,19 @@ const Dashboard = () => {
async function loadData() {
const entities = [
'users',
'integrations',
'status',
'sensors',
'system_settings',
'system_status',
'integrations',
'settings',
'roles',
'permissions',
];
const fns = [
setUsers,
setIntegrations,
setStatus,
setSensors,
setSystem_settings,
setSystem_status,
setIntegrations,
setSettings,
setRoles,
setPermissions,
];
@ -208,8 +208,8 @@ const Dashboard = () => {
</Link>
)}
{hasPermission(currentUser, 'READ_INTEGRATIONS') && (
<Link href={'/integrations/integrations-list'}>
{hasPermission(currentUser, 'READ_STATUS') && (
<Link href={'/status/status-list'}>
<div
className={`${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
@ -218,10 +218,10 @@ const Dashboard = () => {
<div className='flex justify-between align-center'>
<div>
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
Integrations
Status
</div>
<div className='text-3xl leading-tight font-semibold'>
{integrations}
{status}
</div>
</div>
<div>
@ -233,8 +233,8 @@ const Dashboard = () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={
'mdiCloudOutline' in icon
? icon['mdiCloudOutline' as keyof typeof icon]
'mdiSignal' in icon
? icon['mdiSignal' as keyof typeof icon]
: icon.mdiTable || icon.mdiTable
}
/>
@ -280,8 +280,8 @@ const Dashboard = () => {
</Link>
)}
{hasPermission(currentUser, 'READ_SYSTEM_SETTINGS') && (
<Link href={'/system_settings/system_settings-list'}>
{hasPermission(currentUser, 'READ_INTEGRATIONS') && (
<Link href={'/integrations/integrations-list'}>
<div
className={`${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
@ -290,10 +290,46 @@ const Dashboard = () => {
<div className='flex justify-between align-center'>
<div>
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
System settings
Integrations
</div>
<div className='text-3xl leading-tight font-semibold'>
{system_settings}
{integrations}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w='w-16'
h='h-16'
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={
'mdiCloudOutline' in icon
? icon['mdiCloudOutline' as keyof typeof icon]
: icon.mdiTable || icon.mdiTable
}
/>
</div>
</div>
</div>
</Link>
)}
{hasPermission(currentUser, 'READ_SETTINGS') && (
<Link href={'/settings/settings-list'}>
<div
className={`${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
>
<div className='flex justify-between align-center'>
<div>
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
Settings
</div>
<div className='text-3xl leading-tight font-semibold'>
{settings}
</div>
</div>
<div>
@ -316,42 +352,6 @@ const Dashboard = () => {
</Link>
)}
{hasPermission(currentUser, 'READ_SYSTEM_STATUS') && (
<Link href={'/system_status/system_status-list'}>
<div
className={`${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
>
<div className='flex justify-between align-center'>
<div>
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
System status
</div>
<div className='text-3xl leading-tight font-semibold'>
{system_status}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w='w-16'
h='h-16'
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={
'mdiSignal' in icon
? icon['mdiSignal' as keyof typeof icon]
: icon.mdiTable || icon.mdiTable
}
/>
</div>
</div>
</div>
</Link>
)}
{hasPermission(currentUser, 'READ_ROLES') && (
<Link href={'/roles/roles-list'}>
<div

188
frontend/src/pages/settings/[settingsId].tsx Normal file
View File

@ -0,0 +1,188 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { SwitchField } from '../../components/SwitchField';
import { RichTextField } from '../../components/RichTextField';
import { update, fetch } from '../../stores/settings/settingsSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
const EditSettings = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const initVals = {
system_name: '',
location_text: '',
latitude: '',
longitude: '',
wifi_ssid: '',
wifi_password: '',
ip_mode: '',
ip_address: '',
sensor_selector: '',
};
const [initialValues, setInitialValues] = useState(initVals);
const { settings } = useAppSelector((state) => state.settings);
const { settingsId } = router.query;
useEffect(() => {
dispatch(fetch({ id: settingsId }));
}, [settingsId]);
useEffect(() => {
if (typeof settings === 'object') {
setInitialValues(settings);
}
}, [settings]);
useEffect(() => {
if (typeof settings === 'object') {
const newInitialVal = { ...initVals };
Object.keys(initVals).forEach((el) => (newInitialVal[el] = settings[el]));
setInitialValues(newInitialVal);
}
}, [settings]);
const handleSubmit = async (data) => {
await dispatch(update({ id: settingsId, data }));
await router.push('/settings/settings-list');
};
return (
<>
<Head>
<title>{getPageTitle('Edit settings')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={'Edit settings'}
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='SystemName'>
<Field name='system_name' placeholder='SystemName' />
</FormField>
<FormField label='LocationText'>
<Field name='location_text' placeholder='LocationText' />
</FormField>
<FormField label='Latitude'>
<Field type='number' name='latitude' placeholder='Latitude' />
</FormField>
<FormField label='Longitude'>
<Field type='number' name='longitude' placeholder='Longitude' />
</FormField>
<FormField label='Wi-FiSSID'>
<Field name='wifi_ssid' placeholder='Wi-FiSSID' />
</FormField>
<FormField label='Wi-FiPassword'>
<Field name='wifi_password' placeholder='Wi-FiPassword' />
</FormField>
<FormField label='IPMode' labelFor='ip_mode'>
<Field name='ip_mode' id='ip_mode' component='select'>
<option value='static'>static</option>
<option value='dhcp'>dhcp</option>
</Field>
</FormField>
<FormField label='IPAddress'>
<Field name='ip_address' placeholder='IPAddress' />
</FormField>
<FormField label='SensorSelector' labelFor='sensor_selector'>
<Field
name='sensor_selector'
id='sensor_selector'
component='select'
>
<option value='none'>none</option>
<option value='DHT11'>DHT11</option>
<option value='DHT22'>DHT22</option>
<option value='DS18B20'>DS18B20</option>
</Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() => router.push('/settings/settings-list')}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
EditSettings.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'UPDATE_SETTINGS'}>
{page}
</LayoutAuthenticated>
);
};
export default EditSettings;

186
frontend/src/pages/settings/settings-edit.tsx Normal file
View File

@ -0,0 +1,186 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { SwitchField } from '../../components/SwitchField';
import { RichTextField } from '../../components/RichTextField';
import { update, fetch } from '../../stores/settings/settingsSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
const EditSettingsPage = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const initVals = {
system_name: '',
location_text: '',
latitude: '',
longitude: '',
wifi_ssid: '',
wifi_password: '',
ip_mode: '',
ip_address: '',
sensor_selector: '',
};
const [initialValues, setInitialValues] = useState(initVals);
const { settings } = useAppSelector((state) => state.settings);
const { id } = router.query;
useEffect(() => {
dispatch(fetch({ id: id }));
}, [id]);
useEffect(() => {
if (typeof settings === 'object') {
setInitialValues(settings);
}
}, [settings]);
useEffect(() => {
if (typeof settings === 'object') {
const newInitialVal = { ...initVals };
Object.keys(initVals).forEach((el) => (newInitialVal[el] = settings[el]));
setInitialValues(newInitialVal);
}
}, [settings]);
const handleSubmit = async (data) => {
await dispatch(update({ id: id, data }));
await router.push('/settings/settings-list');
};
return (
<>
<Head>
<title>{getPageTitle('Edit settings')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={'Edit settings'}
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='SystemName'>
<Field name='system_name' placeholder='SystemName' />
</FormField>
<FormField label='LocationText'>
<Field name='location_text' placeholder='LocationText' />
</FormField>
<FormField label='Latitude'>
<Field type='number' name='latitude' placeholder='Latitude' />
</FormField>
<FormField label='Longitude'>
<Field type='number' name='longitude' placeholder='Longitude' />
</FormField>
<FormField label='Wi-FiSSID'>
<Field name='wifi_ssid' placeholder='Wi-FiSSID' />
</FormField>
<FormField label='Wi-FiPassword'>
<Field name='wifi_password' placeholder='Wi-FiPassword' />
</FormField>
<FormField label='IPMode' labelFor='ip_mode'>
<Field name='ip_mode' id='ip_mode' component='select'>
<option value='static'>static</option>
<option value='dhcp'>dhcp</option>
</Field>
</FormField>
<FormField label='IPAddress'>
<Field name='ip_address' placeholder='IPAddress' />
</FormField>
<FormField label='SensorSelector' labelFor='sensor_selector'>
<Field
name='sensor_selector'
id='sensor_selector'
component='select'
>
<option value='none'>none</option>
<option value='DHT11'>DHT11</option>
<option value='DHT22'>DHT22</option>
<option value='DS18B20'>DS18B20</option>
</Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() => router.push('/settings/settings-list')}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
EditSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'UPDATE_SETTINGS'}>
{page}
</LayoutAuthenticated>
);
};
export default EditSettingsPage;

188
frontend/src/pages/settings/settings-list.tsx Normal file
View File

@ -0,0 +1,188 @@
import { mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import TableSettings from '../../components/Settings/TableSettings';
import BaseButton from '../../components/BaseButton';
import axios from 'axios';
import Link from 'next/link';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import CardBoxModal from '../../components/CardBoxModal';
import DragDropFilePicker from '../../components/DragDropFilePicker';
import { setRefetch, uploadCsv } from '../../stores/settings/settingsSlice';
import { hasPermission } from '../../helpers/userPermissions';
const SettingsTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const dispatch = useAppDispatch();
const [filters] = useState([
{ label: 'SystemName', title: 'system_name' },
{ label: 'LocationText', title: 'location_text' },
{ label: 'Wi-FiSSID', title: 'wifi_ssid' },
{ label: 'Wi-FiPassword', title: 'wifi_password' },
{ label: 'IPAddress', title: 'ip_address' },
{ label: 'Latitude', title: 'latitude', number: 'true' },
{ label: 'Longitude', title: 'longitude', number: 'true' },
{
label: 'IPMode',
title: 'ip_mode',
type: 'enum',
options: ['static', 'dhcp'],
},
{
label: 'SensorSelector',
title: 'sensor_selector',
type: 'enum',
options: ['none', 'DHT11', 'DHT22', 'DS18B20'],
},
]);
const hasCreatePermission =
currentUser && hasPermission(currentUser, 'CREATE_SETTINGS');
const addFilter = () => {
const newItem = {
id: uniqueId(),
fields: {
filterValue: '',
filterValueFrom: '',
filterValueTo: '',
selectedField: '',
},
};
newItem.fields.selectedField = filters[0].title;
setFilterItems([...filterItems, newItem]);
};
const getSettingsCSV = async () => {
const response = await axios({
url: '/settings?filetype=csv',
method: 'GET',
responseType: 'blob',
});
const type = response.headers['content-type'];
const blob = new Blob([response.data], { type: type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'settingsCSV.csv';
link.click();
};
const onModalConfirm = async () => {
if (!csvFile) return;
await dispatch(uploadCsv(csvFile));
dispatch(setRefetch(true));
setCsvFile(null);
setIsModalActive(false);
};
const onModalCancel = () => {
setCsvFile(null);
setIsModalActive(false);
};
return (
<>
<Head>
<title>{getPageTitle('Settings')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='Settings'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
{hasCreatePermission && (
<BaseButton
className={'mr-3'}
href={'/settings/settings-new'}
color='info'
label='New Item'
/>
)}
<BaseButton
className={'mr-3'}
color='info'
label='Filter'
onClick={addFilter}
/>
<BaseButton
className={'mr-3'}
color='info'
label='Download CSV'
onClick={getSettingsCSV}
/>
{hasCreatePermission && (
<BaseButton
color='info'
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
</div>
<div className='md:inline-flex items-center ms-auto'>
<Link href={'/settings/settings-table'}>Switch to Table</Link>
</div>
</CardBox>
<CardBox className='mb-6' hasTable>
<TableSettings
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={false}
/>
</CardBox>
</SectionMain>
<CardBoxModal
title='Upload CSV'
buttonColor='info'
buttonLabel={'Confirm'}
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
isActive={isModalActive}
onConfirm={onModalConfirm}
onCancel={onModalCancel}
>
<DragDropFilePicker
file={csvFile}
setFile={setCsvFile}
formats={'.csv'}
/>
</CardBoxModal>
</>
);
};
SettingsTablesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_SETTINGS'}>
{page}
</LayoutAuthenticated>
);
};
export default SettingsTablesPage;

162
frontend/src/pages/settings/settings-new.tsx Normal file
View File

@ -0,0 +1,162 @@
import {
mdiAccount,
mdiChartTimelineVariant,
mdiMail,
mdiUpload,
} from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SwitchField } from '../../components/SwitchField';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { RichTextField } from '../../components/RichTextField';
import { create } from '../../stores/settings/settingsSlice';
import { useAppDispatch } from '../../stores/hooks';
import { useRouter } from 'next/router';
import moment from 'moment';
const initialValues = {
system_name: '',
location_text: '',
latitude: '',
longitude: '',
wifi_ssid: '',
wifi_password: '',
ip_mode: 'static',
ip_address: '',
sensor_selector: 'none',
};
const SettingsNew = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const handleSubmit = async (data) => {
await dispatch(create(data));
await router.push('/settings/settings-list');
};
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='New Item'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='SystemName'>
<Field name='system_name' placeholder='SystemName' />
</FormField>
<FormField label='LocationText'>
<Field name='location_text' placeholder='LocationText' />
</FormField>
<FormField label='Latitude'>
<Field type='number' name='latitude' placeholder='Latitude' />
</FormField>
<FormField label='Longitude'>
<Field type='number' name='longitude' placeholder='Longitude' />
</FormField>
<FormField label='Wi-FiSSID'>
<Field name='wifi_ssid' placeholder='Wi-FiSSID' />
</FormField>
<FormField label='Wi-FiPassword'>
<Field name='wifi_password' placeholder='Wi-FiPassword' />
</FormField>
<FormField label='IPMode' labelFor='ip_mode'>
<Field name='ip_mode' id='ip_mode' component='select'>
<option value='static'>static</option>
<option value='dhcp'>dhcp</option>
</Field>
</FormField>
<FormField label='IPAddress'>
<Field name='ip_address' placeholder='IPAddress' />
</FormField>
<FormField label='SensorSelector' labelFor='sensor_selector'>
<Field
name='sensor_selector'
id='sensor_selector'
component='select'
>
<option value='none'>none</option>
<option value='DHT11'>DHT11</option>
<option value='DHT22'>DHT22</option>
<option value='DS18B20'>DS18B20</option>
</Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() => router.push('/settings/settings-list')}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
SettingsNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'CREATE_SETTINGS'}>
{page}
</LayoutAuthenticated>
);
};
export default SettingsNew;

187
frontend/src/pages/settings/settings-table.tsx Normal file
View File

@ -0,0 +1,187 @@
import { mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import TableSettings from '../../components/Settings/TableSettings';
import BaseButton from '../../components/BaseButton';
import axios from 'axios';
import Link from 'next/link';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import CardBoxModal from '../../components/CardBoxModal';
import DragDropFilePicker from '../../components/DragDropFilePicker';
import { setRefetch, uploadCsv } from '../../stores/settings/settingsSlice';
import { hasPermission } from '../../helpers/userPermissions';
const SettingsTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const dispatch = useAppDispatch();
const [filters] = useState([
{ label: 'SystemName', title: 'system_name' },
{ label: 'LocationText', title: 'location_text' },
{ label: 'Wi-FiSSID', title: 'wifi_ssid' },
{ label: 'Wi-FiPassword', title: 'wifi_password' },
{ label: 'IPAddress', title: 'ip_address' },
{ label: 'Latitude', title: 'latitude', number: 'true' },
{ label: 'Longitude', title: 'longitude', number: 'true' },
{
label: 'IPMode',
title: 'ip_mode',
type: 'enum',
options: ['static', 'dhcp'],
},
{
label: 'SensorSelector',
title: 'sensor_selector',
type: 'enum',
options: ['none', 'DHT11', 'DHT22', 'DS18B20'],
},
]);
const hasCreatePermission =
currentUser && hasPermission(currentUser, 'CREATE_SETTINGS');
const addFilter = () => {
const newItem = {
id: uniqueId(),
fields: {
filterValue: '',
filterValueFrom: '',
filterValueTo: '',
selectedField: '',
},
};
newItem.fields.selectedField = filters[0].title;
setFilterItems([...filterItems, newItem]);
};
const getSettingsCSV = async () => {
const response = await axios({
url: '/settings?filetype=csv',
method: 'GET',
responseType: 'blob',
});
const type = response.headers['content-type'];
const blob = new Blob([response.data], { type: type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'settingsCSV.csv';
link.click();
};
const onModalConfirm = async () => {
if (!csvFile) return;
await dispatch(uploadCsv(csvFile));
dispatch(setRefetch(true));
setCsvFile(null);
setIsModalActive(false);
};
const onModalCancel = () => {
setCsvFile(null);
setIsModalActive(false);
};
return (
<>
<Head>
<title>{getPageTitle('Settings')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='Settings'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
{hasCreatePermission && (
<BaseButton
className={'mr-3'}
href={'/settings/settings-new'}
color='info'
label='New Item'
/>
)}
<BaseButton
className={'mr-3'}
color='info'
label='Filter'
onClick={addFilter}
/>
<BaseButton
className={'mr-3'}
color='info'
label='Download CSV'
onClick={getSettingsCSV}
/>
{hasCreatePermission && (
<BaseButton
color='info'
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
<Link href={'/settings/settings-list'}>
Back to <span className='capitalize'>list</span>
</Link>
</div>
</CardBox>
<CardBox className='mb-6' hasTable>
<TableSettings
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={true}
/>
</CardBox>
</SectionMain>
<CardBoxModal
title='Upload CSV'
buttonColor='info'
buttonLabel={'Confirm'}
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
isActive={isModalActive}
onConfirm={onModalConfirm}
onCancel={onModalCancel}
>
<DragDropFilePicker
file={csvFile}
setFile={setCsvFile}
formats={'.csv'}
/>
</CardBoxModal>
</>
);
};
SettingsTablesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_SETTINGS'}>
{page}
</LayoutAuthenticated>
);
};
export default SettingsTablesPage;

123
frontend/src/pages/settings/settings-view.tsx Normal file
View File

@ -0,0 +1,123 @@
import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { fetch } from '../../stores/settings/settingsSlice';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { getPageTitle } from '../../config';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import SectionMain from '../../components/SectionMain';
import CardBox from '../../components/CardBox';
import BaseButton from '../../components/BaseButton';
import BaseDivider from '../../components/BaseDivider';
import { mdiChartTimelineVariant } from '@mdi/js';
import { SwitchField } from '../../components/SwitchField';
import FormField from '../../components/FormField';
const SettingsView = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const { settings } = useAppSelector((state) => state.settings);
const { id } = router.query;
function removeLastCharacter(str) {
console.log(str, `str`);
return str.slice(0, -1);
}
useEffect(() => {
dispatch(fetch({ id }));
}, [dispatch, id]);
return (
<>
<Head>
<title>{getPageTitle('View settings')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={removeLastCharacter('View settings')}
main
>
<BaseButton
color='info'
label='Edit'
href={`/settings/settings-edit/?id=${id}`}
/>
</SectionTitleLineWithButton>
<CardBox>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>SystemName</p>
<p>{settings?.system_name}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>LocationText</p>
<p>{settings?.location_text}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Latitude</p>
<p>{settings?.latitude || 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Longitude</p>
<p>{settings?.longitude || 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Wi-FiSSID</p>
<p>{settings?.wifi_ssid}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Wi-FiPassword</p>
<p>{settings?.wifi_password}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>IPMode</p>
<p>{settings?.ip_mode ?? 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>IPAddress</p>
<p>{settings?.ip_address}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>SensorSelector</p>
<p>{settings?.sensor_selector ?? 'No data'}</p>
</div>
<BaseDivider />
<BaseButton
color='info'
label='Back'
onClick={() => router.push('/settings/settings-list')}
/>
</CardBox>
</SectionMain>
</>
);
};
SettingsView.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_SETTINGS'}>
{page}
</LayoutAuthenticated>
);
};
export default SettingsView;

157
frontend/src/pages/status/[statusId].tsx Normal file
View File

@ -0,0 +1,157 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { SwitchField } from '../../components/SwitchField';
import { RichTextField } from '../../components/RichTextField';
import { update, fetch } from '../../stores/status/statusSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
const EditStatus = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const initVals = {
wifi_status: '',
wifi_strength: '',
sensor_status: false,
thingsboard_status: false,
};
const [initialValues, setInitialValues] = useState(initVals);
const { status } = useAppSelector((state) => state.status);
const { statusId } = router.query;
useEffect(() => {
dispatch(fetch({ id: statusId }));
}, [statusId]);
useEffect(() => {
if (typeof status === 'object') {
setInitialValues(status);
}
}, [status]);
useEffect(() => {
if (typeof status === 'object') {
const newInitialVal = { ...initVals };
Object.keys(initVals).forEach((el) => (newInitialVal[el] = status[el]));
setInitialValues(newInitialVal);
}
}, [status]);
const handleSubmit = async (data) => {
await dispatch(update({ id: statusId, data }));
await router.push('/status/status-list');
};
return (
<>
<Head>
<title>{getPageTitle('Edit status')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={'Edit status'}
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Wi-FiStatus'>
<Field name='wifi_status' placeholder='Wi-FiStatus' />
</FormField>
<FormField label='Wi-FiStrength'>
<Field
type='number'
name='wifi_strength'
placeholder='Wi-FiStrength'
/>
</FormField>
<FormField label='SensorStatus' labelFor='sensor_status'>
<Field
name='sensor_status'
id='sensor_status'
component={SwitchField}
></Field>
</FormField>
<FormField
label='ThingsBoardStatus'
labelFor='thingsboard_status'
>
<Field
name='thingsboard_status'
id='thingsboard_status'
component={SwitchField}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() => router.push('/status/status-list')}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
EditStatus.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'UPDATE_STATUS'}>
{page}
</LayoutAuthenticated>
);
};
export default EditStatus;

155
frontend/src/pages/status/status-edit.tsx Normal file
View File

@ -0,0 +1,155 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { SwitchField } from '../../components/SwitchField';
import { RichTextField } from '../../components/RichTextField';
import { update, fetch } from '../../stores/status/statusSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
const EditStatusPage = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const initVals = {
wifi_status: '',
wifi_strength: '',
sensor_status: false,
thingsboard_status: false,
};
const [initialValues, setInitialValues] = useState(initVals);
const { status } = useAppSelector((state) => state.status);
const { id } = router.query;
useEffect(() => {
dispatch(fetch({ id: id }));
}, [id]);
useEffect(() => {
if (typeof status === 'object') {
setInitialValues(status);
}
}, [status]);
useEffect(() => {
if (typeof status === 'object') {
const newInitialVal = { ...initVals };
Object.keys(initVals).forEach((el) => (newInitialVal[el] = status[el]));
setInitialValues(newInitialVal);
}
}, [status]);
const handleSubmit = async (data) => {
await dispatch(update({ id: id, data }));
await router.push('/status/status-list');
};
return (
<>
<Head>
<title>{getPageTitle('Edit status')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={'Edit status'}
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Wi-FiStatus'>
<Field name='wifi_status' placeholder='Wi-FiStatus' />
</FormField>
<FormField label='Wi-FiStrength'>
<Field
type='number'
name='wifi_strength'
placeholder='Wi-FiStrength'
/>
</FormField>
<FormField label='SensorStatus' labelFor='sensor_status'>
<Field
name='sensor_status'
id='sensor_status'
component={SwitchField}
></Field>
</FormField>
<FormField
label='ThingsBoardStatus'
labelFor='thingsboard_status'
>
<Field
name='thingsboard_status'
id='thingsboard_status'
component={SwitchField}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() => router.push('/status/status-list')}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
EditStatusPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'UPDATE_STATUS'}>
{page}
</LayoutAuthenticated>
);
};
export default EditStatusPage;

167
frontend/src/pages/status/status-list.tsx Normal file
View File

@ -0,0 +1,167 @@
import { mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import TableStatus from '../../components/Status/TableStatus';
import BaseButton from '../../components/BaseButton';
import axios from 'axios';
import Link from 'next/link';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import CardBoxModal from '../../components/CardBoxModal';
import DragDropFilePicker from '../../components/DragDropFilePicker';
import { setRefetch, uploadCsv } from '../../stores/status/statusSlice';
import { hasPermission } from '../../helpers/userPermissions';
const StatusTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const dispatch = useAppDispatch();
const [filters] = useState([
{ label: 'Wi-FiStatus', title: 'wifi_status' },
{ label: 'Wi-FiStrength', title: 'wifi_strength', number: 'true' },
]);
const hasCreatePermission =
currentUser && hasPermission(currentUser, 'CREATE_STATUS');
const addFilter = () => {
const newItem = {
id: uniqueId(),
fields: {
filterValue: '',
filterValueFrom: '',
filterValueTo: '',
selectedField: '',
},
};
newItem.fields.selectedField = filters[0].title;
setFilterItems([...filterItems, newItem]);
};
const getStatusCSV = async () => {
const response = await axios({
url: '/status?filetype=csv',
method: 'GET',
responseType: 'blob',
});
const type = response.headers['content-type'];
const blob = new Blob([response.data], { type: type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'statusCSV.csv';
link.click();
};
const onModalConfirm = async () => {
if (!csvFile) return;
await dispatch(uploadCsv(csvFile));
dispatch(setRefetch(true));
setCsvFile(null);
setIsModalActive(false);
};
const onModalCancel = () => {
setCsvFile(null);
setIsModalActive(false);
};
return (
<>
<Head>
<title>{getPageTitle('Status')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='Status'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
{hasCreatePermission && (
<BaseButton
className={'mr-3'}
href={'/status/status-new'}
color='info'
label='New Item'
/>
)}
<BaseButton
className={'mr-3'}
color='info'
label='Filter'
onClick={addFilter}
/>
<BaseButton
className={'mr-3'}
color='info'
label='Download CSV'
onClick={getStatusCSV}
/>
{hasCreatePermission && (
<BaseButton
color='info'
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
</div>
<div className='md:inline-flex items-center ms-auto'>
<Link href={'/status/status-table'}>Switch to Table</Link>
</div>
</CardBox>
<CardBox className='mb-6' hasTable>
<TableStatus
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={false}
/>
</CardBox>
</SectionMain>
<CardBoxModal
title='Upload CSV'
buttonColor='info'
buttonLabel={'Confirm'}
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
isActive={isModalActive}
onConfirm={onModalConfirm}
onCancel={onModalCancel}
>
<DragDropFilePicker
file={csvFile}
setFile={setCsvFile}
formats={'.csv'}
/>
</CardBoxModal>
</>
);
};
StatusTablesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_STATUS'}>{page}</LayoutAuthenticated>
);
};
export default StatusTablesPage;

131
frontend/src/pages/status/status-new.tsx Normal file
View File

@ -0,0 +1,131 @@
import {
mdiAccount,
mdiChartTimelineVariant,
mdiMail,
mdiUpload,
} from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SwitchField } from '../../components/SwitchField';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { RichTextField } from '../../components/RichTextField';
import { create } from '../../stores/status/statusSlice';
import { useAppDispatch } from '../../stores/hooks';
import { useRouter } from 'next/router';
import moment from 'moment';
const initialValues = {
wifi_status: '',
wifi_strength: '',
sensor_status: false,
thingsboard_status: false,
};
const StatusNew = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const handleSubmit = async (data) => {
await dispatch(create(data));
await router.push('/status/status-list');
};
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='New Item'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Wi-FiStatus'>
<Field name='wifi_status' placeholder='Wi-FiStatus' />
</FormField>
<FormField label='Wi-FiStrength'>
<Field
type='number'
name='wifi_strength'
placeholder='Wi-FiStrength'
/>
</FormField>
<FormField label='SensorStatus' labelFor='sensor_status'>
<Field
name='sensor_status'
id='sensor_status'
component={SwitchField}
></Field>
</FormField>
<FormField
label='ThingsBoardStatus'
labelFor='thingsboard_status'
>
<Field
name='thingsboard_status'
id='thingsboard_status'
component={SwitchField}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() => router.push('/status/status-list')}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
StatusNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'CREATE_STATUS'}>
{page}
</LayoutAuthenticated>
);
};
export default StatusNew;

166
frontend/src/pages/status/status-table.tsx Normal file
View File

@ -0,0 +1,166 @@
import { mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import TableStatus from '../../components/Status/TableStatus';
import BaseButton from '../../components/BaseButton';
import axios from 'axios';
import Link from 'next/link';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import CardBoxModal from '../../components/CardBoxModal';
import DragDropFilePicker from '../../components/DragDropFilePicker';
import { setRefetch, uploadCsv } from '../../stores/status/statusSlice';
import { hasPermission } from '../../helpers/userPermissions';
const StatusTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const dispatch = useAppDispatch();
const [filters] = useState([
{ label: 'Wi-FiStatus', title: 'wifi_status' },
{ label: 'Wi-FiStrength', title: 'wifi_strength', number: 'true' },
]);
const hasCreatePermission =
currentUser && hasPermission(currentUser, 'CREATE_STATUS');
const addFilter = () => {
const newItem = {
id: uniqueId(),
fields: {
filterValue: '',
filterValueFrom: '',
filterValueTo: '',
selectedField: '',
},
};
newItem.fields.selectedField = filters[0].title;
setFilterItems([...filterItems, newItem]);
};
const getStatusCSV = async () => {
const response = await axios({
url: '/status?filetype=csv',
method: 'GET',
responseType: 'blob',
});
const type = response.headers['content-type'];
const blob = new Blob([response.data], { type: type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'statusCSV.csv';
link.click();
};
const onModalConfirm = async () => {
if (!csvFile) return;
await dispatch(uploadCsv(csvFile));
dispatch(setRefetch(true));
setCsvFile(null);
setIsModalActive(false);
};
const onModalCancel = () => {
setCsvFile(null);
setIsModalActive(false);
};
return (
<>
<Head>
<title>{getPageTitle('Status')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='Status'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
{hasCreatePermission && (
<BaseButton
className={'mr-3'}
href={'/status/status-new'}
color='info'
label='New Item'
/>
)}
<BaseButton
className={'mr-3'}
color='info'
label='Filter'
onClick={addFilter}
/>
<BaseButton
className={'mr-3'}
color='info'
label='Download CSV'
onClick={getStatusCSV}
/>
{hasCreatePermission && (
<BaseButton
color='info'
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
<Link href={'/status/status-list'}>
Back to <span className='capitalize'>card</span>
</Link>
</div>
</CardBox>
<CardBox className='mb-6' hasTable>
<TableStatus
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={true}
/>
</CardBox>
</SectionMain>
<CardBoxModal
title='Upload CSV'
buttonColor='info'
buttonLabel={'Confirm'}
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
isActive={isModalActive}
onConfirm={onModalConfirm}
onCancel={onModalCancel}
>
<DragDropFilePicker
file={csvFile}
setFile={setCsvFile}
formats={'.csv'}
/>
</CardBoxModal>
</>
);
};
StatusTablesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_STATUS'}>{page}</LayoutAuthenticated>
);
};
export default StatusTablesPage;

105
frontend/src/pages/status/status-view.tsx Normal file
View File

@ -0,0 +1,105 @@
import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { fetch } from '../../stores/status/statusSlice';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { getPageTitle } from '../../config';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import SectionMain from '../../components/SectionMain';
import CardBox from '../../components/CardBox';
import BaseButton from '../../components/BaseButton';
import BaseDivider from '../../components/BaseDivider';
import { mdiChartTimelineVariant } from '@mdi/js';
import { SwitchField } from '../../components/SwitchField';
import FormField from '../../components/FormField';
const StatusView = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const { status } = useAppSelector((state) => state.status);
const { id } = router.query;
function removeLastCharacter(str) {
console.log(str, `str`);
return str.slice(0, -1);
}
useEffect(() => {
dispatch(fetch({ id }));
}, [dispatch, id]);
return (
<>
<Head>
<title>{getPageTitle('View status')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={removeLastCharacter('View status')}
main
>
<BaseButton
color='info'
label='Edit'
href={`/status/status-edit/?id=${id}`}
/>
</SectionTitleLineWithButton>
<CardBox>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Wi-FiStatus</p>
<p>{status?.wifi_status}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Wi-FiStrength</p>
<p>{status?.wifi_strength || 'No data'}</p>
</div>
<FormField label='SensorStatus'>
<SwitchField
field={{ name: 'sensor_status', value: status?.sensor_status }}
form={{ setFieldValue: () => null }}
disabled
/>
</FormField>
<FormField label='ThingsBoardStatus'>
<SwitchField
field={{
name: 'thingsboard_status',
value: status?.thingsboard_status,
}}
form={{ setFieldValue: () => null }}
disabled
/>
</FormField>
<BaseDivider />
<BaseButton
color='info'
label='Back'
onClick={() => router.push('/status/status-list')}
/>
</CardBox>
</SectionMain>
</>
);
};
StatusView.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_STATUS'}>{page}</LayoutAuthenticated>
);
};
export default StatusView;

236
frontend/src/stores/settings/settingsSlice.ts Normal file
View File

@ -0,0 +1,236 @@
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import axios from 'axios';
import {
fulfilledNotify,
rejectNotify,
resetNotify,
} from '../../helpers/notifyStateHandler';
interface MainState {
settings: any;
loading: boolean;
count: number;
refetch: boolean;
rolesWidgets: any[];
notify: {
showNotification: boolean;
textNotification: string;
typeNotification: string;
};
}
const initialState: MainState = {
settings: [],
loading: false,
count: 0,
refetch: false,
rolesWidgets: [],
notify: {
showNotification: false,
textNotification: '',
typeNotification: 'warn',
},
};
export const fetch = createAsyncThunk('settings/fetch', async (data: any) => {
const { id, query } = data;
const result = await axios.get(`settings${query || (id ? `/${id}` : '')}`);
return id
? result.data
: { rows: result.data.rows, count: result.data.count };
});
export const deleteItemsByIds = createAsyncThunk(
'settings/deleteByIds',
async (data: any, { rejectWithValue }) => {
try {
await axios.post('settings/deleteByIds', { data });
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const deleteItem = createAsyncThunk(
'settings/deleteSettings',
async (id: string, { rejectWithValue }) => {
try {
await axios.delete(`settings/${id}`);
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const create = createAsyncThunk(
'settings/createSettings',
async (data: any, { rejectWithValue }) => {
try {
const result = await axios.post('settings', { data });
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const uploadCsv = createAsyncThunk(
'settings/uploadCsv',
async (file: File, { rejectWithValue }) => {
try {
const data = new FormData();
data.append('file', file);
data.append('filename', file.name);
const result = await axios.post('settings/bulk-import', data, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const update = createAsyncThunk(
'settings/updateSettings',
async (payload: any, { rejectWithValue }) => {
try {
const result = await axios.put(`settings/${payload.id}`, {
id: payload.id,
data: payload.data,
});
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const settingsSlice = createSlice({
name: 'settings',
initialState,
reducers: {
setRefetch: (state, action: PayloadAction<boolean>) => {
state.refetch = action.payload;
},
},
extraReducers: (builder) => {
builder.addCase(fetch.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(fetch.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(fetch.fulfilled, (state, action) => {
if (action.payload.rows && action.payload.count >= 0) {
state.settings = action.payload.rows;
state.count = action.payload.count;
} else {
state.settings = action.payload;
}
state.loading = false;
});
builder.addCase(deleteItemsByIds.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(deleteItemsByIds.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, 'Settings has been deleted');
});
builder.addCase(deleteItemsByIds.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(deleteItem.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(deleteItem.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, `${'Settings'.slice(0, -1)} has been deleted`);
});
builder.addCase(deleteItem.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(create.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(create.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(create.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, `${'Settings'.slice(0, -1)} has been created`);
});
builder.addCase(update.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(update.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, `${'Settings'.slice(0, -1)} has been updated`);
});
builder.addCase(update.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(uploadCsv.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(uploadCsv.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, 'Settings has been uploaded');
});
builder.addCase(uploadCsv.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
},
});
// Action creators are generated for each case reducer function
export const { setRefetch } = settingsSlice.actions;
export default settingsSlice.reducer;

236
frontend/src/stores/status/statusSlice.ts Normal file
View File

@ -0,0 +1,236 @@
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import axios from 'axios';
import {
fulfilledNotify,
rejectNotify,
resetNotify,
} from '../../helpers/notifyStateHandler';
interface MainState {
status: any;
loading: boolean;
count: number;
refetch: boolean;
rolesWidgets: any[];
notify: {
showNotification: boolean;
textNotification: string;
typeNotification: string;
};
}
const initialState: MainState = {
status: [],
loading: false,
count: 0,
refetch: false,
rolesWidgets: [],
notify: {
showNotification: false,
textNotification: '',
typeNotification: 'warn',
},
};
export const fetch = createAsyncThunk('status/fetch', async (data: any) => {
const { id, query } = data;
const result = await axios.get(`status${query || (id ? `/${id}` : '')}`);
return id
? result.data
: { rows: result.data.rows, count: result.data.count };
});
export const deleteItemsByIds = createAsyncThunk(
'status/deleteByIds',
async (data: any, { rejectWithValue }) => {
try {
await axios.post('status/deleteByIds', { data });
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const deleteItem = createAsyncThunk(
'status/deleteStatus',
async (id: string, { rejectWithValue }) => {
try {
await axios.delete(`status/${id}`);
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const create = createAsyncThunk(
'status/createStatus',
async (data: any, { rejectWithValue }) => {
try {
const result = await axios.post('status', { data });
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const uploadCsv = createAsyncThunk(
'status/uploadCsv',
async (file: File, { rejectWithValue }) => {
try {
const data = new FormData();
data.append('file', file);
data.append('filename', file.name);
const result = await axios.post('status/bulk-import', data, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const update = createAsyncThunk(
'status/updateStatus',
async (payload: any, { rejectWithValue }) => {
try {
const result = await axios.put(`status/${payload.id}`, {
id: payload.id,
data: payload.data,
});
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const statusSlice = createSlice({
name: 'status',
initialState,
reducers: {
setRefetch: (state, action: PayloadAction<boolean>) => {
state.refetch = action.payload;
},
},
extraReducers: (builder) => {
builder.addCase(fetch.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(fetch.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(fetch.fulfilled, (state, action) => {
if (action.payload.rows && action.payload.count >= 0) {
state.status = action.payload.rows;
state.count = action.payload.count;
} else {
state.status = action.payload;
}
state.loading = false;
});
builder.addCase(deleteItemsByIds.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(deleteItemsByIds.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, 'Status has been deleted');
});
builder.addCase(deleteItemsByIds.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(deleteItem.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(deleteItem.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, `${'Status'.slice(0, -1)} has been deleted`);
});
builder.addCase(deleteItem.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(create.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(create.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(create.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, `${'Status'.slice(0, -1)} has been created`);
});
builder.addCase(update.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(update.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, `${'Status'.slice(0, -1)} has been updated`);
});
builder.addCase(update.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(uploadCsv.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(uploadCsv.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, 'Status has been uploaded');
});
builder.addCase(uploadCsv.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
},
});
// Action creators are generated for each case reducer function
export const { setRefetch } = statusSlice.actions;
export default statusSlice.reducer;

12
frontend/src/stores/store.ts
View File

@ -5,10 +5,10 @@ import authSlice from './authSlice';
import openAiSlice from './openAiSlice';
import usersSlice from './users/usersSlice';
import integrationsSlice from './integrations/integrationsSlice';
import statusSlice from './status/statusSlice';
import sensorsSlice from './sensors/sensorsSlice';
import system_settingsSlice from './system_settings/system_settingsSlice';
import system_statusSlice from './system_status/system_statusSlice';
import integrationsSlice from './integrations/integrationsSlice';
import settingsSlice from './settings/settingsSlice';
import rolesSlice from './roles/rolesSlice';
import permissionsSlice from './permissions/permissionsSlice';
@ -20,10 +20,10 @@ export const store = configureStore({
openAi: openAiSlice,
users: usersSlice,
integrations: integrationsSlice,
status: statusSlice,
sensors: sensorsSlice,
system_settings: system_settingsSlice,
system_status: system_statusSlice,
integrations: integrationsSlice,
settings: settingsSlice,
roles: rolesSlice,
permissions: permissionsSlice,
},