add links + recording threshold

This commit is contained in:
Thomas Quandalle
2022-08-31 11:15:31 +02:00
parent cdca6d77cb
commit cf40b68338
4 changed files with 88 additions and 50 deletions

View File

@@ -14,12 +14,13 @@ import {
} from '@kerberos-io/ui';
import { interval } from 'rxjs';
import { connect } from 'react-redux';
import logo from './header-minimal-logo-36x36.svg';
import '@kerberos-io/ui/lib/index.css';
import { Link } from 'react-router-dom';
import { logout } from './actions';
import config from './config';
import './App.scss';
import { GetDashboardInformation } from './actions/agent';
import logo from './header-minimal-logo-36x36.svg';
import '@kerberos-io/ui/lib/index.css';
import './App.scss';
// eslint-disable-next-line react/prefer-stateless-function
class App extends React.Component {
@@ -95,10 +96,12 @@ class App extends React.Component {
<Gradient />
{dashboard.offlineMode === 'true' && (
<div className="warning">
<Icon label="info" />
Attention! Kerberos is currently running in Offline mode.
</div>
<Link to="/settings">
<div className="warning">
<Icon label="info" />
Attention! Kerberos is currently running in Offline mode.
</div>
</Link>
)}
<MainBody>{children}</MainBody>

View File

@@ -13,4 +13,12 @@
svg {
padding-right: size(1);
}
}
a {
display: flex;
color: var(--text);
&:hover, &:active {
color: var(--text);
}
}

View File

@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import {
Breadcrumb,
@@ -94,18 +94,27 @@ class Dashboard extends React.Component {
divider="0"
footer="Total recordings"
/>
<Card
title="IP Camera"
subtitle={isCameraOnline ? 'Connected' : 'not connected'}
footer="Camera"
icon={isCameraOnline ? 'circle-check-big' : 'circle-cross-big'}
/>
<Card
title="Kerberos Hub"
subtitle={cloudConnection}
footer="Cloud"
icon={cloudOnline ? 'circle-check-big' : 'circle-cross-big'}
/>
<Link to="/settings">
<Card
title="IP Camera"
subtitle={isCameraOnline ? 'Connected' : 'not connected'}
footer="Camera"
icon={isCameraOnline ? 'circle-check-big' : 'circle-cross-big'}
/>
</Link>
<Link to="/settings">
<Card
title="Kerberos Hub"
subtitle={cloudConnection}
footer="Cloud"
icon={
cloudOnline && dashboard.offlineMode !== 'true'
? 'circle-check-big'
: 'circle-cross-big'
}
/>
</Link>
</div>
<hr />
<div className="stats grid-container --two-columns">

View File

@@ -695,7 +695,7 @@ class Settings extends React.Component {
<Input
noPadding
label="video duration (seconds)"
label="max video duration (seconds)"
value={config.capture.maxlengthrecording}
placeholder="The maximum duration of a recording."
onChange={(value) =>
@@ -708,35 +708,52 @@ class Settings extends React.Component {
}
/>
<Input
noPadding
label="pre recording (seconds)"
value={config.capture.prerecording}
placeholder="Seconds before an event occurred."
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'prerecording',
value,
config.capture
)
}
/>
<Input
noPadding
label="post recording (seconds)"
value={config.capture.postrecording}
placeholder="Seconds after an event occurred."
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'postrecording',
value,
config.capture
)
}
/>
{config.capture.continuous !== 'true' && (
<>
<Input
noPadding
label="pre recording (seconds)"
value={config.capture.prerecording}
placeholder="Seconds before an event occurred."
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'prerecording',
value,
config.capture
)
}
/>
<Input
noPadding
label="post recording (seconds)"
value={config.capture.postrecording}
placeholder="Seconds after an event occurred."
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'postrecording',
value,
config.capture
)
}
/>
<Input
noPadding
label="Recording threshold (pixels)"
value={config.capture.pixelChangeThreshold}
placeholder="The number of pixels changed to record"
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'pixelChangeThreshold',
value,
config.capture
)
}
/>
</>
)}
</BlockBody>
<BlockFooter>
<Button
@@ -1721,6 +1738,7 @@ class Settings extends React.Component {
</p>
<Dropdown
isRadio
icon="cloud"
placeholder="Select a persistence"
selected={[config.cloud]}
items={this.storageTypes}