Merge branch 'master' into release
This commit is contained in:
commit
a1637181fb
31
app.js
31
app.js
@ -8,6 +8,7 @@ const path = require('path');
|
|||||||
const config = require('./config');
|
const config = require('./config');
|
||||||
const so = require('./includes/storeObject');
|
const so = require('./includes/storeObject');
|
||||||
const exec = require('child_process').exec;
|
const exec = require('child_process').exec;
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
@ -54,8 +55,34 @@ app.get(['/admin', '/admin/*'], (req, res) => {
|
|||||||
res.sendFile(path.resolve(__dirname, 'views', 'admin.html'));
|
res.sendFile(path.resolve(__dirname, 'views', 'admin.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.get('/camevent', (req, res) => {
|
||||||
|
let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
|
||||||
|
ip = ip.split(':').pop();
|
||||||
|
let cmd = `camcam ${ip} ${Math.floor(Date.now() / 1000)}`;
|
||||||
|
exec(cmd, (err, sout, serr) => {
|
||||||
|
res.send({ ip });
|
||||||
|
});
|
||||||
|
})
|
||||||
|
app.get('/viewcamimg/:dir/:img', async(req, res) => {
|
||||||
|
let dir = req.params.dir;
|
||||||
|
let img = req.params.img;
|
||||||
|
if (!dir || !img) return res.status(404).end();
|
||||||
|
try {
|
||||||
|
let stat = await new Promise((resolve, reject) => {
|
||||||
|
fs.stat(path.resolve(config.cmdpath.ipcamsave, dir, img), (err, stats) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
return resolve(stats);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if (!stat.isFile()) return res.status(404).end();
|
||||||
|
} catch (e) {
|
||||||
|
return res.status(404).end();
|
||||||
|
}
|
||||||
|
res.sendfile(path.resolve(config.cmdpath.ipcamsave, dir, img))
|
||||||
|
})
|
||||||
|
|
||||||
app.get('/servcmd', (req, res) => {
|
app.get('/servcmd', (req, res) => {
|
||||||
res.send({ status: `exit time ${Date.now()}` });
|
res.send({ status: `exit time ${(new Date()).toString()}` });
|
||||||
setTimeout(() => { process.exit(1) }, 2000);
|
setTimeout(() => { process.exit(1) }, 2000);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -67,7 +94,7 @@ app.get('/fixmysql', (req, res) => {
|
|||||||
restart: ''
|
restart: ''
|
||||||
};
|
};
|
||||||
exec(cmd, (err, stdout, stderr) => {
|
exec(cmd, (err, stdout, stderr) => {
|
||||||
let cmd = 'systemctl restart mysqld';
|
let cmd = 'systemctl start mysqld';
|
||||||
json.rm = stdout;
|
json.rm = stdout;
|
||||||
exec(cmd, (err, sout, serr) => {
|
exec(cmd, (err, sout, serr) => {
|
||||||
json.restart = sout;
|
json.restart = sout;
|
||||||
|
@ -4,7 +4,8 @@
|
|||||||
},
|
},
|
||||||
"uni_token": "webiounitoken",
|
"uni_token": "webiounitoken",
|
||||||
"perpage": 10,
|
"perpage": 10,
|
||||||
"leone_limie": 40,
|
"leone_limit": 40,
|
||||||
|
"ipcam_limit": 4,
|
||||||
"db": {
|
"db": {
|
||||||
"user": "root",
|
"user": "root",
|
||||||
"pass": "16055536",
|
"pass": "16055536",
|
||||||
@ -20,7 +21,8 @@
|
|||||||
"db8": "jciocln",
|
"db8": "jciocln",
|
||||||
"db9": "jcbtwristband",
|
"db9": "jcbtwristband",
|
||||||
"db10": "jcmblog",
|
"db10": "jcmblog",
|
||||||
"db11": "jciocserver"
|
"db11": "jciocserver",
|
||||||
|
"db12": "jcioccam"
|
||||||
},
|
},
|
||||||
"permission": {
|
"permission": {
|
||||||
"dio": true,
|
"dio": true,
|
||||||
@ -45,6 +47,7 @@
|
|||||||
"iocmd": "/home/www/cmd/cmdio",
|
"iocmd": "/home/www/cmd/cmdio",
|
||||||
"leonert": "/home/www/tmp/rtles",
|
"leonert": "/home/www/tmp/rtles",
|
||||||
"htsrt": "/home/www/tmp/rthts",
|
"htsrt": "/home/www/tmp/rthts",
|
||||||
"version": "/factory/webioa_version"
|
"version": "/factory/webioa_version",
|
||||||
|
"ipcamsave": "/home/www/cam"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -66,6 +66,12 @@
|
|||||||
"ERR0064": "MAC Addr 輸入錯誤",
|
"ERR0064": "MAC Addr 輸入錯誤",
|
||||||
"ERR0065": "版本輸入錯誤",
|
"ERR0065": "版本輸入錯誤",
|
||||||
"ERR0066": "SNMP Level輸入錯誤",
|
"ERR0066": "SNMP Level輸入錯誤",
|
||||||
|
"ERR0067": "型號輸入錯誤",
|
||||||
|
"ERR0068": "事件數量輸入錯誤",
|
||||||
|
"ERR0069": "圖片數量輸入錯誤",
|
||||||
|
"ERR0070": "IPCam 裝置已達上限",
|
||||||
|
"ERR0071": "無此裝置資料",
|
||||||
|
"ERR0072": "目錄資訊取得失敗",
|
||||||
|
|
||||||
"ERR7000": "命令執行失敗",
|
"ERR7000": "命令執行失敗",
|
||||||
|
|
||||||
|
@ -8,27 +8,28 @@ const tool = require('../../includes/apiTool');
|
|||||||
const exec = require('child_process').exec;
|
const exec = require('child_process').exec;
|
||||||
const so = require('../../includes/storeObject');
|
const so = require('../../includes/storeObject');
|
||||||
const crypt = require('../../libs/crypto');
|
const crypt = require('../../libs/crypto');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
router
|
router
|
||||||
.get('/', (req, res, n) => {
|
.get('/', (req, res, n) => {
|
||||||
res.send({ name: 'WebIO IPCam API' });
|
res.send({ name: 'WebIO IPCam API' });
|
||||||
})
|
})
|
||||||
.post('*', async(req,res,n) => {
|
.post('*', async(req, res, n) => {
|
||||||
try{
|
try {
|
||||||
res.db = await mysql.getConn();
|
res.db = await mysql.getConn();
|
||||||
}catch(e){
|
} catch (e) {
|
||||||
console.log(`Get DB Connection ERROR ${e}`);
|
console.log(`Get DB Connection ERROR ${e}`);
|
||||||
return n('ERR8100');
|
return n('ERR8100');
|
||||||
}
|
}
|
||||||
n();
|
n();
|
||||||
})
|
})
|
||||||
.post('/getipcamlist', (req,res,n) => {
|
.post('/getipcamlist', (req, res, n) => {
|
||||||
if(!config.permission.ipcam) return n('ERR9000');
|
if (!config.permission.ipcam) return n('ERR9000');
|
||||||
|
|
||||||
let query = "select * from ??.??";
|
let query = "select * from ??.?? where `delete` = 0 order by `ctime`";
|
||||||
let param = [config.db.db1, 'ipcam'];
|
let param = [config.db.db1, 'jcioccamset'];
|
||||||
res.db.query(query, param, (err, row) => {
|
res.db.query(query, param, (err, row) => {
|
||||||
if(err) return rt.err(res,err,n,'ERR8000');
|
if (err) return rt.err(res, err, n, 'ERR8000');
|
||||||
|
|
||||||
res.api_res = {
|
res.api_res = {
|
||||||
record: tool.checkArray(row)
|
record: tool.checkArray(row)
|
||||||
@ -37,68 +38,253 @@ router
|
|||||||
n();
|
n();
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.post('/addipcam', (req,res,n) => {
|
.post('/addipcam', (req, res, n) => {
|
||||||
if(!config.permission.ipcam) return n('ERR9000');
|
if (!config.permission.ipcam) return n('ERR9000');
|
||||||
if(!tool.checkPermission(req)) return n('ERR9000');
|
if (!tool.checkPermission(req)) return n('ERR9000');
|
||||||
let arr = req.body;
|
let arr = req.body;
|
||||||
if(!arr.data) return n('ERR0000');
|
if (!arr.data) return n('ERR0000');
|
||||||
if(!arr.data.ip) return n('ERR0010');
|
if (!arr.data.ip) return n("ERR0010");
|
||||||
if(!arr.data.name) return n('ERR0026');
|
if (!arr.data.name) return n('ERR0026');
|
||||||
|
if (!arr.data.model) return n('ERR0067');
|
||||||
|
if (!arr.data.maxevents) return n('ERR0068');
|
||||||
|
if (!arr.data.maximg) return n('ERR0069');
|
||||||
|
if (!/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
|
||||||
|
|
||||||
if(!/^\d{1,3}\.\d{1,3}.\d{1,3}.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
|
let u = '';
|
||||||
|
let obj = so.get(req.headers['x-auth-token'] || '');
|
||||||
|
if (obj != null && 'user' in obj && 'account' in obj.user) u = obj.user.account;
|
||||||
|
|
||||||
let query = "select count(*) as c from ??.?? where `ip` = ?";
|
let active = arr.data.active == 1 ? 1 : 0;
|
||||||
let param = [config.db.db1, 'ipcam', arr.data.ip];
|
|
||||||
res.db.query(query, param, (err, row) => {
|
|
||||||
if(err || row.length == 0) return rt.err(res,err,n,'ERR8000');
|
|
||||||
if(row[0]['c'] > 0) return n('ERR0027');
|
|
||||||
|
|
||||||
let query = "insert into ??.?? (`name`, `ip`) values (?,?)";
|
!async function runSync() {
|
||||||
let param = [config.db.db1, 'ipcam', arr.data.name, arr.data.ip];
|
// data flag 0 is insert, 1 is update
|
||||||
res.db.query(query, param, (err, row) => {
|
let flag = 0;
|
||||||
if(err) return rt.err(res,err,n,'ERR8001');
|
let idx = 1;
|
||||||
res.api_res = {
|
// query db data
|
||||||
record: []
|
try {
|
||||||
};
|
let query = "select `uid` from ??.?? order by `uid` desc limit 1";
|
||||||
n();
|
let param = [config.db.db1, 'jcioccamset'];
|
||||||
});
|
let id = await tool.promiseQuery(res, query, param);
|
||||||
});
|
|
||||||
})
|
if (id.data.length > 0 && id.data[0].uid) idx = id.data[0].uid + 1;
|
||||||
.post('/delipcam', (req,res,n) => {
|
if (idx > config.ipcam_limit) {
|
||||||
if(!config.permission.ipcam) return n('ERR9000');
|
query = "select `uid` from ??.?? where `delete` = 1 limit 1";
|
||||||
if(!tool.checkPermission(req)) return n('ERR9000');
|
flag = 1;
|
||||||
let arr = req.body;
|
let id = await tool.promiseQuery(res, query, param);
|
||||||
if(!arr.data) return n('ERR0000');
|
if (id.data.length > 0 && id.data[0].uid) idx = id.data[0].uid;
|
||||||
if(!arr.data.id) return n('ERR0028');
|
else return n('ERR0070');
|
||||||
|
}
|
||||||
|
|
||||||
|
query = "select count(*) as c from ??.?? where `ip` = ?";
|
||||||
|
param = [config.db.db1, 'jcioccamset', arr.data.ip];
|
||||||
|
let count = await tool.promiseQuery(res, query, param);
|
||||||
|
if (count.data.length == 0) return n('ERR8000');
|
||||||
|
if (count.data[0].c >= 1) return n('ERR0027');
|
||||||
|
} catch (e) {
|
||||||
|
return rt.err(res, e, n, 'ERR8000');
|
||||||
|
}
|
||||||
|
if (flag == 1) {
|
||||||
|
try {
|
||||||
|
let query = "update ??.?? set \
|
||||||
|
`ip` = ?, \
|
||||||
|
`name` = ?, \
|
||||||
|
`model` = ?, \
|
||||||
|
`maxevents` = ?, \
|
||||||
|
`maximg` = ?, \
|
||||||
|
`active` = ?, \
|
||||||
|
`delete` = 0, \
|
||||||
|
`cuser` = ?, \
|
||||||
|
`ctime` = unix_timestamp(), \
|
||||||
|
`muser` = ?, \
|
||||||
|
`mtime` = unix_timestamp() \
|
||||||
|
where \
|
||||||
|
`uid` = ?";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', arr.data.ip, arr.data.name, arr.data.model, arr.data.maxevents, arr.data.maximg, active, u, u, idx];
|
||||||
|
await tool.promiseQuery(res, query, param);
|
||||||
|
} catch (e) {
|
||||||
|
return rt.err(res, e, n, 'ERR8002');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
let query = "insert into ??.?? (`uid`, `ip`, `name`, `model`, `maxevents`, `maximg`, `active`, `cuser`, `muser`, `ctime`, `mtime` ) \
|
||||||
|
values (?, ?, ?, ?, ?, ?, ?, ?, ?, unix_timestamp(), unix_timestamp())";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', idx, arr.data.ip, arr.data.name, arr.data.model, arr.data.maxevents, arr.data.maximg, active, u, u];
|
||||||
|
await tool.promiseQuery(res, query, param);
|
||||||
|
} catch (e) {
|
||||||
|
return rt.err(res, e, n, 'ERR8001');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let query = "delete from ??.?? where `uid` = ?";
|
|
||||||
let param = [config.db.db1, 'ipcam', arr.data.id];
|
|
||||||
res.db.query(query, param, (err, row) => {
|
|
||||||
if(err) return rt.err(res,err,n,'ERR8003');
|
|
||||||
res.api_res = {
|
res.api_res = {
|
||||||
record: []
|
record: []
|
||||||
};
|
}
|
||||||
n();
|
return n();
|
||||||
})
|
}()
|
||||||
})
|
|
||||||
.post('/editipcam', (req,res,n) => {
|
})
|
||||||
if(!config.permission.ipcam) return n('ERR9000');
|
.post('/editipcam', (req, res, n) => {
|
||||||
if(!tool.checkPermission(req)) return n('ERR9000');
|
if (!config.permission.ipcam) return n('ERR9000');
|
||||||
let arr = req.body;
|
if (!tool.checkPermission(req)) return n('ERR9000');
|
||||||
if(!arr.data) return n('ERR0000');
|
let arr = req.body;
|
||||||
if(!arr.data.id) return n('ERR0028');
|
if (!arr.data) return n('ERR0000');
|
||||||
if(!arr.data.name) return n('ERR0026');
|
if (!arr.data.id) return n('ERR0028');
|
||||||
|
if (!arr.data.ip) return n("ERR0010");
|
||||||
|
if (!arr.data.name) return n('ERR0026');
|
||||||
|
if (!arr.data.model) return n('ERR0067');
|
||||||
|
if (!arr.data.maxevents) return n('ERR0068');
|
||||||
|
if (!arr.data.maximg) return n('ERR0069');
|
||||||
|
if (!/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
|
||||||
|
|
||||||
|
let u = '';
|
||||||
|
let obj = so.get(req.headers['x-auth-token'] || '');
|
||||||
|
if (obj != null && 'user' in obj && 'account' in obj.user) u = obj.user.account;
|
||||||
|
|
||||||
|
let active = arr.data.active == 1 ? 1 : 0;
|
||||||
|
|
||||||
|
let query = "select count(*) as c from ??.?? where `ip` = ? and `uid` != ?";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', arr.data.ip, arr.data.id];
|
||||||
|
|
||||||
|
res.db.query(query, param, (err, row) => {
|
||||||
|
if (err || row.length == 0) return rt.err(res, err, n, 'ERR8000');
|
||||||
|
|
||||||
|
if (row[0].c >= 1) return n('ERR0027');
|
||||||
|
|
||||||
|
let query = "update ??.?? set \
|
||||||
|
`ip` = ?, \
|
||||||
|
`name` = ?, \
|
||||||
|
`model` = ?, \
|
||||||
|
`maxevents` = ?, \
|
||||||
|
`maximg` = ?, \
|
||||||
|
`active` = ?, \
|
||||||
|
`muser` = ?, \
|
||||||
|
`mtime` = unix_timestamp() \
|
||||||
|
where \
|
||||||
|
`uid` = ?";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', arr.data.ip, arr.data.name, arr.data.model, arr.data.maxevents, arr.data.maximg, active, u, arr.data.id];
|
||||||
|
res.db.query(query, param, (err, row) => {
|
||||||
|
if (err) return rt.err(res, err, n, 'ERR8002');
|
||||||
|
|
||||||
|
res.api_res = {
|
||||||
|
record: []
|
||||||
|
}
|
||||||
|
n();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.post('/delipcam', (req, res, n) => {
|
||||||
|
if (!config.permission.ipcam) return n('ERR9000');
|
||||||
|
if (!tool.checkPermission(req)) return n('ERR9000');
|
||||||
|
let arr = req.body;
|
||||||
|
if (!arr.data) return n('ERR0000');
|
||||||
|
if (!arr.data.id) return n('ERR0028');
|
||||||
|
|
||||||
|
let u = '';
|
||||||
|
let obj = so.get(req.headers['x-auth-token'] || '');
|
||||||
|
if (obj != null && 'user' in obj && 'account' in obj.user) u = obj.user.account;
|
||||||
|
|
||||||
|
res.db.query(`use ${config.db.db1}`);
|
||||||
|
let query = "update ??.?? set \
|
||||||
|
`delete` = 1, \
|
||||||
|
`muser` = ?, \
|
||||||
|
`mtime` = unix_timestamp() \
|
||||||
|
where `uid` = ?";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', u, arr.data.id];
|
||||||
|
|
||||||
|
res.db.query(query, param, (err, row) => {
|
||||||
|
if (err) return rt.err(res, err, n, 'ERR8003');
|
||||||
|
|
||||||
let query = "update ??.?? set `name` = ? where `uid` = ?";
|
|
||||||
let param = [config.db.db1, 'ipcam', arr.data.name, arr.data.id];
|
|
||||||
res.db.query(query, param, (err,row) => {
|
|
||||||
if(err) return rt.err(res,err,n,'ERR8002');
|
|
||||||
res.api_res = {
|
res.api_res = {
|
||||||
record: []
|
record: []
|
||||||
}
|
}
|
||||||
n();
|
n();
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
.post('/swipcamactive', (req, res, n) => {
|
||||||
|
if (!config.permission.ipcam) return n('ERR9000');
|
||||||
|
if (!tool.checkPermission(req)) return n('ERR9000');
|
||||||
|
let arr = req.body;
|
||||||
|
if (!arr.data) return n('ERR0000');
|
||||||
|
if (!arr.data.id) return n('ERR0028');
|
||||||
|
|
||||||
|
let query = "update ??.?? set \
|
||||||
|
`active` = case when `active` = 1 then 0 else 1 end \
|
||||||
|
where \
|
||||||
|
`uid` = ?";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', arr.data.id];
|
||||||
|
|
||||||
|
res.db.query(query, param, (err, row) => {
|
||||||
|
if (err) return rt.err(res, err, n, 'ERR8002');
|
||||||
|
|
||||||
|
res.api_res = {
|
||||||
|
record: []
|
||||||
|
}
|
||||||
|
n();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.post('/getevents', async(req, res, n) => {
|
||||||
|
if (!config.permission.ipcam) return n('ERR9000');
|
||||||
|
if (!tool.checkPermission(req)) return n('ERR9000');
|
||||||
|
let arr = req.body;
|
||||||
|
if (!arr.data) return n('ERR0000');
|
||||||
|
if (!arr.data.id) return n('ERR0028');
|
||||||
|
|
||||||
|
try {
|
||||||
|
let query = "select * from ??.?? where `uid` = ? and `delete` = 0";
|
||||||
|
let param = [config.db.db1, 'jcioccamset', arr.data.id];
|
||||||
|
let cam = await tool.promiseQuery(res, query, param);
|
||||||
|
if (cam.length == 0) return n('ERR0071');
|
||||||
|
} catch (e) {
|
||||||
|
return rt.err(res, e, n, 'ERR8000');
|
||||||
|
}
|
||||||
|
let rp = config.cmdpath.ipcamsave;
|
||||||
|
let dirs = [];
|
||||||
|
|
||||||
|
try {
|
||||||
|
let dirls = await new Promise((resolve, reject) => {
|
||||||
|
fs.readdir(rp, (err, list) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
return resolve(list);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
for (let i of dirls) {
|
||||||
|
let tmp = i.split('-');
|
||||||
|
if (tmp.length != 2) continue;
|
||||||
|
if (tmp[0] == arr.data.id) dirs.push({
|
||||||
|
name: i,
|
||||||
|
files: {
|
||||||
|
img: [],
|
||||||
|
video: []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i in dirs) {
|
||||||
|
let p = path.resolve(rp, dirs[i].name);
|
||||||
|
let idx = i;
|
||||||
|
let files = await new Promise((resolve, reject) => {
|
||||||
|
fs.readdir(p, (err, list) => {
|
||||||
|
if (err) return reject(err);
|
||||||
|
return resolve(list);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
for (let j of files) {
|
||||||
|
if (/^img/.test(j)) {
|
||||||
|
dirs[idx].files.img.push(j);
|
||||||
|
} else if (/^vid/.test(j)) {
|
||||||
|
dirs[idx].files.video.push(j);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
return rt.err(res, e, n, 'ERR0072');
|
||||||
|
}
|
||||||
|
|
||||||
|
res.api_res = {
|
||||||
|
record: tool.checkArray(dirs)
|
||||||
|
}
|
||||||
|
return n();
|
||||||
|
})
|
||||||
.all('*', rt.send);
|
.all('*', rt.send);
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
54
src/components/AdminPage/IPCam/EventModal.js
Normal file
54
src/components/AdminPage/IPCam/EventModal.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Modal, Grid, List, Menu, Icon } from 'semantic-ui-react';
|
||||||
|
import {convertTime} from '../../../tools';
|
||||||
|
import ImgGrid from './EvtImgGrid';
|
||||||
|
|
||||||
|
const EventModal = ({ i18n, open, name, list, sel, closeEventModal, changeSelectEvent,refreshEvt }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal open={open} onClose={()=>{closeEventModal()}} size="fullscreen">
|
||||||
|
<Modal.Header content={`IPCam: ${name}`} />
|
||||||
|
<Modal.Content>
|
||||||
|
<Grid>
|
||||||
|
<Grid.Column width={4}>
|
||||||
|
<Menu vertical>
|
||||||
|
<Menu.Item>
|
||||||
|
<Menu.Header>
|
||||||
|
事件列表
|
||||||
|
<Icon name="refresh" style={{
|
||||||
|
cursor: "pointer",
|
||||||
|
float: 'right'
|
||||||
|
}} onClick={()=>{refreshEvt(-1)}}/>
|
||||||
|
</Menu.Header>
|
||||||
|
<Menu.Menu>
|
||||||
|
{
|
||||||
|
list.map((t,idx) =>{
|
||||||
|
let n = t.name;
|
||||||
|
let time = n.split('-')[1];
|
||||||
|
return (
|
||||||
|
<Menu.Item key={idx} active={sel == idx} onClick={()=>{changeSelectEvent(idx)}}>
|
||||||
|
{convertTime(time, true)}
|
||||||
|
</Menu.Item>
|
||||||
|
)})
|
||||||
|
}
|
||||||
|
</Menu.Menu>
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
</Grid.Column>
|
||||||
|
<Grid.Column width={12}>
|
||||||
|
{
|
||||||
|
sel != -1 ?
|
||||||
|
(
|
||||||
|
<ImgGrid i18n={i18n}
|
||||||
|
dname={list[sel].name}
|
||||||
|
list={list[sel].files.img} />
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EventModal;
|
21
src/components/AdminPage/IPCam/EvtImgGrid.js
Normal file
21
src/components/AdminPage/IPCam/EvtImgGrid.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Grid, Image} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
const EvtImgGrid = ({ i18n, dname, list }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid columns={3}>
|
||||||
|
{
|
||||||
|
list.map((t,idx) => {
|
||||||
|
return (
|
||||||
|
<Grid.Column key={idx}>
|
||||||
|
<Image fluid src={`/viewcamimg/${dname}/${t}`} href={`/viewcamimg/${dname}/${t}`} target="_blank"/>
|
||||||
|
</Grid.Column>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EvtImgGrid;
|
68
src/components/AdminPage/IPCam/IPCamModal.js
Normal file
68
src/components/AdminPage/IPCam/IPCamModal.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Modal, Form, Grid, Button, Input, Checkbox } from 'semantic-ui-react';
|
||||||
|
|
||||||
|
const IPCamModal = ({ i18n, open, type, data, closeModal, submitModal }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal open={open}>
|
||||||
|
<Modal.Header content={type == 1 ? '修改資料' : '新增資料'} />
|
||||||
|
<Modal.Content>
|
||||||
|
<Form onSubmit={(e,d) => {
|
||||||
|
e.preventDefault();
|
||||||
|
submitModal(type, d.formData);
|
||||||
|
}} serializer={e=>{
|
||||||
|
let json = {};
|
||||||
|
|
||||||
|
let name = e.querySelector('input[name="name"]');
|
||||||
|
if(name && 'value' in name) json.name = name.value;
|
||||||
|
let ip = e.querySelector('input[name="ip"]');
|
||||||
|
if(ip && 'value' in ip) json.ip = ip.value;
|
||||||
|
let model = e.querySelector('select[name="model"]');
|
||||||
|
if(model && 'value' in model) json.model = model.value;
|
||||||
|
let maxevents = e.querySelector('input[name="maxevents"]');
|
||||||
|
if(maxevents && 'value' in maxevents) json.maxevents = maxevents.value;
|
||||||
|
let maximg = e.querySelector('input[name="maximg"]');
|
||||||
|
if(maximg && 'value' in maximg) json.maximg = maximg.value;
|
||||||
|
let active = e.querySelector('input[type="checkbox"]');
|
||||||
|
if(active && 'checked' in active) json.active = active.checked;
|
||||||
|
if(type == 1) json.id = data.uid;
|
||||||
|
|
||||||
|
return json;
|
||||||
|
}}>
|
||||||
|
<Form.Field>
|
||||||
|
<Checkbox label="啟用裝置" defaultChecked={data.active == 1} name="active" />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<Input name="name" label="名稱" defaultValue={data.name} />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<Input name="ip" label="IP" defaultValue={data.ip} />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<select defaultValue={data.model} name="model">
|
||||||
|
<option value="">請選擇型號</option>
|
||||||
|
<option value="AXIS-M1124">AXIS-M1124</option>
|
||||||
|
<option value="GRANDSTREAM-GXV3610_HD">GRANDSTREAM-GXV3610_HD</option>
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<Input name="maxevents" label="最大儲存事件數量(1-5)" defaultValue={data.maxevents} />
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<Input name="maximg" label="最大儲存圖片數量(1-10)" defaultValue={data.maximg} />
|
||||||
|
</Form.Field>
|
||||||
|
<Grid columns={2}>
|
||||||
|
<Grid.Column>
|
||||||
|
<Button type="submit" fluid content="送出" />
|
||||||
|
</Grid.Column>
|
||||||
|
<Grid.Column>
|
||||||
|
<Button type="button" fluid content="取消" onClick={()=>{closeModal()}} />
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid>
|
||||||
|
</Form>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IPCamModal;
|
23
src/components/AdminPage/IPCam/ListItem.js
Normal file
23
src/components/AdminPage/IPCam/ListItem.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Table, Button} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
const ListItem = ({ i18n, data, swActive, openModal, delIPCam, getEvents }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell>
|
||||||
|
<Button basic content="修改" type="button" onClick={()=>openModal(1, data)} />
|
||||||
|
<Button basic content="刪除" type="button" onClick={()=>delIPCam(data.uid)}/>
|
||||||
|
<Button basic content={data.active == 1 ? '停用' : '啟用'} type="button" onClick={()=>swActive(data.uid)} />
|
||||||
|
<Button basic content="事件紀錄" type="button" onClick={()=>getEvents(data.uid, data.name)} />
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{data.name}</Table.Cell>
|
||||||
|
<Table.Cell>{data.ip}</Table.Cell>
|
||||||
|
<Table.Cell>{data.model}</Table.Cell>
|
||||||
|
<Table.Cell>{data.model == 'AXIS-M1124' ? `/${data.model}-${data.uid}` : '/'}</Table.Cell>
|
||||||
|
<Table.Cell>{data.active == 1? '啟用' : '停用'}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ListItem;
|
@ -1,12 +1,204 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {} from 'semantic-ui-react';
|
import { Container, Segment, Table, Button, Label, Message } from 'semantic-ui-react';
|
||||||
|
import {getRequest} from '../../../actions';
|
||||||
|
import ListItem from './ListItem';
|
||||||
|
import IPCamModal from './IPCamModal';
|
||||||
|
import EvtModal from './EventModal';
|
||||||
|
|
||||||
class IPCamPage extends React.Component{
|
const stateDefault = ()=>({
|
||||||
|
list: [],
|
||||||
|
modal: {
|
||||||
|
type: 0,
|
||||||
|
open: false,
|
||||||
|
data: {}
|
||||||
|
},
|
||||||
|
evt: {
|
||||||
|
open: false,
|
||||||
|
list: [],
|
||||||
|
name: '',
|
||||||
|
sel: -1,
|
||||||
|
id: -1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
render(){
|
class IPCamPage extends React.Component {
|
||||||
|
state = {
|
||||||
|
...stateDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(){
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
|
||||||
|
getList = () => {
|
||||||
|
let {toggleLoading, showDialog} = this.props;
|
||||||
|
toggleLoading(1);
|
||||||
|
fetch('/api/ipcam/getipcamlist', getRequest())
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
toggleLoading(0);
|
||||||
|
if(json.status != 1) return showDialog(json.message);
|
||||||
|
let list = json.data.record || [];
|
||||||
|
this.setState({
|
||||||
|
list
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
swActive = (id) => {
|
||||||
|
if(!id) return ;
|
||||||
|
let {toggleLoading, showDialog} = this.props;
|
||||||
|
toggleLoading(1);
|
||||||
|
fetch('/api/ipcam/swipcamactive', getRequest({id}))
|
||||||
|
.then(response=>response.json())
|
||||||
|
.then(json => {
|
||||||
|
toggleLoading(0);
|
||||||
|
if(json.status != 1) return showDialog(json.message);
|
||||||
|
this.getList();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
openModal = (type, data = {}) => {
|
||||||
|
this.setState({
|
||||||
|
modal: {
|
||||||
|
type,
|
||||||
|
data,
|
||||||
|
open: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
closeModal = () => {
|
||||||
|
this.setState({
|
||||||
|
modal: {
|
||||||
|
...stateDefault().modal
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
submitModal = (type, data = {}) => {
|
||||||
|
let {toggleLoading,showDialog} = this.props;
|
||||||
|
if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
|
||||||
|
if(!data.maxevents || data.maxevents < 1 || data.maxevents > 5) return showDialog('事件數量請介於1-5間');
|
||||||
|
if(!data.maximg || data.maximg < 1 || data.maximg > 10) return showDialog('圖片數量請介於1-5間');
|
||||||
|
if(!data.name) return showDialog('請輸入名稱');
|
||||||
|
if(!data.ip) return showDialog('請輸入IP');
|
||||||
|
if(!data.model) return showDialog('請選擇型號');
|
||||||
|
|
||||||
|
toggleLoading(1);
|
||||||
|
let url = type == 1 ? '/api/ipcam/editipcam' : '/api/ipcam/addipcam';
|
||||||
|
fetch(url, getRequest(data))
|
||||||
|
.then(response=>response.json())
|
||||||
|
.then(json => {
|
||||||
|
toggleLoading(0);
|
||||||
|
if(json.status != 1) return showDialog(json.message);
|
||||||
|
this.closeModal();
|
||||||
|
this.getList();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
delIPCam = (id) => {
|
||||||
|
if(!id) return ;
|
||||||
|
let {callConfirm, toggleLoading, showDialog} = this.props;
|
||||||
|
callConfirm('確定要刪除此筆資料?', ()=>{
|
||||||
|
fetch('/api/ipcam/delipcam', getRequest({id}))
|
||||||
|
.then(response=>response.json())
|
||||||
|
.then(json => {
|
||||||
|
if(json.status != 1) return showDialog(json.message);
|
||||||
|
this.getList();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getEvents = (id, name = '') => {
|
||||||
|
if(!id) return ;
|
||||||
|
if(id==-1) id = this.state.evt.id;
|
||||||
|
let {callConfirm, toggleLoading, showDialog} = this.props;
|
||||||
|
toggleLoading(1);
|
||||||
|
fetch('/api/ipcam/getevents', getRequest({id}))
|
||||||
|
.then(response=>response.json())
|
||||||
|
.then(json => {
|
||||||
|
toggleLoading(0);
|
||||||
|
if(json.status != 1) return showDialog(json.message);
|
||||||
|
this.setState({
|
||||||
|
evt: {
|
||||||
|
open: true,
|
||||||
|
list: json.data.record || [],
|
||||||
|
name: name != '' ? name : this.state.evt.name,
|
||||||
|
sel: -1,
|
||||||
|
id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
closeEventModal = () => {
|
||||||
|
this.setState({
|
||||||
|
evt: {
|
||||||
|
...stateDefault().evt
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
changeSelectEvent = (idx) => {
|
||||||
|
if(!isFinite(idx) || idx < 0) return ;
|
||||||
|
this.setState({
|
||||||
|
evt:{
|
||||||
|
...this.state.evt,
|
||||||
|
sel: idx
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let {i18n} = this.props;
|
||||||
return (
|
return (
|
||||||
null
|
<Container>
|
||||||
|
<Segment className="clearfix">
|
||||||
|
<Message>
|
||||||
|
<Message.Header>攝影機事件通知位址</Message.Header>
|
||||||
|
<p>
|
||||||
|
{`${location.protocol}//${location.host}${location.port != '' ? `:${location.port}` : ''}/camevent`}
|
||||||
|
</p>
|
||||||
|
</Message>
|
||||||
|
<Button basic content="新增" icon="plus" floated="right" type="button" style={{marginBottom: '15px'}} color="green" onClick={()=>{this.openModal(0)}} />
|
||||||
|
<Table>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.HeaderCell>操作</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>名稱</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>IP</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>型號</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>FTP路徑</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell>啟用狀態</Table.HeaderCell>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
<Table.Body>
|
||||||
|
{
|
||||||
|
this.state.list.map((t,idx) => (
|
||||||
|
<ListItem key={idx}
|
||||||
|
i18n={i18n}
|
||||||
|
data={t}
|
||||||
|
swActive={this.swActive}
|
||||||
|
delIPCam={this.delIPCam}
|
||||||
|
openModal={this.openModal}
|
||||||
|
getEvents={this.getEvents} />
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Table.Body>
|
||||||
|
</Table>
|
||||||
|
</Segment>
|
||||||
|
<IPCamModal i18n={i18n}
|
||||||
|
open={this.state.modal.open}
|
||||||
|
data={this.state.modal.data}
|
||||||
|
type={this.state.modal.type}
|
||||||
|
closeModal={this.closeModal}
|
||||||
|
submitModal={this.submitModal} />
|
||||||
|
<EvtModal i18n={i18n}
|
||||||
|
open={this.state.evt.open}
|
||||||
|
list={this.state.evt.list}
|
||||||
|
sel={this.state.evt.sel}
|
||||||
|
name={this.state.evt.name}
|
||||||
|
refreshEvt={this.getEvents}
|
||||||
|
closeEventModal={this.closeEventModal}
|
||||||
|
changeSelectEvent={this.changeSelectEvent} />
|
||||||
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,17 +1,20 @@
|
|||||||
import {connect} from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import {add_dialog_msg, toggle_loading} from '../../actions';
|
import { add_dialog_msg, toggle_loading, add_confirm } from '../../actions';
|
||||||
import IPCamPage from '../../components/AdminPage/IPCam';
|
import IPCamPage from '../../components/AdminPage/IPCam';
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
const mapStateToProps = (state) => ({
|
||||||
i18n: state.i18n
|
i18n: state.i18n
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch, ownProps) => ({
|
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||||
showDialog: (msg) => {
|
showDialog: (msg) => {
|
||||||
dispatch(add_dialog_msg(msg));
|
dispatch(add_dialog_msg(msg));
|
||||||
},
|
},
|
||||||
toggleLoading: (flag = false) => {
|
toggleLoading: (flag = false) => {
|
||||||
dispatch(toggle_loading(flag));
|
dispatch(toggle_loading(flag));
|
||||||
|
},
|
||||||
|
callConfirm: (msg, act = null) => {
|
||||||
|
dispatch(add_confirm(msg, act));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user