Add video violation type filter and display

src/components/modules/violations/ViolationDetails.js

@@ -11,6 +11,7 @@ import {
   faUpload,
   faEyeSlash,
   faDove,
+  faVideo,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { ContentPanel } from '../Modules'
@@ -380,6 +381,11 @@ export default (props) => {
               </>
             )}
           </FancyButtonRed>
+          {data.type === 'video' && (
+            <p style={{ color: '#e44', fontWeight: 'bold', fontSize: '16px' }}>
+              <FontAwesomeIcon icon={faVideo} /> Видео сигнал
+            </p>
+          )}
           <hr />
           <h2>Описание</h2>
           <p

src/components/modules/violations/ViolationFilter.js

@@ -92,6 +92,8 @@ export default function ViolationFilter(props) {
   const [assigneeUsers, setAssigneeUsers] = useState([])
   const [assignee, setAssignee] = useState(query.get('assignee') || '')
 
+  const [type, setType] = useState(query.get('type') || '')
+
   const params = new URLSearchParams()
   const fields = {
     country,
@@ -103,6 +105,7 @@ export default function ViolationFilter(props) {
     status,
     published,
     assignee,
+    type,
   }
 
   for (const [key, value] of Object.entries(fields)) {
@@ -160,6 +163,7 @@ export default function ViolationFilter(props) {
     setSection('')
     setPublished('')
     setAssignee('')
+    setType('')
   }
 
   return (
@@ -182,7 +186,18 @@ export default function ViolationFilter(props) {
               setStatus={setStatus}
             />
           </td>
-          <td></td>
+          <td>
+            Тип:<br></br>
+            <select
+              value={type}
+              onChange={(e) => setType(e.target.value)}
+              style={{ padding: '5px', fontSize: '15px' }}
+            >
+              <option value="">Всички</option>
+              <option value="standard">Стандартен</option>
+              <option value="video">Видео</option>
+            </select>
+          </td>
         </tr>
         <tr>
           <td>

src/components/modules/violations/ViolationList.js

@@ -8,6 +8,7 @@ import {
   faFastForward,
   faFastBackward,
   faCircle,
+  faVideo,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { AuthContext } from '../../App'
@@ -116,6 +117,7 @@ export default (props) => {
       cityRegion: query.get('cityRegion'),
       status: query.get('status'),
       published: query.get('published'),
+      type: query.get('type'),
       page: query.get('page'),
     }
 
@@ -142,6 +144,7 @@ export default (props) => {
     query.get('cityRegion'),
     query.get('status'),
     query.get('published'),
+    query.get('type'),
   ])
 
   const status = (apiStatus) => {
@@ -252,14 +255,15 @@ export default (props) => {
                 <th>№ на секция</th>
                 <th>Град</th>
                 <th>Автор</th>
+                <th>Тип</th>
                 <th>Описание</th>
                 <th>Статут</th>
               </tr>
             </thead>
             <tbody>
               {loading ? (
                 <tr key="loading">
-                  <td colSpan="8">
+                  <td colSpan="9">
                     <Loading />
                   </td>
                 </tr>
@@ -305,6 +309,15 @@ export default (props) => {
                         ? `${violation.author.firstName} ${violation.author.lastName[0]}.`
                         : violation?.author?.name}
                     </td>
+                    <td>
+                      {violation.type === 'video' ? (
+                        <span style={{ color: '#e44', fontWeight: 'bold' }}>
+                          <FontAwesomeIcon icon={faVideo} /> Видео
+                        </span>
+                      ) : (
+                        'Стандартен'
+                      )}
+                    </td>
                     <td>{violation.description.slice(0, 40) + '...'}</td>
                     <td>{status(violation.status)}</td>
                   </tr>