+ client: handle blocked services

client/src/helpers/constants.js

@@ -181,3 +181,66 @@ export const CLIENT_ID = {
 };
 
 export const SETTINGS_URLS = ['/encryption', '/dhcp', '/dns', '/settings', '/clients'];
+
+export const SERVICES = [
+    {
+        id: 'facebook',
+        name: 'Facebook',
+    },
+    {
+        id: 'whatsapp',
+        name: 'WhatsApp',
+    },
+    {
+        id: 'instagram',
+        name: 'Instagram',
+    },
+    {
+        id: 'twitter',
+        name: 'Twitter',
+    },
+    {
+        id: 'youtube',
+        name: 'YouTube',
+    },
+    {
+        id: 'netflix',
+        name: 'Netflix',
+    },
+    {
+        id: 'snapchat',
+        name: 'Snapchat',
+    },
+    {
+        id: 'messenger',
+        name: 'Messenger',
+    },
+    {
+        id: 'twitch',
+        name: 'Twitch',
+    },
+    {
+        id: 'discord',
+        name: 'Discord',
+    },
+    {
+        id: 'skype',
+        name: 'Skype',
+    },
+    {
+        id: 'steam',
+        name: 'Steam',
+    },
+    {
+        id: 'ok',
+        name: 'OK',
+    },
+    {
+        id: 'vk',
+        name: 'VK',
+    },
+    {
+        id: 'mail_ru',
+        name: 'mail.ru',
+    },
+];

client/src/helpers/form.js

@@ -27,6 +27,23 @@ export const renderField = ({
     </Fragment>
 );
 
+export const renderRadioField = ({
+    input, placeholder, disabled, meta: { touched, error },
+}) => (
+    <Fragment>
+        <label className="custom-control custom-radio custom-control-inline">
+            <input
+                {...input}
+                type="radio"
+                className="custom-control-input"
+                disabled={disabled}
+            />
+            <span className="custom-control-label">{placeholder}</span>
+        </label>
+        {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+    </Fragment>
+);
+
 export const renderSelectField = ({
     input, placeholder, disabled, meta: { touched, error },
 }) => (
@@ -46,6 +63,28 @@ export const renderSelectField = ({
     </Fragment>
 );
 
+export const renderServiceField = ({
+    input, placeholder, disabled, modifier, icon, meta: { touched, error },
+}) => (
+    <Fragment>
+        <label className={`service custom-switch ${modifier}`}>
+            <input
+                {...input}
+                type="checkbox"
+                className="custom-switch-input"
+                value={placeholder.toLowerCase()}
+                disabled={disabled}
+            />
+            <span className="service__switch custom-switch-indicator"></span>
+            <span className="service__text">{placeholder}</span>
+            <svg className="service__icon">
+                <use xlinkHref={`#${icon}`} />
+            </svg>
+        </label>
+        {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+    </Fragment>
+);
+
 export const required = (value) => {
     if (value || value === 0) {
         return false;

client/src/helpers/helpers.js

@@ -27,6 +27,7 @@ export const normalizeLogs = logs => logs.map((log) => {
         client,
         filterId,
         rule,
+        service_name,
     } = log;
     const { host: domain, type } = question;
     const responsesArray = response ? response.map((response) => {
@@ -42,6 +43,7 @@ export const normalizeLogs = logs => logs.map((log) => {
         client,
         filterId,
         rule,
+        serviceName: service_name,
     };
 });
 
@@ -225,3 +227,7 @@ export const sortClients = (clients) => {
 
     return clients.sort(compare);
 };
+
+export const toggleAllServices = (services, change, isSelected) => {
+    services.forEach(service => change(`blocked_services.${service.id}`, isSelected));
+};