Skip to content

B
BoxDialer
Commit 4094d118 authored by Muhammadali's avatar Muhammadali
Browse files
Options

MAIN

parents 90e1b5e1 9567af85
Show whitespace changes
Inline Side-by-side
Showing with 19893 additions and 11585 deletions
.DS_Store 0 → 100644
View file @ 4094d118
File added
._.DS_Store 0 → 100644
View file @ 4094d118
File added
build 0 → 100644
View file @ 4094d118
11111
\ No newline at end of file
package-lock.json
View file @ 4094d118
{ {
"name": "boxdialer", "name": "boxdialer",
"version": "4.8.63", "version": "4.8.84",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "boxdialer", "name": "boxdialer",
"version": "4.8.63", "version": "4.8.84",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1", "@emotion/react": "^11.11.1",
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1", "react-hot-toast": "^2.4.1",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"uuid": "^9.0.1",
"zustand": "^4.4.6" "zustand": "^4.4.6"
}, },
"devDependencies": { "devDependencies": {
...@@ -32,6 +33,7 @@ ...@@ -32,6 +33,7 @@
"@babel/preset-react": "^7.22.5", "@babel/preset-react": "^7.22.5",
"autoprefixer": "^9.8.8", "autoprefixer": "^9.8.8",
"babel-loader": "^9.1.3", "babel-loader": "^9.1.3",
"chalk": "^4.1.2",
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3", "html-webpack-plugin": "^5.5.3",
...@@ -67,6 +69,38 @@ ...@@ -67,6 +69,38 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/code-frame/node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dependencies": {
"has-flag": "^3.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/compat-data": { "node_modules/@babel/compat-data": {
"version": "7.22.9", "version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
...@@ -480,6 +514,38 @@ ...@@ -480,6 +514,38 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/highlight/node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/highlight/node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/highlight/node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dependencies": {
"has-flag": "^3.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.22.10", "version": "7.22.10",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
...@@ -3347,35 +3413,64 @@ ...@@ -3347,35 +3413,64 @@
] ]
}, },
"node_modules/chalk": { "node_modules/chalk": {
"version": "2.4.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"dependencies": { "dependencies": {
"ansi-styles": "^3.2.1", "ansi-styles": "^4.1.0",
"escape-string-regexp": "^1.0.5", "supports-color": "^7.1.0"
"supports-color": "^5.3.0"
}, },
"engines": { "engines": {
"node": ">=4" "node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
} }
}, },
"node_modules/chalk/node_modules/has-flag": { "node_modules/chalk/node_modules/ansi-styles": {
"version": "3.0.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": { "engines": {
"node": ">=4" "node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
} }
}, },
"node_modules/chalk/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/chalk/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/chalk/node_modules/supports-color": { "node_modules/chalk/node_modules/supports-color": {
"version": "5.5.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": { "dependencies": {
"has-flag": "^3.0.0" "has-flag": "^4.0.0"
}, },
"engines": { "engines": {
"node": ">=4" "node": ">=8"
} }
}, },
"node_modules/chokidar": { "node_modules/chokidar": {
...@@ -9693,6 +9788,15 @@ ...@@ -9693,6 +9788,15 @@
"websocket-driver": "^0.7.4" "websocket-driver": "^0.7.4"
} }
}, },
"node_modules/sockjs/node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"dev": true,
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/source-map": { "node_modules/source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
...@@ -10164,10 +10268,13 @@ ...@@ -10164,10 +10268,13 @@
} }
}, },
"node_modules/uuid": { "node_modules/uuid": {
"version": "8.3.2", "version": "9.0.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
"dev": true, "funding": [
"https://github.com/sponsors/broofa",
"https://github.com/sponsors/ctavan"
],
"bin": { "bin": {
"uuid": "dist/bin/uuid" "uuid": "dist/bin/uuid"
} }
......
package.json
View file @ 4094d118
{ {
"name": "boxdialer", "name": "boxdialer",
"version": "4.8.65", "version": "4.8.85",
"description": "", "description": "",
"main": "src/boxDialer.js", "main": "src/boxDialer.js",
"scripts": { "scripts": {
"dev": "webpack serve --mode=development", "dev": "webpack serve --mode=development",
"build:dev": "webpack --env=development --watch ", "build:dev": "webpack --env=development --watch",
"build:prod": "webpack --env=production" "build:prod": "webpack --env=production"
}, },
"keywords": [], "keywords": [],
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1", "react-hot-toast": "^2.4.1",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"uuid": "^9.0.1",
"zustand": "^4.4.6" "zustand": "^4.4.6"
}, },
"devDependencies": { "devDependencies": {
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
"@babel/preset-react": "^7.22.5", "@babel/preset-react": "^7.22.5",
"autoprefixer": "^9.8.8", "autoprefixer": "^9.8.8",
"babel-loader": "^9.1.3", "babel-loader": "^9.1.3",
"chalk": "^4.1.2",
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3", "html-webpack-plugin": "^5.5.3",
......
prod/4.8.84/index.html 0 → 100644
View file @ 4094d118
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<script defer src="main.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="boxdialerwidjet"></div>
</body>
</html>
prod/4.8.84/main.js 0 → 100644
View file @ 4094d118
This source diff could not be displayed because it is too large. You can view the blob instead.
prod/4.8.84/src_static_locale_ru_json.js 0 → 100644
View file @ 4094d118
"use strict";
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(self["webpackChunkboxdialer"] = self["webpackChunkboxdialer"] || []).push([["src_static_locale_ru_json"],{
/***/ "./src/static/locale/ru.json":
/*!***********************************!*\
!*** ./src/static/locale/ru.json ***!
\***********************************/
/***/ ((module) => {
eval("module.exports = JSON.parse('{\"APP_APPNAME\":\"AloVoice Dialer Ru\",\"FREE\":\"Приём входящих\",\"TOTOP\":\"У руководства\",\"OUTCALLS\":\"На исходящих\",\"HOME\":\"DND пауза\",\"TADBIR\":\"Другая причина\",\"CALL\":\"Позвонить\",\"STATUS\":\"Статус\"}');\n\n//# sourceURL=webpack://boxdialer/./src/static/locale/ru.json?");
/***/ })
}]);
\ No newline at end of file
prod/4.8.85/index.html 0 → 100644
View file @ 4094d118
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<script defer src="main.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="boxdialerwidjet"></div>
</body>
</html>
prod/4.8.85/main.js 0 → 100644
View file @ 4094d118
This source diff could not be displayed because it is too large. You can view the blob instead.
prod/4.8.85/src_static_locale_ru_json.js 0 → 100644
View file @ 4094d118
"use strict";
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(self["webpackChunkboxdialer"] = self["webpackChunkboxdialer"] || []).push([["src_static_locale_ru_json"],{
/***/ "./src/static/locale/ru.json":
/*!***********************************!*\
!*** ./src/static/locale/ru.json ***!
\***********************************/
/***/ ((module) => {
eval("module.exports = JSON.parse('{\"APP_APPNAME\":\"AloVoice Dialer Ru\",\"FREE\":\"Приём входящих\",\"TOTOP\":\"У руководства\",\"OUTCALLS\":\"На исходящих\",\"HOME\":\"DND пауза\",\"TADBIR\":\"Другая причина\",\"CALL\":\"Позвонить\",\"STATUS\":\"Статус\"}');\n\n//# sourceURL=webpack://boxdialer/./src/static/locale/ru.json?");
/***/ })
}]);
\ No newline at end of file
prod/main.js
View file @ 4094d118
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/BxMiniWidjetUi/index.jsx
View file @ 4094d118
...@@ -4,6 +4,7 @@ import React from 'react'; ...@@ -4,6 +4,7 @@ import React from 'react';
import BxMiniWidjetUiStyle, { DialPadIcon } from './style'; import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
import TimerUi from '../TimerUi'; import TimerUi from '../TimerUi';
import { Text, useTranslator } from '@eo-locale/react'; import { Text, useTranslator } from '@eo-locale/react';
import {useColorConfig} from "../../storage/globalColorConfig"
// import {useConfig} from "../../storage" // import {useConfig} from "../../storage"
const BxMiniWidjetUi = ({ const BxMiniWidjetUi = ({
widjetState, widjetState,
...@@ -15,6 +16,7 @@ const BxMiniWidjetUi = ({ ...@@ -15,6 +16,7 @@ const BxMiniWidjetUi = ({
position, position,
}) => { }) => {
const translator = useTranslator(); const translator = useTranslator();
const useColorConfigStore = useColorConfig((store) => store)
// const {state, setState} = useConfig((state) => state) // const {state, setState} = useConfig((state) => state)
const colorTypeFunc = ({ widjetState, reason }) => { const colorTypeFunc = ({ widjetState, reason }) => {
switch (`${widjetState}_${reason}`) { switch (`${widjetState}_${reason}`) {
...@@ -36,12 +38,14 @@ const BxMiniWidjetUi = ({ ...@@ -36,12 +38,14 @@ const BxMiniWidjetUi = ({
break; break;
} }
}; };
// useColorConfigStore.state.sizePixel
return ( return (
<BxMiniWidjetUiStyle <BxMiniWidjetUiStyle
// status={widjetState || ''} // status={widjetState || ''}
status={colorTypeFunc({ reason, widjetState })} status={colorTypeFunc({ reason, widjetState })}
onClick={onClick} onClick={onClick}
sizePixel={useColorConfigStore.state.sizePixel}
position={position}> position={position}>
<div className='left'> <div className='left'>
<p className='title'>{phoneNumber}</p> <p className='title'>{phoneNumber}</p>
...@@ -58,7 +62,9 @@ const BxMiniWidjetUi = ({ ...@@ -58,7 +62,9 @@ const BxMiniWidjetUi = ({
<div className='bottom'> <div className='bottom'>
<BxMiniWidjetUiStyle.StatusLine <BxMiniWidjetUiStyle.StatusLine
status={colorTypeFunc({ reason, widjetState }) || ''}> status={colorTypeFunc({ reason, widjetState }) || ''}>
<p className='verison'>v {widjetVersion}</p> {
typeof useColorConfigStore.state.showVersion === 'undefined' ? <p className='verison'>v {widjetVersion}</p> : useColorConfigStore.state.showVersion && <p className='verison'>v {widjetVersion}</p>
}
</BxMiniWidjetUiStyle.StatusLine> </BxMiniWidjetUiStyle.StatusLine>
</div> </div>
</BxMiniWidjetUiStyle> </BxMiniWidjetUiStyle>
......
src/components/BxMiniWidjetUi/style.js
View file @ 4094d118
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import CallIcon from '@mui/icons-material/Dialpad'; import CallIcon from '@mui/icons-material/Dialpad';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import {sizePixelPixelSizeFunc} from "../../lib/sizeContext"
const colorTypeFunc = (type) => { const colorTypeFunc = (type) => {
switch (type) { switch (type) {
...@@ -60,7 +61,7 @@ const BxMiniWidjetUiStyle = styled.div` ...@@ -60,7 +61,7 @@ const BxMiniWidjetUiStyle = styled.div`
.right { .right {
} }
.title { .title {
font-size: 20px; ${({sizePixel})=> sizePixelPixelSizeFunc(sizePixel, 20) }
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -81,7 +82,7 @@ BxMiniWidjetUiStyle.ReasonTest = styled.div` ...@@ -81,7 +82,7 @@ BxMiniWidjetUiStyle.ReasonTest = styled.div`
border-radius: 10px; border-radius: 10px;
padding: 0 1px; padding: 0 1px;
margin: 0 5px; margin: 0 5px;
font-size: 12px; ${({sizePixel})=> sizePixelPixelSizeFunc(sizePixel, 12) }
${({ reason }) => ${({ reason }) =>
reason == 'free' reason == 'free'
......
src/components/CallHistoryInputDropdown/index.jsx
View file @ 4094d118
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Block, { Input, ModalDropDown } from './style.js'; import Block, { Input, ModalDropDown } from './style.js';
import {useColorConfig} from "../../storage/globalColorConfig"
const CallHistoryInputDropdown = ({ const CallHistoryInputDropdown = ({
inputValue, inputValue,
...@@ -12,7 +13,7 @@ const CallHistoryInputDropdown = ({ ...@@ -12,7 +13,7 @@ const CallHistoryInputDropdown = ({
}) => { }) => {
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
var elem = document.getElementById('data'); var elem = document.getElementById('data');
const useColorConfigStore = useColorConfig((store) => store)
const selectFuncInset = (e) => { const selectFuncInset = (e) => {
selectFunc(e); selectFunc(e);
setModal(false); setModal(false);
...@@ -42,7 +43,6 @@ const CallHistoryInputDropdown = ({ ...@@ -42,7 +43,6 @@ const CallHistoryInputDropdown = ({
.scrollTo(document.getElementById('numbersDiv').scrollWidth, 0); .scrollTo(document.getElementById('numbersDiv').scrollWidth, 0);
}, [inputValue]); }, [inputValue]);
console.log('input_modal: ', modal, numberSelectHistory);
document.querySelector('body').addEventListener('click', function (e) { document.querySelector('body').addEventListener('click', function (e) {
if (modal) setModal(false); if (modal) setModal(false);
}); });
...@@ -59,7 +59,7 @@ const CallHistoryInputDropdown = ({ ...@@ -59,7 +59,7 @@ const CallHistoryInputDropdown = ({
</Input> </Input>
{Boolean(call_history.length) && ( {Boolean(call_history.length) && (
<> <>
<ModalDropDown visiblevalue={modal}> <ModalDropDown visiblevalue={modal} switchAnim={useColorConfigStore.state.switchAnim} >
<ModalDropDown.Inset id='data'> <ModalDropDown.Inset id='data'>
{call_history.reverse().map((value, index) => ( {call_history.reverse().map((value, index) => (
<ModalDropDown.Item <ModalDropDown.Item
...@@ -74,11 +74,6 @@ const CallHistoryInputDropdown = ({ ...@@ -74,11 +74,6 @@ const CallHistoryInputDropdown = ({
))} ))}
</ModalDropDown.Inset> </ModalDropDown.Inset>
</ModalDropDown> </ModalDropDown>
{/* <ModalDropDown.FullWindow
id='full-size'
visiblevalue={modal}
onClick={() => setModal(!modal)}
/> */}
</> </>
)} )}
</Block> </Block>
......
src/components/CallHistoryInputDropdown/style.js
View file @ 4094d118
...@@ -81,7 +81,7 @@ const ModalDropDown = styled.div` ...@@ -81,7 +81,7 @@ const ModalDropDown = styled.div`
background-color: #c9d5d9; background-color: #c9d5d9;
border-radius: 20px; border-radius: 20px;
padding: 15px; padding: 15px;
transition: 0.1s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' };
z-index: 15; z-index: 15;
bottom: 60px; bottom: 60px;
left: 50%; left: 50%;
......
src/components/MiniTable/index.jsx
View file @ 4094d118
import React from 'react' import React from 'react'
import TableBlock from "./style" import TableBlock from "./style"
import { v4 as uuidv4 } from 'uuid';
// id, title, inputTag, type: 'row' || 'column' // id, title, inputTag, type: 'row' || 'column'
const MiniTable = ({ const MiniTable = ({
data, data,
gap = '5px' gap = '5px'
}) => { }) => {
return (<TableBlock gap={gap}> return (<TableBlock gap={gap}>
{data?.map(({id, title, inputTag, type, child, gap}) => ( {data?.map(({ id, title, inputTag, type, child, gap }) => (
<TableBlock.Row id={id} gap={gap}> <TableBlock.Row id={`${id}`} gap={gap} key={`boxdialer_min iTable_${id}`}>
<TableBlock.RowInset blockType={type}> <TableBlock.RowInset blockType={type}>
<p className={'title'}>{title}</p> <p className={'title'}>{title}</p>
<div className={'inputArea'}>{inputTag}</div> <div className={'inputArea'}>{inputTag}</div>
......
src/components/MiniTable/style.js
View file @ 4094d118
...@@ -9,8 +9,13 @@ const TableBlock = styled.div` ...@@ -9,8 +9,13 @@ const TableBlock = styled.div`
` `
TableBlock.Row = styled.div` TableBlock.Row = styled.div`
width: 100%; width: 100%;
border-bottom: 1px solid #333; //border-bottom: 1px solid #333;
background-color: #d2d2d26b;
box-sizing: border-box;
display: flex; display: flex;
border-radius: 10px;
padding: 5px;
flex-direction: column; flex-direction: column;
gap: ${({gap})=> gap ? gap : '3px'}; gap: ${({gap})=> gap ? gap : '3px'};
.child{ .child{
...@@ -25,7 +30,7 @@ TableBlock.RowInset = styled.div` ...@@ -25,7 +30,7 @@ TableBlock.RowInset = styled.div`
}} }}
.title { .title {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px; font-size: 14px;
font-weight: initial; font-weight: initial;
margin: 0; margin: 0;
padding: 0; padding: 0;
......
src/components/Modal/index.jsx
View file @ 4094d118
/** @format */ /** @format */
import React, { useEffect, useState } from 'react'; import React, {useEffect, useState} from 'react';
import MainBlock, { ModalContainer } from './style'; import MainBlock, {ModalContainer} from './style';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop'; import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
import CallEndIcon from '@mui/icons-material/CallEnd'; import CallEndIcon from '@mui/icons-material/CallEnd';
import MicIcon from '@mui/icons-material/Mic'; import MicIcon from '@mui/icons-material/Mic';
...@@ -13,9 +13,8 @@ import DialpadIcon from '@mui/icons-material/Dialpad'; ...@@ -13,9 +13,8 @@ import DialpadIcon from '@mui/icons-material/Dialpad';
import CallCardDropDown from '../CallCardDropDown'; import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad'; import ModalNumpad from '../ModalNumpad';
import {useConfigHoldMute} from "../../storage" import {useConfigHoldMute} from "../../storage"
// import { contextModalEventProperty } from '../../context/modalEventProperty';
const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { const Modal = ({children, hidden, hangupButton, phoneNumber, callType}) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const configHoldMute = useConfigHoldMute((state) => state) const configHoldMute = useConfigHoldMute((state) => state)
...@@ -24,7 +23,6 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -24,7 +23,6 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
const [transferModel, setTransferModel] = useState(true); const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false); const [numpadModal, setNumpadModal] = useState(false);
console.log('callType_modal: ', callType)
useEffect(() => { useEffect(() => {
setModalHidden(hidden); setModalHidden(hidden);
...@@ -46,14 +44,14 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -46,14 +44,14 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
if (!modalHidden) return; if (!modalHidden) return;
const selectModalType = (type) => { const selectModalType = (type) => {
console.log('selectModalType_inset_component: ', type)
switch (type) { switch (type) {
case 'incoming': case 'incoming':
return ( return (<ModalContainer.Footer rollUp={rollUp}>
<ModalContainer.Footer rollUp={rollUp}>
<button <button
className='redButton' className='redButton'
onClick={() => boxDialer.skipButtonClick()}> onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon /> <CallEndIcon/>
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
<button <button
...@@ -61,66 +59,50 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -61,66 +59,50 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
onClick={() => boxDialer.answerButtonClick()}> onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ ОТВЕТИТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>);
);
case 'outgoing': case 'outgoing':
return ( return (<ModalContainer.Footer rollUp={rollUp}>
<ModalContainer.Footer rollUp={rollUp}>
<button <button
className='greenButton' className='greenButton'
onClick={() => boxDialer.answerButtonClick()}> onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ ОТВЕТИТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>);
);
case 'connectingIncoming': case 'connectingIncoming':
return ( return (<ModalContainer.Footer rollUp={rollUp}>
<ModalContainer.Footer rollUp={rollUp}>
<button <button
className='redButton' className='redButton'
onClick={() => boxDialer.skipButtonClick()}> onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon /> <CallEndIcon/>
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>);
);
case 'connectingOutgoing': case 'connectingOutgoing':
return ( return (<ModalContainer.Footer rollUp={rollUp}>
<ModalContainer.Footer rollUp={rollUp}>
<button <button
className='redButton' className='redButton'
onClick={() => boxDialer.skipButtonClick()}> onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon /> <CallEndIcon/>
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>);
);
case 'connected': case 'connected':
return ( return (<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'> <div className='outcomingEventStyle'>
<div onClick={() => boxDialer.holdButtonClick()}> <div onClick={() => boxDialer.holdButtonClick()}>
{configHoldMute?.state?.callHold ? ( {configHoldMute?.state?.callHold ? (<PlayArrowIcon style={{color: '#fff'}}/>) : (
<PlayArrowIcon style={{ color: '#fff' }} /> <PauseIcon style={{color: '#fff'}}/>)}
) : (
<PauseIcon style={{ color: '#fff' }} />
)}
</div> </div>
<div onClick={() => boxDialer.muteButtonClick()}> <div onClick={() => boxDialer.muteButtonClick()}>
{configHoldMute?.state?.callMute ? ( {configHoldMute?.state?.callMute ? (<MicOffIcon style={{color: '#fff'}}/>) : (
<MicOffIcon style={{ color: '#fff' }} /> <MicIcon style={{color: '#fff'}}/>)}
) : (
<MicIcon style={{ color: '#fff' }} />
)}
</div> </div>
<div <div
className='transferAreaIcon' className='transferAreaIcon'
onClick={() => { onClick={() => {
window.BX window.BX ? boxDialer.selectUser() : setTransferModel(!transferModel);
? boxDialer.selectUser()
: setTransferModel(!transferModel);
}}> }}>
<SendToMobileIcon style={{ color: '#fff' }} /> <SendToMobileIcon style={{color: '#fff'}}/>
<CallCardDropDown <CallCardDropDown
hiddenState={transferModel} hiddenState={transferModel}
selectUserFunc={selectUserFunc} selectUserFunc={selectUserFunc}
...@@ -128,32 +110,30 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -128,32 +110,30 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
</div> </div>
<div className={'openNumpadAreaIcon'}> <div className={'openNumpadAreaIcon'}>
<DialpadIcon <DialpadIcon
style={{ color: '#fff' }} style={{color: '#fff'}}
onClick={() => openNumpad()} onClick={() => openNumpad()}
/> />
<ModalNumpad hidden={numpadModal} /> <ModalNumpad hidden={numpadModal}/>
</div> </div>
</div> </div>
<button <button
className='redButton' className='redButton'
onClick={() => boxDialer.skipButtonClick()}> onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon /> <CallEndIcon/>
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>);
);
default: default:
return ( return (<ModalContainer.Footer rollUp={rollUp}>
<ModalContainer.Footer rollUp={rollUp}>
Do not fount event Do not fount event
</ModalContainer.Footer> </ModalContainer.Footer>);
);
} }
}; };
return ( console.log('selectModalType_inset_component modalHidden value', modalHidden)
<MainBlock
hidden={modalHidden || modalHidden} return (<MainBlock
hidden={true}
rollUp={rollUp} rollUp={rollUp}
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}> <ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
...@@ -167,16 +147,11 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -167,16 +147,11 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
Свернуть Свернуть
</p> </p>
</ModalContainer.Top> </ModalContainer.Top>
<hr /> <hr/>
<ModalContainer.Head rollUp={rollUp}> <ModalContainer.Head rollUp={rollUp}>
<div className='round'></div> <div className='round'></div>
<p className='name'>No name</p> <p className='name'>No name</p>
</ModalContainer.Head> </ModalContainer.Head>
{/* <hr />
<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
<hr />
<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
<hr /> */}
{selectModalType(callType)} {selectModalType(callType)}
</ModalContainer> </ModalContainer>
<div className='rollUpVesion'> <div className='rollUpVesion'>
...@@ -190,11 +165,10 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -190,11 +165,10 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
<button className='rollUpUn' onClick={() => setRollUp(false)}> <button className='rollUpUn' onClick={() => setRollUp(false)}>
<VerticalAlignTopIcon /> <VerticalAlignTopIcon/>
</button> </button>
</div> </div>
</MainBlock> </MainBlock>);
);
}; };
export default Modal; export default Modal;
src/components/ModalNumpad/index.jsx
View file @ 4094d118
...@@ -3,9 +3,10 @@ ...@@ -3,9 +3,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Block, { NumberButton } from './style'; import Block, { NumberButton } from './style';
import numbers from '../../lib/numbers'; import numbers from '../../lib/numbers';
import {useColorConfig} from "../../storage/globalColorConfig"
const ModalNumpad = ({ hidden }) => { const ModalNumpad = ({ hidden }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store)
const [dtmfValue, setDtmfValue] = useState(''); const [dtmfValue, setDtmfValue] = useState('');
const selectNumberType = (value) => { const selectNumberType = (value) => {
boxDialer.sipSendDTMF(value); boxDialer.sipSendDTMF(value);
...@@ -18,7 +19,7 @@ const ModalNumpad = ({ hidden }) => { ...@@ -18,7 +19,7 @@ const ModalNumpad = ({ hidden }) => {
}; };
// 11 // 11
return ( return (
<Block visiblevalue={hidden}> <Block visiblevalue={hidden} switchAnim={useColorConfigStore.state.switchAnim}>
<Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea> <Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea>
{numbers?.map((mapItem) => ( {numbers?.map((mapItem) => (
<NumberButton <NumberButton
......
src/components/ModalNumpad/style.js
View file @ 4094d118
...@@ -10,7 +10,7 @@ const Block = styled.div` ...@@ -10,7 +10,7 @@ const Block = styled.div`
bottom: 50px; bottom: 50px;
border-radius: 10px; border-radius: 10px;
left: 50%; left: 50%;
transition: 0.3s; transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' };
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px; grid-gap: 8px;
......
src/components/ModalPhoneNumpad/index.jsx
View file @ 4094d118
/** @format */ /** @format */
import React, {useCallback, useEffect, useState} from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import ModalPhoneNumpadStyle, {NumberButton, Input} from './style'; import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
import numbers from '../../lib/numbers'; import numbers from '../../lib/numbers';
import CallIcon from '@mui/icons-material/Call'; import CallIcon from '@mui/icons-material/Call';
import {toast} from 'react-hot-toast'; import { toast } from 'react-hot-toast';
import DropDown from '../DropDown'; import DropDown from '../DropDown';
import {CommentsDisabledOutlined} from '@mui/icons-material'; import { CommentsDisabledOutlined } from '@mui/icons-material';
import CallHistoryInputDropdown from '../CallHistoryInputDropdown'; import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey'; import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey';
import {Text, useTranslator} from '@eo-locale/react'; import { Text, useTranslator } from '@eo-locale/react';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import { useColorConfig } from '../../storage/globalColorConfig';
const ModalPhoneNumpad = ({ const ModalPhoneNumpad = ({
phoneModal, phoneModal,
...@@ -23,10 +24,11 @@ const ModalPhoneNumpad = ({ ...@@ -23,10 +24,11 @@ const ModalPhoneNumpad = ({
variant, variant,
extnums, extnums,
setSettingHidden, setSettingHidden,
settingHidden settingHidden,
}) => { }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store);
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [call_history, setCall_history] = useState([]); const [call_history, setCall_history] = useState([]);
const [numberSelectHistory, setNumberSelectHistory] = useState(0); const [numberSelectHistory, setNumberSelectHistory] = useState(0);
...@@ -34,7 +36,9 @@ const ModalPhoneNumpad = ({ ...@@ -34,7 +36,9 @@ const ModalPhoneNumpad = ({
const translator = useTranslator(); const translator = useTranslator();
useEffect(() => { useEffect(() => {
let currentCalls = localStorage.getItem('callhistory') ? JSON.parse(localStorage.getItem('callhistory')) : false; let currentCalls = localStorage.getItem('callhistory')
? JSON.parse(localStorage.getItem('callhistory'))
: false;
if (currentCalls) { if (currentCalls) {
setCall_history(currentCalls); setCall_history(currentCalls);
} }
...@@ -45,14 +49,16 @@ const ModalPhoneNumpad = ({ ...@@ -45,14 +49,16 @@ const ModalPhoneNumpad = ({
}, [modalState.bool]); }, [modalState.bool]);
useEffect(() => { useEffect(() => {
if (!phoneModal) setSettingHidden(false) if (!phoneModal) setSettingHidden(false);
}, [phoneModal]) }, [phoneModal]);
const inputController = ({value, type, from}) => { const inputController = ({ value, type, from }) => {
boxDialer.onSoundType({type: 'pick', bool: true}); boxDialer.onSoundType({ type: 'pick', bool: true });
switch (type) { switch (type) {
case 'add': case 'add':
if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) { if (
value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length
) {
if (from === 'input') return setInputValue(value); if (from === 'input') return setInputValue(value);
if (from === 'button') setInputValue(inputValue + value); if (from === 'button') setInputValue(inputValue + value);
} }
...@@ -60,10 +66,12 @@ const ModalPhoneNumpad = ({ ...@@ -60,10 +66,12 @@ const ModalPhoneNumpad = ({
break; break;
case 'delete': case 'delete':
if (from === 'button') { if (from === 'button') {
setInputValue(inputValue setInputValue(
inputValue
.split('') .split('')
.slice(0, inputValue.length - 1) .slice(0, inputValue.length - 1)
.join(''),); .join(''),
);
} }
if (from === 'input') { if (from === 'input') {
setInputValue(value); setInputValue(value);
...@@ -74,13 +82,20 @@ const ModalPhoneNumpad = ({ ...@@ -74,13 +82,20 @@ const ModalPhoneNumpad = ({
} }
}; };
const history = ({type}) => { const history = ({ type }) => {
if (phoneModal && (modalState.bool ? false : true)) { if (phoneModal && (modalState.bool ? false : true)) {
if ((type === 'up' && numberSelectHistory < call_history.length) || numberSelectHistory === 'zero') { if (
setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,); (type === 'up' && numberSelectHistory < call_history.length) ||
numberSelectHistory === 'zero'
) {
setNumberSelectHistory(
numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,
);
} }
if (type === 'down' && numberSelectHistory > 0) { if (type === 'down' && numberSelectHistory > 0) {
setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,); setNumberSelectHistory(
numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,
);
} }
} }
}; };
...@@ -91,7 +106,9 @@ const ModalPhoneNumpad = ({ ...@@ -91,7 +106,9 @@ const ModalPhoneNumpad = ({
if (numberSelectHistory == 0) { if (numberSelectHistory == 0) {
setInputValue(''); setInputValue('');
} }
selectedNumber = call_history.slice(numberSelectHistory * -1)[0] ? call_history.slice(numberSelectHistory * -1)[0] : false; selectedNumber = call_history.slice(numberSelectHistory * -1)[0]
? call_history.slice(numberSelectHistory * -1)[0]
: false;
if (numberSelectHistory === 0) { if (numberSelectHistory === 0) {
selectedNumber = ''; selectedNumber = '';
...@@ -115,7 +132,7 @@ const ModalPhoneNumpad = ({ ...@@ -115,7 +132,7 @@ const ModalPhoneNumpad = ({
navigator.clipboard navigator.clipboard
.readText() .readText()
.then((text) => { .then((text) => {
inputController({type: 'add', value: text, from: 'button'}); inputController({ type: 'add', value: text, from: 'button' });
}) })
.catch((err) => { .catch((err) => {
console.log('Something went wrong', err); console.log('Something went wrong', err);
...@@ -128,18 +145,37 @@ const ModalPhoneNumpad = ({ ...@@ -128,18 +145,37 @@ const ModalPhoneNumpad = ({
toggleCP: (e) => { toggleCP: (e) => {
if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') { if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
callButton(); callButton();
} else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') { } else if (
inputController({type: 'delete', from: 'button', value: e.value}); phoneModal &&
} else if (phoneModal && (modalState.bool ? false : true) && !isNaN(+e.key)) { (modalState.bool ? false : true) &&
inputController({type: 'add', value: e.key, from: 'button'}); e.key === 'Backspace'
} else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') { ) {
} else if ((phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) || e.keyCode == 40) history({type: e.keyCode === 38 ? 'up' : 'down'}); inputController({ type: 'delete', from: 'button', value: e.value });
} else if (
phoneModal &&
(modalState.bool ? false : true) &&
!isNaN(+e.key)
) {
inputController({ type: 'add', value: e.key, from: 'button' });
} else if (
phoneModal &&
(modalState.bool ? false : true) &&
e.key === 'Backspace'
) {
} else if (
(phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) ||
e.keyCode == 40
)
history({ type: e.keyCode === 38 ? 'up' : 'down' });
}, },
}; };
const handleKeyUp = useCallback((event) => { const handleKeyUp = useCallback(
(event) => {
gameState.toggleCP(event); gameState.toggleCP(event);
}, [gameState.toggleCP],); },
[gameState.toggleCP],
);
useEffect(() => { useEffect(() => {
document.addEventListener('keyup', handleKeyUp); document.addEventListener('keyup', handleKeyUp);
...@@ -150,16 +186,19 @@ const ModalPhoneNumpad = ({ ...@@ -150,16 +186,19 @@ const ModalPhoneNumpad = ({
}, [handleKeyUp]); }, [handleKeyUp]);
// `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}` // `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}`
const callButton = () => { const callButton = () => {
// inset if ----------
// -------------------
var currentTime = new Date(); var currentTime = new Date();
if (dynamicValue === 'connected') { if (dynamicValue === 'connected') {
if (Boolean(inputValue.toString().length) && call_history.slice(-1)[0]?.value != inputValue) { if (
let newCallsStringify = JSON.stringify([...call_history, { Boolean(inputValue.toString().length) &&
call_history.slice(-1)[0]?.value != inputValue
) {
let newCallsStringify = JSON.stringify([
...call_history, {
value: inputValue, value: inputValue,
time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`, time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`,
},]); },
]);
localStorage.setItem('callhistory', newCallsStringify); localStorage.setItem('callhistory', newCallsStringify);
} }
boxDialer.initialized(inputValue); boxDialer.initialized(inputValue);
...@@ -171,6 +210,7 @@ const ModalPhoneNumpad = ({ ...@@ -171,6 +210,7 @@ const ModalPhoneNumpad = ({
}, },
}); });
} }
}; };
const selectFunc = (e) => { const selectFunc = (e) => {
setInputValue(e); setInputValue(e);
...@@ -182,22 +222,17 @@ const ModalPhoneNumpad = ({ ...@@ -182,22 +222,17 @@ const ModalPhoneNumpad = ({
document.querySelector('body').addEventListener('click', function (e) { document.querySelector('body').addEventListener('click', function (e) {
if (exNum) setExNum(false); if (exNum) setExNum(false);
}); });
return (<ModalPhoneNumpadStyle return (
<ModalPhoneNumpadStyle
switchAnim={useColorConfigStore.state?.switchAnim}
position={position} position={position}
hiddenValue={!phoneModal} hiddenValue={!phoneModal}
variant={variant} variant={variant}
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}>
<SettingsIcon className={'settingIcon'} onClick={() => setSettingHidden(!settingHidden)}/> <SettingsIcon
{/* <div className={'settingIcon'}
style={{ onClick={() => setSettingHidden(!settingHidden)}
background: 'red', />
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100vh',
zIndex: '99999999',
}}></div> */}
<ModalPhoneNumpadStyle.InputArea> <ModalPhoneNumpadStyle.InputArea>
<CallHistoryInputDropdown <CallHistoryInputDropdown
call_history={call_history} call_history={call_history}
...@@ -206,43 +241,60 @@ const ModalPhoneNumpad = ({ ...@@ -206,43 +241,60 @@ const ModalPhoneNumpad = ({
numberSelectHistory={numberSelectHistory} numberSelectHistory={numberSelectHistory}
setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory} setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
/> />
{inputValue?.length ? (<Input.BackSpaceIcon {inputValue?.length ? (
onClick={() => inputController({type: 'delete', from: 'button'})} <Input.BackSpaceIcon
/>) : ('')} onClick={() => inputController({ type: 'delete', from: 'button' })}
/>
) : (
''
)}
</ModalPhoneNumpadStyle.InputArea> </ModalPhoneNumpadStyle.InputArea>
<ModalPhoneNumpadStyle.ButtonArea> <ModalPhoneNumpadStyle.ButtonArea>
{numbers?.map((mapItem) => (<NumberButton {numbers?.map((mapItem) => (
onMouseDown={() => boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])} <NumberButton
switchAnim={useColorConfigStore.state?.switchAnim}
sizeContext={useColorConfigStore.state.sizePixel}
onMouseDown={() =>
boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])
}
onMouseUp={() => boxDialer.stop()} onMouseUp={() => boxDialer.stop()}
onMouseOut={() => boxDialer.stop()} onMouseOut={() => boxDialer.stop()}
className='nocopy' className='nocopy'
key={mapItem.id} key={mapItem.id}
onClick={() => { onClick={() => {
mapItem.type === 'number' && inputController({ mapItem.type === 'number' &&
value: mapItem.value, type: 'add', from: 'button', inputController({
value: mapItem.value,
type: 'add',
from: 'button',
}); });
}}> }}>
{mapItem.nameNumber} {mapItem.nameNumber}
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon> <NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
</NumberButton>))} </NumberButton>
{!modalState.bool ? (<> ))}
{!modalState.bool ? (
<>
<NumberButton <NumberButton
style={{gridColumn: '1/4'}} style={{ gridColumn: '1/4' }}
status={dynamicValue} status={dynamicValue}
type={'call_button'}> type={'call_button'}>
<NumberButton.CallButton exNum={exNum}> <NumberButton.CallButton exNum={exNum}>
<div className='left' onClick={() => callButton()}> <div className='left' onClick={() => callButton()}>
<CallIcon className='callIcon'/> <CallIcon className='callIcon' />
<p className='call_text'>{translator.translate('CALL')}</p> <p className='call_text'>{translator.translate('CALL')}</p>
</div> </div>
<div className='right' onClick={() => setExNum(!exNum)}> <div className='right' onClick={() => setExNum(!exNum)}>
{/* <KeyboardControlKeyIcon className='icon' /> */}
<div className='icon'></div> <div className='icon'></div>
</div> </div>
</NumberButton.CallButton> </NumberButton.CallButton>
<NumberButton.CallButtonModal visiblevalue={exNum}> <NumberButton.CallButtonModal
<NumberButton.CallButtonModalInset> switchAnim={useColorConfigStore.state?.switchAnim}
{extnums?.map(({number, title}, index) => (<p visiblevalue={exNum}>
<NumberButton.CallButtonModalInset
switchAnim={useColorConfigStore.state?.switchAnim}>
{extnums?.map(({ number, title }, index) => (
<p
key={index} key={index}
className='num_item' className='num_item'
onClick={() => { onClick={() => {
...@@ -251,21 +303,22 @@ const ModalPhoneNumpad = ({ ...@@ -251,21 +303,22 @@ const ModalPhoneNumpad = ({
callButton(); callButton();
}}> }}>
{title} {title}
</p>))} </p>
))}
</NumberButton.CallButtonModalInset> </NumberButton.CallButtonModalInset>
</NumberButton.CallButtonModal> </NumberButton.CallButtonModal>
{/* <ModalPhoneNumpadStyle.Window
visiblevalue={exNum}
onClick={() => setExNum(false)}
/> */}
</NumberButton> </NumberButton>
</>) : (<> </>
<div style={{height: '33px'}}></div> ) : (
<div style={{height: '33px'}}></div> <>
</>)} <div style={{ height: '33px' }}></div>
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason}/> <div style={{ height: '33px' }}></div>
</>
)}
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
</ModalPhoneNumpadStyle.ButtonArea> </ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle>); </ModalPhoneNumpadStyle>
);
}; };
export default ModalPhoneNumpad; export default ModalPhoneNumpad;
src/components/ModalPhoneNumpad/style.js
View file @ 4094d118
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import { sizePixelPixelSizeFunc } from '../../lib/sizeContext';
const ModalPhoneNumpadStyle = styled.div` const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0 0 20px #00000047; box-shadow: 0 0 20px #00000047;
...@@ -14,7 +15,8 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -14,7 +15,8 @@ const ModalPhoneNumpadStyle = styled.div`
width: 230px; width: 230px;
position: fixed; position: fixed;
bottom: 120px; bottom: 120px;
transition: 0.2s !important; transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.2s' : '0s') : '0.2s'};
z-index: 9999; z-index: 9999;
${({ hiddenValue, position, variant }) => ${({ hiddenValue, position, variant }) =>
hiddenValue hiddenValue
...@@ -26,7 +28,7 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -26,7 +28,7 @@ const ModalPhoneNumpadStyle = styled.div`
grid-template-rows: 40px 1fr; grid-template-rows: 40px 1fr;
grid-gap: 15px; grid-gap: 15px;
cursor: default; cursor: default;
.settingIcon{ .settingIcon {
position: absolute; position: absolute;
font-size: 11px; font-size: 11px;
cursor: pointer; cursor: pointer;
...@@ -101,7 +103,7 @@ const NumberButton = styled.div` ...@@ -101,7 +103,7 @@ const NumberButton = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 22px; ${({ sizeContext }) => sizePixelPixelSizeFunc(sizeContext, 22)}
cursor: pointer; cursor: pointer;
height: 33px; height: 33px;
position: relative; position: relative;
...@@ -111,7 +113,9 @@ const NumberButton = styled.div` ...@@ -111,7 +113,9 @@ const NumberButton = styled.div`
? 'orange' ? 'orange'
: status === 'connected' && '#a0c13d' : status === 'connected' && '#a0c13d'
: '#0000007d'}; : '#0000007d'};
transition: 0.3s; transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.3s' : '0s') : '0.3s'};
.callIcon { .callIcon {
color: #0000007d; color: #0000007d;
} }
...@@ -166,10 +170,6 @@ NumberButton.CallButton = styled.div` ...@@ -166,10 +170,6 @@ NumberButton.CallButton = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
.icon { .icon {
/* margin: 0 auto;
padding: 0;
color: #000;
transition: 0.2s; */
margin: 0 auto; margin: 0 auto;
border: 4px solid transparent; border: 4px solid transparent;
width: 8px; width: 8px;
...@@ -210,7 +210,9 @@ NumberButton.CallButtonModal = styled.div` ...@@ -210,7 +210,9 @@ NumberButton.CallButtonModal = styled.div`
padding: 3px 3px 15px 3px; padding: 3px 3px 15px 3px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
transition: 0.1s; transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.1s' : '0s') : '0.1s'};
clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0); clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
${({ visiblevalue }) => ${({ visiblevalue }) =>
visiblevalue visiblevalue
...@@ -235,8 +237,12 @@ NumberButton.CallButtonModalInset = styled.div` ...@@ -235,8 +237,12 @@ NumberButton.CallButtonModalInset = styled.div`
.num_item { .num_item {
text-wrap: nowrap; text-wrap: nowrap;
color: #000; color: #000;
transition: 0.2s; transition: ${({ switchAnim }) =>
/* padding: 7px 4px; */ typeof switchAnim !== 'undefined'
? switchAnim
? '0.2s'
: '0s'
: '0.2s'};
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
margin: 2px 0; margin: 2px 0;
......
src/components/setting/index.jsx
View file @ 4094d118
import React, {useEffect, useState} from 'react' import React, { useEffect, useState } from 'react'
import SettingMainStyle from './style' import SettingMainStyle from './style'
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import FormatPaintIcon from '@mui/icons-material/FormatPaint'; import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import BuildIcon from '@mui/icons-material/Build'; import BuildIcon from '@mui/icons-material/Build';
import FixComponent from "../settingComponents/fixComponent" import FixComponent from "../settingComponents/fixComponent"
import StyleComponent from "../settingComponents/styleComponent"
import { useColorConfig } from "../../storage/globalColorConfig"
import { v4 as uuidv4 } from 'uuid';
const SettingComponent = ({ const SettingComponent = ({
settingHidden, variant, position settingHidden, variant, position
}) => { }) => {
const [settingPage, setSettingPage] = useState(0) const [settingPage, setSettingPage] = useState(0)
var elem = document.getElementById('data'); const elem = document.getElementById('data');
const useColorConfigStore = useColorConfig((store) => store)
const allData = [ const allData = [
{ {
id: 0, id: uuidv4(),
title: 'Test-2',
icon: <BuildIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 1,
title: 'Test-1', title: 'Test-1',
icon: <FormatPaintIcon className={'leftIcons'} />, icon: <FormatPaintIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>Style BoxDialer</SettingMainStyle.RightSelectInfoOneBlock> Content: () => {
// return <div></div>
return <SettingMainStyle.RightSelectInfoOneBlock>
<StyleComponent />
</SettingMainStyle.RightSelectInfoOneBlock>
}
},
{
id: uuidv4(),
title: 'Test-2',
icon: <BuildIcon className={'leftIcons'} />,
Content: () => {
// return <div></div>
return <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
}
} }
] ]
...@@ -30,11 +43,9 @@ const SettingComponent = ({ ...@@ -30,11 +43,9 @@ const SettingComponent = ({
setSettingPage(count) setSettingPage(count)
} }
console.log('elem: ', elem)
useEffect(() => { useEffect(() => {
if(elem){ if (elem) {
elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage,behavior: 'smooth'}) elem.scrollTo({ top: elem.scrollHeight / allData.length * settingPage, behavior: typeof useColorConfigStore.state.switchAnim !== 'undefined' ? useColorConfigStore.state.switchAnim ? 'smooth' : 'auto' : 'smooth' })
} }
}, [settingPage]); }, [settingPage]);
...@@ -46,7 +57,7 @@ const SettingComponent = ({ ...@@ -46,7 +57,7 @@ const SettingComponent = ({
> >
<SettingMainStyle.LeftMenu> <SettingMainStyle.LeftMenu>
{ {
allData.map(({id, title, icon})=> <div id={id} className={`menuItem ${settingPage === id && 'active'}`} onClick={()=> changeSettingPageCountFunc(id)}> allData?.map(({ id, icon }, index) => <div id={id} key={id} className={`menuItem ${settingPage === index && 'active'}`} onClick={() => changeSettingPageCountFunc(index)}>
{icon} {icon}
<div className={'backgroundFilter'}></div> <div className={'backgroundFilter'}></div>
</div>) </div>)
...@@ -54,7 +65,7 @@ const SettingComponent = ({ ...@@ -54,7 +65,7 @@ const SettingComponent = ({
</SettingMainStyle.LeftMenu> </SettingMainStyle.LeftMenu>
<SettingMainStyle.RightSelectInfo id={'data'}> <SettingMainStyle.RightSelectInfo id={'data'}>
{ {
allData.map(({content, id})=> content) allData?.map(({ Content, id }) => <div key={id}><Content /></div>)
} }
</SettingMainStyle.RightSelectInfo> </SettingMainStyle.RightSelectInfo>
......
src/components/settingComponents/fixComponent/index.jsx
View file @ 4094d118
...@@ -4,14 +4,13 @@ import Switch from '@mui/material/Switch'; ...@@ -4,14 +4,13 @@ import Switch from '@mui/material/Switch';
import MiniTable from "../../MiniTable" import MiniTable from "../../MiniTable"
import {useColorConfig} from "../../../storage/globalColorConfig" import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from '@mui/material/Slider'; import Slider from '@mui/material/Slider';
import { v4 as uuidv4 } from 'uuid'
const FixComponent = () => { const FixComponent = () => {
const useColorConfigStore = useColorConfig((store) => store) const useColorConfigStore = useColorConfig((store) => store)
console.log('useColorConfig client: ', useColorConfigStore.state.autoAnswer)
const marks = [ const marks = [
{ {
value: 1, value: 1,
...@@ -28,8 +27,9 @@ const FixComponent = () => { ...@@ -28,8 +27,9 @@ const FixComponent = () => {
]; ];
const tableData = [{ const tableData = [
id: '1', {
id: uuidv4(),
title: 'Auto answer', title: 'Auto answer',
type: 'row', type: 'row',
child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}> child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
...@@ -37,9 +37,9 @@ const FixComponent = () => { ...@@ -37,9 +37,9 @@ const FixComponent = () => {
aria-label="Restricted values" aria-label="Restricted values"
defaultValue={40} defaultValue={40}
step={null} step={null}
value={useColorConfigStore.state.autoAnswerSecond} value={useColorConfigStore.state.autoAnswerSecond || true}
marks={marks} marks={marks}
onChange={(e)=> useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})} onChange={(e) => useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
/> />
</div>, </div>,
inputTag: <Switch inputTag: <Switch
...@@ -49,7 +49,8 @@ const FixComponent = () => { ...@@ -49,7 +49,8 @@ const FixComponent = () => {
return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked}) return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
}} }}
/>, />,
}] }
]
return (<Block> return (<Block>
{/*<p>Text</p>*/} {/*<p>Text</p>*/}
......
src/components/settingComponents/fixComponent/style.js
View file @ 4094d118
import styled from 'styled-components' import styled from 'styled-components'
const Block = styled.div` const Block = styled.div`
margin: 5px;
` `
export default Block export default Block
src/components/settingComponents/styleComponent/index.jsx 0 → 100644
View file @ 4094d118
import React from 'react'
import StyleBlock from "./style"
import MiniTable from "../../MiniTable"
import Checkbox from '@mui/material/Checkbox';
import { useColorConfig } from "../../../storage/globalColorConfig"
import Slider from "@mui/material/Slider"
import { v4 as uuidv4 } from 'uuid';
const StyleComponent = () => {
const useColorConfigStore = useColorConfig((store) => store)
const marks = [{
value: 0, label: <span style={{ fontSize: 12 }}>none</span>,
}, {
value: 25, label: <span style={{ fontSize: 12 }}>+2px</span>,
}, {
value: 50, label: <span style={{ fontSize: 12 }}>+3px</span>,
}, {
value: 75, label: <span style={{ fontSize: 12 }}>+4px</span>,
}, {
value: 100, label: <span style={{ fontSize: 12 }}>+5px</span>,
}];
const tableData = [{
id: uuidv4(), title: 'Show version', type: 'row', inputTag: <Checkbox
defaultChecked={typeof useColorConfigStore.state.showVersion === 'undefined' ? true : useColorConfigStore.state.showVersion}
onChange={(e) => useColorConfigStore.setColor({ name: 'showVersion', value: e.target.checked })} />
}, {
id: uuidv4(),
title: 'Font size of Boxdialer',
type: 'column',
child: <div style={{ padding: '0 20px 0 15px' }}><Slider
aria-label="Restricted values"
defaultValue={50}
step={null}
value={typeof useColorConfigStore.state.sizePixel === 'undefined' ? 1 : useColorConfigStore.state.sizePixel}
marks={marks}
onChange={(e) => useColorConfigStore.setColor({ name: 'sizePixel', value: e.target.value })}
/></div>
}, {
id: uuidv4(), title: 'Switch On/Off anm.', type: 'row', inputTag: <Checkbox
defaultChecked={typeof useColorConfigStore.state.switchAnim === 'undefined' ? true : useColorConfigStore.state.switchAnim}
onChange={(e) => useColorConfigStore.setColor({ name: 'switchAnim', value: e.target.checked })} />
},]
return (
<StyleBlock>
<MiniTable data={tableData} gap={'10px'} />
</StyleBlock>
)
}
export default StyleComponent
src/components/settingComponents/styleComponent/style.js 0 → 100644
View file @ 4094d118
import styled from 'styled-components'
const StyleBlock = styled.div`
`
export default StyleBlock
src/lib/boxDIaler.js
View file @ 4094d118
...@@ -43,12 +43,10 @@ export class BoxDialer { ...@@ -43,12 +43,10 @@ export class BoxDialer {
oscillator2; oscillator2;
extnum; extnum;
timer = { timer = {
time: 0, time: 0, type: null,
type: null,
}; };
innerTimer = { innerTimer = {
time: 0, time: 0, type: null,
type: null,
}; };
options; options;
socket; socket;
...@@ -60,8 +58,7 @@ export class BoxDialer { ...@@ -60,8 +58,7 @@ export class BoxDialer {
player; player;
strmTrack; strmTrack;
isRestarting; isRestarting;
globalHistoryData globalHistoryData;
constructor() { constructor() {
this.played = false; this.played = false;
...@@ -86,19 +83,16 @@ export class BoxDialer { ...@@ -86,19 +83,16 @@ export class BoxDialer {
this.waitRingTone.loop = true; this.waitRingTone.loop = true;
this.callEvetsBoxDialer = { this.callEvetsBoxDialer = {
callHold: false, callHold: false, callMute: null,
callMute: null,
}; };
this.options = { this.options = {
eventHandlers: this.uaEvents(), eventHandlers: this.uaEvents(), mediaConstraints: {audio: true, video: false},
mediaConstraints: {audio: true, video: false},
}; };
} }
setGlobalHistoryData(data){ setGlobalHistoryData(data) {
console.log('setGlobalHistoryData: ', data) this.globalHistoryData = data;
this.globalHistoryData = data
} }
dialTone(freq1, freq2) { dialTone(freq1, freq2) {
...@@ -161,35 +155,22 @@ export class BoxDialer { ...@@ -161,35 +155,22 @@ export class BoxDialer {
return { return {
progress: (e) => { progress: (e) => {
console.log('%c progress', 'font-size: 22px; color: green;', e); console.log('%c progress', 'font-size: 22px; color: green;', e);
// this.hangupButtonClick();
// this.closeBxCall();
// window.innerCallBegin(true);
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: true, bool: true, type: 'connectingOutgoing', from: this?.callSession?._remote_identity?._uri?.user,
type: 'connectingOutgoing',
from: this?.callSession?._remote_identity?._uri?.user,
}); });
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', stateCode: 'connectingOutgoing', funcParam: {
stateCode: 'connectingOutgoing', bool: false, callType: '',
funcParam: {
bool: false,
callType: '',
}, },
}); });
}, }, failed: (e) => {
failed: (e) => {
console.log('%c failed', 'font-size: 22px; color: green;', e); console.log('%c failed', 'font-size: 22px; color: green;', e);
if (e?.cause) { if (e?.cause) {
toast.error(e?.cause); toast.error(e?.cause);
} }
// console.log('call failed with cause: ' + e.data);
this.closeBxCall(); this.closeBxCall();
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: false, bool: false, type: null, from: '',
type: null,
from: '',
}); });
this.stopInnerTimer(); this.stopInnerTimer();
if (e.cause == 'User Denied Media Access') { if (e.cause == 'User Denied Media Access') {
...@@ -203,62 +184,48 @@ export class BoxDialer { ...@@ -203,62 +184,48 @@ export class BoxDialer {
window.navigator.mediaDevices window.navigator.mediaDevices
.getUserMedia({audio: true}) .getUserMedia({audio: true})
.then(function (stream) { .then(function (stream) {
console.log( console.log('User_Danied_Media_Access', 'You let me use your mic!',);
'User_Danied_Media_Access',
'You let me use your mic!',
);
}) })
.catch(function (err) { .catch(function (err) {
console.log('User_Danied_Media_Access', 'No mic for you!'); console.log('User_Danied_Media_Access', 'No mic for you!');
}); });
} }
}, }, ended: (e) => {
ended: (e) => {
console.log('%c ended', 'font-size: 22px; color: green;'); console.log('%c ended', 'font-size: 22px; color: green;');
this.closeBxCall(); this.closeBxCall();
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: false, bool: false, type: null, from: '',
type: null,
from: '',
}); });
this.stopInnerTimer(); this.stopInnerTimer();
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', funcParam: {
funcParam: { bool: false, callType: '',
bool: false,
callType: '',
}, },
}); });
this.removeViExternalCard(); this.removeViExternalCard();
}, }, confirmed: (e) => {
confirmed: (e) => {
console.log('%c confirmed', 'font-size: 22px; color: green;', e); console.log('%c confirmed', 'font-size: 22px; color: green;', e);
// console.log(`%c BXLOG:`, datas, 'background-color: red;');
this.onSipStateChange.innerCallerModal({
bool: true,
type: 'connected',
from: this?.callSession?._remote_identity?._uri?.user,
});
this.startInnerTimer();
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', stateCode: 'connected', funcParam: {
stateCode: 'connected', bool: true, callType: 'connected', callFromName: 'Test',
funcParam: {
bool: true,
callType: 'connected',
callFromName: 'Test',
}, },
}); });
this.onSipStateChange.innerCallerModal({
bool: true, type: 'connected', from: this?.callSession?._remote_identity?._uri?.user,
});
this.startInnerTimer();
}, },
}; };
} }
isUaRunning() { isUaRunning() {
return ( return (Boolean(typeof window.BX !== 'undefined') && Boolean(window.localStorage.getItem(BX.bitrix_sessid() + '_mycall')) && Boolean(window.localStorage.getItem('mycall')));
Boolean(typeof window.BX !== 'undefined') &&
Boolean(window.localStorage.getItem(BX.bitrix_sessid() + '_mycall')) &&
Boolean(window.localStorage.getItem('mycall'))
);
} }
removeViExternalCard() { removeViExternalCard() {
...@@ -302,8 +269,7 @@ export class BoxDialer { ...@@ -302,8 +269,7 @@ export class BoxDialer {
showNotification(cbk) { showNotification(cbk) {
let callerId = this.callSession._remote_identity._uri.user; let callerId = this.callSession._remote_identity._uri.user;
const greeting = new Notification(`Звонок от ${callerId}`, { const greeting = new Notification(`Звонок от ${callerId}`, {
body: 'Answer Call', body: 'Answer Call', icon: tugpng,
icon: tugpng,
}); });
greeting.addEventListener('click', cbk); greeting.addEventListener('click', cbk);
} }
...@@ -361,8 +327,7 @@ export class BoxDialer { ...@@ -361,8 +327,7 @@ export class BoxDialer {
window.alovoice_setversion(packageJson?.version); window.alovoice_setversion(packageJson?.version);
} }
if (this.options) { if (this.options) {
if (typeof BX !== 'undefined') if (typeof BX !== 'undefined') BX?.localStorage?.remove('viExternalCard');
BX?.localStorage?.remove('viExternalCard');
this.socket = new WebSocketInterface(`wss://${wsurl}/ws`); this.socket = new WebSocketInterface(`wss://${wsurl}/ws`);
this.callSession = false; this.callSession = false;
...@@ -381,67 +346,35 @@ export class BoxDialer { ...@@ -381,67 +346,35 @@ export class BoxDialer {
register_expires: 60, register_expires: 60,
}); });
if (typeof BX !== 'undefined') { if (typeof BX !== 'undefined') {
console.log( console.log('setting_my_call =============================-----------',);
'setting_my_call =============================-----------', window.localStorage.setItem(BX.bitrix_sessid() + '_mycall', this.ua.configuration.instance_id,);
); window.localStorage.setItem('mycall', this.ua.configuration.instance_id,);
window.localStorage.setItem(
BX.bitrix_sessid() + '_mycall',
this.ua.configuration.instance_id,
);
window.localStorage.setItem(
'mycall',
this.ua.configuration.instance_id,
);
} }
this.ua.on('connected', (e) => { this.ua.on('connected', (e) => {
console.log( console.log('%c sip_register [connected]: ', 'font-size: 22px; color: yellow;', e,);
'%c sip_register [connected]: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.ua.on('disconnected', (e) => { this.ua.on('disconnected', (e) => {
this.onSipStateChange.dynamicValue('pending'); this.onSipStateChange.dynamicValue('pending');
console.log( console.log('%c sip_register [disconnected]: ', 'font-size: 22px; color: yellow;', e,);
'%c sip_register [disconnected]: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.ua.on('registered', (e) => { this.ua.on('registered', (e) => {
this.onSipStateChange.dynamicValue('connected'); this.onSipStateChange.dynamicValue('connected');
console.log( console.log('%c sip_register [registered]: ', 'font-size: 22px; color: yellow;', e,);
'%c sip_register [registered]: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.ua.on('unregistered', (e) => { this.ua.on('unregistered', (e) => {
console.log( console.log('%c sip_register [unregistered]: ', 'font-size: 22px; color: yellow;', e,);
'%c sip_register [unregistered]: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.ua.on('registrationFailed', (e) => { this.ua.on('registrationFailed', (e) => {
console.log( console.log('%c sip_register [registrationFailed]: ', 'font-size: 22px; color: yellow;', e,);
'%c sip_register [registrationFailed]: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.ua.on('connecting', (e) => { this.ua.on('connecting', (e) => {
console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e); console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e);
}); });
this.ua.on('registrationExpiring', (e) => { this.ua.on('registrationExpiring', (e) => {
console.log( console.log('%c registrationExpiring: ', 'font-size: 22px; color: yellow;', e,);
'%c registrationExpiring: ',
'font-size: 22px; color: yellow;',
e,
);
this.ua.register(); this.ua.register();
}); });
this.ua.on('newMessage', (e) => { this.ua.on('newMessage', (e) => {
...@@ -455,62 +388,51 @@ export class BoxDialer { ...@@ -455,62 +388,51 @@ export class BoxDialer {
}); });
this.ua.on('newRTCSession', (data) => { this.ua.on('newRTCSession', (data) => {
console.log( console.log('%c newRTCSession: ', 'font-size: 22px; color: yellow;', data,);
'%c newRTCSession: ',
'font-size: 22px; color: yellow;',
data,
);
this.callSession = data.session; this.callSession = data.session;
if (this.callSession && this.callSession.connection) { if (this.callSession && this.callSession.connection) {
this.callSession.connection.onaddstream = (e) => { this.callSession.connection.onaddstream = (e) => {
this.strmTrack = e.stream.getAudioTracks(); this.strmTrack = e.stream.getAudioTracks();
if (this.strmTrack[0]) { if (this.strmTrack[0]) {
this.remoteAudio.srcObject = new MediaStream([ this.remoteAudio.srcObject = new MediaStream([this.strmTrack[0],]);
this.strmTrack[0],
]);
this.remoteAudio.play(); this.remoteAudio.play();
} }
}; };
} }
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'incoming',
},
});
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: true, bool: true, type: 'connectingIncoming', from: this?.callSession?._remote_identity?._uri?.user,
type: 'connectingIncoming',
from: this?.callSession?._remote_identity?._uri?.user,
}); });
if (this.callSession.direction === 'incoming') { if (this.callSession.direction === 'incoming') {
this.setGuiPhoneState({
let second funcName: 'modalState', funcParam: {
console.log('auto_answer is work: ', this.globalHistoryData?.autoAnswer) bool: true, callType: 'incoming',
},
});
let second;
console.log('auto_answer is work: ', this.globalHistoryData?.autoAnswer,);
if (this.globalHistoryData?.autoAnswer) { if (this.globalHistoryData?.autoAnswer) {
switch (this.globalHistoryData?.autoAnswerSecond) { switch (this.globalHistoryData?.autoAnswerSecond) {
case 1: case 1:
second = 1000 second = 1000;
break break;
case 50: case 50:
second = 5000 second = 5000;
break break;
case 100: case 100:
second = 10000 second = 10000;
break break;
default: default:
second = 0 second = 0;
} }
console.log('auto_answer second: ', second) console.log('auto_answer second: ', second);
setTimeout(() => { setTimeout(() => {
console.log('auto_answer run boxDialer.answerButtonClick()') console.log('auto_answer run boxDialer.answerButtonClick()');
this.answerButtonClick() this.answerButtonClick();
}, second) }, second);
} }
this.showNotification(() => { this.showNotification(() => {
...@@ -518,90 +440,72 @@ export class BoxDialer { ...@@ -518,90 +440,72 @@ export class BoxDialer {
}); });
this.onSoundType({type: 'ring', bool: true}); this.onSoundType({type: 'ring', bool: true});
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', stateCode: 'connectingIncoming', funcParam: {
stateCode: 'connectingIncoming', bool: true, callType: 'incoming',
funcParam: {
bool: true,
callType: 'incoming',
}, },
}); });
// window.innerCallBegin(); // window.innerCallBegin();
this.callSession.on('progress', (e) => { this.callSession.on('progress', (e) => {
console.log( console.log('%c progress: ', 'font-size: 22px; color: yellow;', e,);
'%c progress: ',
'font-size: 22px; color: yellow;',
e,
);
this.setGuiPhoneState({ this.setGuiPhoneState({
stateCode: 'incoming', stateCode: 'incoming',
}); });
}); });
// incoming call here // incoming call here
this.callSession.on('accepted', () => { this.callSession.on('accepted', () => {
console.log( console.log('%c newRTCSession accepted: ', 'font-size: 22px; color: yellow;', e,);
'%c newRTCSession accepted: ',
'font-size: 22px; color: yellow;',
e,
);
// the call has answered // the call has answered
this.onSoundType({type: 'ring', bool: false}); this.onSoundType({type: 'ring', bool: false});
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', stateCode: 'connected', funcParam: {
funcParam: { bool: true, callType: 'connected',
bool: true,
callType: 'connected',
}, },
}); });
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: false, bool: false, type: '', from: '',
type: '',
from: '',
}); });
}); });
this.callSession.on('confirmed', () => { this.callSession.on('confirmed', () => {
console.log(
'%c newRTCSession confirmed: ',
'font-size: 22px; color: yellow;', this.setGuiPhoneState({
); funcName: 'modalState', funcParam: {
// this handler will be called for incoming calls too bool: true, callType: 'connected',
console.log( },
'%c incoming confirmed', });
'font-size: 22px; color: yellow;',
);
console.log('%c newRTCSession confirmed: ', 'font-size: 22px; color: yellow;',);
console.log('%c incoming confirmed', 'font-size: 22px; color: yellow;',);
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: true, bool: true, type: 'connected', from: this?.callSession?._remote_identity?._uri?.user,
type: 'connected',
from: this?.callSession?._remote_identity?._uri?.user,
}); });
console.log('this_callSession_remote_identity_uri: ', this?.callSession)
this.startInnerTimer(); this.startInnerTimer();
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', stateCode: 'connected', funcParam: {
funcParam: { bool: true, callType: 'connected',
bool: true,
callType: 'connected',
}, },
}); });
}); });
this.callSession.on('ended', () => { this.callSession.on('ended', () => {
console.log( console.log('%c newRTCSession ended: ', 'font-size: 22px; color: yellow;',);
'%c newRTCSession ended: ',
'font-size: 22px; color: yellow;',
);
// the call has ended // the call has ended
console.log('%c incoming end', 'font-size: 22px; color: yellow;'); console.log('%c incoming end', 'font-size: 22px; color: yellow;');
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: false, bool: false, type: null, from: '',
type: null,
from: '',
}); });
this.stopInnerTimer(); this.stopInnerTimer();
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', funcParam: {
funcParam: { bool: false, callType: '',
bool: false,
callType: '',
}, },
}); });
this.closeBxCall(); this.closeBxCall();
...@@ -610,32 +514,22 @@ export class BoxDialer { ...@@ -610,32 +514,22 @@ export class BoxDialer {
}); });
this.callSession.on('failed', () => { this.callSession.on('failed', () => {
// unable to establish the call // unable to establish the call
console.log( console.log('%c incoming faile ', 'font-size: 22px; color: yellow;',);
'%c incoming faile ',
'font-size: 22px; color: yellow;',
);
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: false, bool: false, type: null,
type: null,
}); });
this.stopInnerTimer(); this.stopInnerTimer();
this.onSoundType({type: 'ring', bool: false}); this.onSoundType({type: 'ring', bool: false});
this.closeBxCall(); this.closeBxCall();
this.hangupButtonClick(); this.hangupButtonClick();
this.setGuiPhoneState({ this.setGuiPhoneState({
funcName: 'modalState', funcName: 'modalState', funcParam: {
funcParam: { bool: false, callType: '',
bool: false,
callType: '',
}, },
}); });
}); });
this.callSession.on('connecting', (e) => { this.callSession.on('connecting', (e) => {
console.log( console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e,);
'%c connecting: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('sending', (e) => { this.callSession.on('sending', (e) => {
console.log('%c sending: ', 'font-size: 22px; color: yellow;', e); console.log('%c sending: ', 'font-size: 22px; color: yellow;', e);
...@@ -648,18 +542,10 @@ export class BoxDialer { ...@@ -648,18 +542,10 @@ export class BoxDialer {
console.log('%c newInfo: ', 'font-size: 22px; color: yellow;', e); console.log('%c newInfo: ', 'font-size: 22px; color: yellow;', e);
}); });
this.callSession.on('hold', (e) => { this.callSession.on('hold', (e) => {
console.log( console.log('%c ___________hold: ', 'font-size: 22px; color: yellow;', e,);
'%c ___________hold: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('unhold', (e) => { this.callSession.on('unhold', (e) => {
console.log( console.log('%c ___________unhold: ', 'font-size: 22px; color: yellow;', e,);
'%c ___________unhold: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('muted', (e) => { this.callSession.on('muted', (e) => {
console.log('%c muted: ', 'font-size: 22px; color: yellow;', e); console.log('%c muted: ', 'font-size: 22px; color: yellow;', e);
...@@ -668,11 +554,7 @@ export class BoxDialer { ...@@ -668,11 +554,7 @@ export class BoxDialer {
console.log('%c unmuted: ', 'font-size: 22px; color: yellow;', e); console.log('%c unmuted: ', 'font-size: 22px; color: yellow;', e);
}); });
this.callSession.on('reinvite', (e) => { this.callSession.on('reinvite', (e) => {
console.log( console.log('%c reinvite: ', 'font-size: 22px; color: yellow;', e,);
'%c reinvite: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('update', (e) => { this.callSession.on('update', (e) => {
console.log('%c update: ', 'font-size: 22px; color: yellow;', e); console.log('%c update: ', 'font-size: 22px; color: yellow;', e);
...@@ -681,59 +563,28 @@ export class BoxDialer { ...@@ -681,59 +563,28 @@ export class BoxDialer {
console.log('%c refer: ', 'font-size: 22px; color: yellow;', e); console.log('%c refer: ', 'font-size: 22px; color: yellow;', e);
}); });
this.callSession.on('replaces', (e) => { this.callSession.on('replaces', (e) => {
console.log( console.log('%c replaces: ', 'font-size: 22px; color: yellow;', e,);
'%c replaces: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('sdp', (e) => { this.callSession.on('sdp', (e) => {
console.log('%c sdp: ', 'font-size: 22px; color: yellow;', e); console.log('%c sdp: ', 'font-size: 22px; color: yellow;', e);
}); });
this.callSession.on('icecandidate', (e) => { this.callSession.on('icecandidate', (e) => {
console.log( console.log('%c icecandidate: ', 'font-size: 22px; color: yellow;', e,);
'%c icecandidate: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('getusermediafailed', (e) => { this.callSession.on('getusermediafailed', (e) => {
console.log( console.log('%c getusermediafailed: ', 'font-size: 22px; color: yellow;', e,);
'%c getusermediafailed: ',
'font-size: 22px; color: yellow;',
e,
);
}); });
this.callSession.on('peerconnection: createofferfailed', (e) => { this.callSession.on('peerconnection: createofferfailed', (e) => {
console.log( console.log('%c peerconnection: createofferfailed: ', 'font-size: 22px; color: yellow;', e,);
'%c peerconnection: createofferfailed: ', });
'font-size: 22px; color: yellow;', this.callSession.on('peerconnection: setlocaldescriptionfailed', (e) => {
e, console.log('%c peerconnection: setlocaldescriptionfailed: ', 'font-size: 22px; color: yellow;', e,);
); },);
}); this.callSession.on('peerconnection: setremotedescriptionfailed', (e) => {
this.callSession.on( console.log('%c peerconnection: setremotedescriptionfailed: ', 'font-size: 22px; color: yellow;', e,);
'peerconnection: setlocaldescriptionfailed', },);
(e) => {
console.log(
'%c peerconnection: setlocaldescriptionfailed: ',
'font-size: 22px; color: yellow;',
e,
);
},
);
this.callSession.on(
'peerconnection: setremotedescriptionfailed',
(e) => {
console.log(
'%c peerconnection: setremotedescriptionfailed: ',
'font-size: 22px; color: yellow;',
e,
);
},
);
} }
}); });
this.ua.start(); this.ua.start();
} }
} catch (err) { } catch (err) {
...@@ -780,22 +631,15 @@ export class BoxDialer { ...@@ -780,22 +631,15 @@ export class BoxDialer {
if (window.BX24 && window.BX24.placement) { if (window.BX24 && window.BX24.placement) {
window?.BX24.placement.call('CallCardClose', {}, () => { window?.BX24.placement.call('CallCardClose', {}, () => {
}); });
} else if ( } else if (window.alovoicePhone && window.alovoicePhone.callMethods && window.alovoicePhone.bodClose) {
window.alovoicePhone &&
window.alovoicePhone.callMethods &&
window.alovoicePhone.bodClose
) {
window?.alovoicePhone?.bodClose(); window?.alovoicePhone?.bodClose();
} }
} }
setGuiPhoneState({stateCode, funcName, funcParam}) { setGuiPhoneState({stateCode, funcName, funcParam}) {
console.log('boxdialer_setGuiPhoneState_states: ', {stateCode, funcName, funcParam})
if (window?.alovoice_wsphone && !!stateCode?.length) { if (window?.alovoice_wsphone && !!stateCode?.length) {
console.log( console.log('this_getBxUiState_stateCode', stateCode, this.getBxUiState(stateCode),);
'this_getBxUiState_stateCode',
stateCode,
this.getBxUiState(stateCode),
);
this.callBxMethods({ this.callBxMethods({
bxMethodName: 'CallCardSetUiState', bxMethodName: 'CallCardSetUiState',
bxFuncParams: {uiState: this.getBxUiState(stateCode)}, bxFuncParams: {uiState: this.getBxUiState(stateCode)},
...@@ -803,12 +647,10 @@ export class BoxDialer { ...@@ -803,12 +647,10 @@ export class BoxDialer {
console.log(e, `CallCardSetUiState method done ${e}`); console.log(e, `CallCardSetUiState method done ${e}`);
}, },
}); });
} else if ( } else if (!window?.alovoice_wsphone && !!funcName && this.onSipStateChange[funcName] !== 'undefined' && !!funcParam) {
!window?.alovoice_wsphone && console.log('setGuiPhoneState_for_alovoice_cloud_run_command: ', {
!stateCode?.length && stateCode, funcName, funcParam,
!!funcName && }, !window?.alovoice_wsphone, !!funcName, this.onSipStateChange[funcName] !== 'undefined', !!funcParam)
this.onSipStateChange[funcName] !== 'undefined'
) {
this.onSipStateChange[funcName](funcParam); this.onSipStateChange[funcName](funcParam);
} }
} }
...@@ -826,19 +668,12 @@ export class BoxDialer { ...@@ -826,19 +668,12 @@ export class BoxDialer {
const dialog = new BX.UI.EntitySelector.Dialog({ const dialog = new BX.UI.EntitySelector.Dialog({
// targetNode: button, // targetNode: button,
enableSearch: true, enableSearch: true, multiple: false, context: 'MY_MODULE_CONTEXT', entities: [{
multiple: false,
context: 'MY_MODULE_CONTEXT',
entities: [
{
id: 'user', // пользователи id: 'user', // пользователи
options: {selectFields: ['ufPhoneInner']}, options: {selectFields: ['ufPhoneInner']},
}, }, {
{
id: 'department', // структура компании: выбор только пользователей id: 'department', // структура компании: выбор только пользователей
}, },], events: {
],
events: {
'_Item:onSelect': (event) => { '_Item:onSelect': (event) => {
const {item} = event.getData(); const {item} = event.getData();
const dialog = event.getTarget(); const dialog = event.getTarget();
...@@ -847,11 +682,9 @@ export class BoxDialer { ...@@ -847,11 +682,9 @@ export class BoxDialer {
if (item.customData.get('ufPhoneInner')) { if (item.customData.get('ufPhoneInner')) {
this.transferButtonClick(item.customData.get('ufPhoneInner')); this.transferButtonClick(item.customData.get('ufPhoneInner'));
} }
}, }, get 'Item:onSelect'() {
get 'Item:onSelect'() {
return this['_Item:onSelect']; return this['_Item:onSelect'];
}, }, set 'Item:onSelect'(value) {
set 'Item:onSelect'(value) {
this['_Item:onSelect'] = value; this['_Item:onSelect'] = value;
}, },
}, },
...@@ -860,7 +693,7 @@ export class BoxDialer { ...@@ -860,7 +693,7 @@ export class BoxDialer {
}); });
} }
// call_connected; // call_connected;
setSipStateChangeCallback(callback, funcName) { setSipStateChangeCallback(callback, funcName) {
this.onSipStateChange[funcName] = callback.bind(this); this.onSipStateChange[funcName] = callback.bind(this);
} }
...@@ -882,19 +715,11 @@ export class BoxDialer { ...@@ -882,19 +715,11 @@ export class BoxDialer {
this.callDirection = 'out'; this.callDirection = 'out';
let phoneNumberString = phoneNumber.toString(); let phoneNumberString = phoneNumber.toString();
console.log('boxdialer_initialized_param: ', phoneNumber)
if (phoneNumberString.length) { if (phoneNumberString.length) {
this.onSipStateChange.phoneModal(false); this.onSipStateChange.phoneModal(false);
this.options.extraHeaders = [`X-ALOVOICE-EXTNUM: ${this.extnum}`]; this.options.extraHeaders = [`X-ALOVOICE-EXTNUM: ${this.extnum}`];
this.callSession = this.ua.call( this.callSession = this.ua.call('sip:' + phoneNumberString + '@' + this.sipDomain, this.options,);
'sip:' + phoneNumberString + '@' + this.sipDomain,
this.options,
);
// this.callSession.connection.addEventListener('addstream', (event) => {
// console.log('--== ss OUT STREAM: ');
// this.remoteAudio.srcObject = event.stream;
// this.remoteAudio.play();
// });
} else { } else {
toast.error('Do not correct number', { toast.error('Do not correct number', {
style: { style: {
...@@ -910,15 +735,6 @@ export class BoxDialer { ...@@ -910,15 +735,6 @@ export class BoxDialer {
this.hangupButtonClick(); this.hangupButtonClick();
} }
answerButtonClick() {
this.onSoundType({type: 'ring', bool: false});
this.callSession?.answer(this.options);
this.callSession.connection.addEventListener('addstream', (event) => {
this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play();
});
}
sipSendDTMF(code) { sipSendDTMF(code) {
this.callSession.sendDTMF(code); this.callSession.sendDTMF(code);
} }
...@@ -928,6 +744,7 @@ export class BoxDialer { ...@@ -928,6 +744,7 @@ export class BoxDialer {
} }
muteButtonClick() { muteButtonClick() {
let {audio} = this.callSession.isMuted(); let {audio} = this.callSession.isMuted();
if (audio) { if (audio) {
this.callSession.unmute(); this.callSession.unmute();
...@@ -940,14 +757,24 @@ export class BoxDialer { ...@@ -940,14 +757,24 @@ export class BoxDialer {
this.onSipStateChange['setCallEvents']({callMute: true}); this.onSipStateChange['setCallEvents']({callMute: true});
} }
}
answerButtonClick() {
this.onSoundType({type: 'ring', bool: false});
this.callSession?.answer(this.options);
this.callSession.connection.addEventListener('addstream', (event) => {
this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play();
});
} }
holdButtonClick() { holdButtonClick() {
let {local} = this.callSession.isOnHold(); let {local} = this.callSession.isOnHold();
console.log('local: ', local); console.log('local: ', local);
if (local) { if (local) {
this.callSession.unhold(); this.callSession.unhold();
this.onSipStateChange['setCallEvents']({callHold: false}); this.onSipStateChange['setCallEvents']({callHold: false});
} else { } else {
this.callSession.hold(); this.callSession.hold();
...@@ -963,16 +790,11 @@ export class BoxDialer { ...@@ -963,16 +790,11 @@ export class BoxDialer {
hangupButtonClick() { hangupButtonClick() {
this.onSoundType({type: 'ring', bool: false}); this.onSoundType({type: 'ring', bool: false});
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
bool: false, bool: false, type: null, from: '',
type: null, });
from: '', this.sipBxState = null;
}); console.log('hangupButtonClick========-----------', this.callSession._status,);
console.log( if (this.callSession && this.callSession._status != '8') this.callSession.terminate();
'hangupButtonClick========-----------',
this.callSession._status,
);
if (this.callSession && this.callSession._status != '8')
this.callSession.terminate();
} }
transferButtonClick(number) { transferButtonClick(number) {
......
src/lib/sizeContext.js 0 → 100644
View file @ 4094d118
export const sizePixelPixelSizeFunc = (value, defaultValue) => {
// switch (value) {
// case 33: return {fontSize: defaultValue + 1}
// case 66: return {fontSize: defaultValue + 2}
// case 100: return {fontSize: defaultValue + 3}
// default: return {fontSize: defaultValue}
// }
switch (value) {
case 25: return {fontSize: defaultValue + 2}
case 50: return {fontSize: defaultValue + 3}
case 75: return {fontSize: defaultValue + 4}
case 100: return {fontSize: defaultValue + 5}
default: return {fontSize: defaultValue}
}
}
src/root/index.jsx
View file @ 4094d118
/** @format */ /** @format */
import React, {useContext, useEffect, useState} from 'react'; import React, { useContext, useEffect, useState } from 'react';
import packageJson from '../../package.json'; import packageJson from '../../package.json';
import DefaultWidjetUi from '../components/DefaultWidjetUi'; import DefaultWidjetUi from '../components/DefaultWidjetUi';
import ModalPhoneNumpad from '../components/ModalPhoneNumpad'; import ModalPhoneNumpad from '../components/ModalPhoneNumpad';
...@@ -8,14 +8,12 @@ import Modal from '../components/Modal'; ...@@ -8,14 +8,12 @@ import Modal from '../components/Modal';
import BxMiniWidjetUi from '../components/BxMiniWidjetUi'; import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
import SecondNotifSip from '../components/SecondNotifSip'; import SecondNotifSip from '../components/SecondNotifSip';
import InnerCaller from '../components/InnerCaller'; import InnerCaller from '../components/InnerCaller';
import {useConfigHoldMute} from "../storage" import { useConfigHoldMute } from "../storage"
import SettingComponent from "../components/setting" import SettingComponent from "../components/setting"
import {useColorConfig} from "../storage/globalColorConfig" import { useColorConfig } from "../storage/globalColorConfig"
// import { contextModalEventProperty } from '../context/modalEventProperty';
const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store) const useColorConfigStore = useColorConfig((store) => store)
const configHoldMute = useConfigHoldMute((state) => state) const configHoldMute = useConfigHoldMute((state) => state)
const [phoneModal, setPhoneModal] = useState(false); const [phoneModal, setPhoneModal] = useState(false);
...@@ -26,9 +24,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -26,9 +24,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
// const [secondLine, setSecondLine] = useState(false); // const [secondLine, setSecondLine] = useState(false);
const [innerTimer, setInnerTimer] = useState(null); const [innerTimer, setInnerTimer] = useState(null);
const [innerCallerModal, setInnerCallerModal] = useState({ const [innerCallerModal, setInnerCallerModal] = useState({
bool: false, bool: false, type: null, from: '',
type: null,
from: '',
}); });
useEffect(() => { useEffect(() => {
...@@ -39,7 +35,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -39,7 +35,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
} }
}, [secondLine]); }, [secondLine]);
useEffect(()=> { useEffect(() => {
boxDialer.setGlobalHistoryData(useColorConfigStore.state) boxDialer.setGlobalHistoryData(useColorConfigStore.state)
}, [useColorConfigStore.state]) }, [useColorConfigStore.state])
...@@ -51,18 +47,12 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -51,18 +47,12 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal'); boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer'); boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents'); boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
boxDialer.setSipStateChangeCallback( boxDialer.setSipStateChangeCallback(setInnerCallerModal, 'innerCallerModal',);
setInnerCallerModal,
'innerCallerModal',
);
if (boxDialer.isUaRunning()) console.log('UA is running! in other tab'); if (boxDialer.isUaRunning()) console.log('UA is running! in other tab'); else boxDialer.sipRegister(wsphonedata);
else boxDialer.sipRegister(wsphonedata);
setTimeout(function waitUaRegisterLost() { setTimeout(function waitUaRegisterLost() {
if (boxDialer.isUaRunning() || boxDialer.isRestarting) if (boxDialer.isUaRunning() || boxDialer.isRestarting) setTimeout(waitUaRegisterLost, 10); else boxDialer.sipRegister(wsphonedata);
setTimeout(waitUaRegisterLost, 10);
else boxDialer.sipRegister(wsphonedata);
}, 10); }, 10);
} }
}, []); }, []);
...@@ -94,15 +84,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -94,15 +84,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
// useEffect(()=> { // useEffect(()=> {
// console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool) // console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool)
//
// }, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond]) // }, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond])
//
const selectWidjetType = (type) => { const selectWidjetType = (type) => {
switch (type) { switch (type) {
case 'bxmini': case 'bxmini':
return ( return (<BxMiniWidjetUi
<BxMiniWidjetUi
widjetState={dynamicValue} widjetState={dynamicValue}
phoneNumber={wsphonedata?.number} phoneNumber={wsphonedata?.number}
reason={wsphonedata?.reason} reason={wsphonedata?.reason}
...@@ -112,11 +100,9 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -112,11 +100,9 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
onClick={() => { onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true); phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}} }}
/> />);
);
default: default:
return ( return (<DefaultWidjetUi
<DefaultWidjetUi
widjetState={dynamicValue} widjetState={dynamicValue}
phoneNumber={wsphonedata?.number} phoneNumber={wsphonedata?.number}
reason={wsphonedata?.reason} reason={wsphonedata?.reason}
...@@ -126,17 +112,12 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -126,17 +112,12 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
onClick={() => { onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true); phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}} }}
/> />);
);
} }
}; };
console.log( // console.log('wsphonedata_all_data: ', wsphonedata?.position, wsphonedata?.number, wsphonedata,);
'wsphonedata_all_data: ',
wsphonedata?.position,
wsphonedata?.number,
wsphonedata,
);
window.onbeforeunload = () => { window.onbeforeunload = () => {
if (typeof BX !== 'undefined') { if (typeof BX !== 'undefined') {
...@@ -145,17 +126,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -145,17 +126,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
localStorage.removeItem('mycall'); localStorage.removeItem('mycall');
localStorage.removeItem(BX.bitrix_sessid() + '_mycall'); localStorage.removeItem(BX.bitrix_sessid() + '_mycall');
console.log( console.log('--==== Checking removed Items: ', localStorage.getItem('mycall'), localStorage.getItem(BX.bitrix_sessid() + '_mycall'),);
'--==== Checking removed Items: ',
localStorage.getItem('mycall'),
localStorage.getItem(BX.bitrix_sessid() + '_mycall'),
);
} }
}; };
if (!wsphonedata?.number && !wsphonedata?.position) return; if (!wsphonedata?.number && !wsphonedata?.position) return;
return ( return (<>
<>
{selectWidjetType(wsphonedata.variant)} {selectWidjetType(wsphonedata.variant)}
<SettingComponent <SettingComponent
settingHidden={settingHidden && phoneModal ? true : false} settingHidden={settingHidden && phoneModal ? true : false}
...@@ -178,14 +155,6 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -178,14 +155,6 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
extnums={wsphonedata.extnums} extnums={wsphonedata.extnums}
/> />
{/*
incoming
outgoing
connectingIncoming
connectingOutgoing
connected
*/}
<Modal <Modal
className='tailwindGlobalCss' className='tailwindGlobalCss'
hidden={modalState.bool} hidden={modalState.bool}
...@@ -193,11 +162,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -193,11 +162,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
// hidden={true} // hidden={true}
// callType={'incoming'} // callType={'incoming'}
hangupButton={hangupButton} hangupButton={hangupButton}
phoneNumber={ phoneNumber={modalState.callType === 'outcoming' ? 'inputValue' : modalState.callFromName}
modalState.callType === 'outcoming'
? 'inputValue'
: modalState.callFromName
}
/> />
<InnerCaller <InnerCaller
...@@ -207,9 +172,8 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -207,9 +172,8 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
innerTimer={innerTimer} innerTimer={innerTimer}
/> />
<SecondNotifSip secondLine={secondLine}/> <SecondNotifSip secondLine={secondLine} />
</> </>);
);
}; };
export default Root; export default Root;
......
v.php 0 → 100644
View file @ 4094d118
<?php
$pjs = file_get_contents("package.json");
$arPack = json_decode($pjs,1);
if(!empty($_REQUEST["v"]) && $_REQUEST["v"] != $arPack["version"]){
$prodPath = "prod/".$arPack["version"].'/';
$arFiles = [];
foreach(scandir($prodPath) as $file){
if(strlen($file)>3){
$arFiles[] = $file;
}
}
echo json_encode(["version"=>$arPack["version"], "path"=>$prodPath, "files"=>$arFiles]);
}
die();
// echo (!empty($arPack["version"])) ? $arPack["version"] : '';
// preg_match("/\"version\"\:\s\"([\d\.]{1,}[\d\.]{1,}[\d\.]{1,})\"/",$pjs,$mtch);
// echo (!empty($mtch[1])) ? $mtch[1] : "";
?>
\ No newline at end of file
webpack.config.js
View file @ 4094d118
...@@ -2,17 +2,19 @@ ...@@ -2,17 +2,19 @@
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
var PACKAGE = require('./package.json');
const chalk = require('chalk');
//env.production //env.production
module.exports = (env) => { module.exports = (env) => {
console.log('TYPE: ', env?.production ? 'production' : 'development'); console.log(chalk.white.bgYellow.bold('TYPE: ', env?.production ? 'production' : 'development'));
console.log(chalk.white.bgYellow.bold('PACKAGE_VERSION: ', PACKAGE.version))
return { return {
entry: path.join(__dirname, 'src', 'index.js'), entry: path.join(__dirname, 'src', 'index.js'),
mode: 'development', mode: 'development',
output: { output: {
path: env?.production path: env?.production
? path.resolve(__dirname, 'prod') ? path.resolve(__dirname, 'prod', `${PACKAGE.version}`)
: path.resolve(__dirname, 'dist'), : path.resolve(__dirname, 'dist'),
}, },
// devServer: { // devServer: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023