Commit 4094d118 authored by Muhammadali's avatar Muhammadali

MAIN

parents 90e1b5e1 9567af85
File added
File added
11111
\ No newline at end of file
{
"name": "boxdialer",
"version": "4.8.63",
"version": "4.8.84",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "boxdialer",
"version": "4.8.63",
"version": "4.8.84",
"license": "ISC",
"dependencies": {
"@emotion/react": "^11.11.1",
......@@ -24,6 +24,7 @@
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"styled-components": "^5.3.5",
"uuid": "^9.0.1",
"zustand": "^4.4.6"
},
"devDependencies": {
......@@ -32,6 +33,7 @@
"@babel/preset-react": "^7.22.5",
"autoprefixer": "^9.8.8",
"babel-loader": "^9.1.3",
"chalk": "^4.1.2",
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3",
......@@ -67,6 +69,38 @@
"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": {
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
......@@ -480,6 +514,38 @@
"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": {
"version": "7.22.10",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz",
......@@ -3347,35 +3413,64 @@
]
},
"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==",
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=4"
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/chalk/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==",
"node_modules/chalk/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"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": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": {
"has-flag": "^3.0.0"
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=4"
"node": ">=8"
}
},
"node_modules/chokidar": {
......@@ -9693,6 +9788,15 @@
"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": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
......@@ -10164,10 +10268,13 @@
}
},
"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,
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
"funding": [
"https://github.com/sponsors/broofa",
"https://github.com/sponsors/ctavan"
],
"bin": {
"uuid": "dist/bin/uuid"
}
......
{
"name": "boxdialer",
"version": "4.8.65",
"version": "4.8.85",
"description": "",
"main": "src/boxDialer.js",
"scripts": {
"dev": "webpack serve --mode=development",
"build:dev": "webpack --env=development --watch ",
"build:dev": "webpack --env=development --watch",
"build:prod": "webpack --env=production"
},
"keywords": [],
......@@ -27,6 +27,7 @@
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"styled-components": "^5.3.5",
"uuid": "^9.0.1",
"zustand": "^4.4.6"
},
"devDependencies": {
......@@ -35,6 +36,7 @@
"@babel/preset-react": "^7.22.5",
"autoprefixer": "^9.8.8",
"babel-loader": "^9.1.3",
"chalk": "^4.1.2",
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3",
......
<!-- @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>
This diff is collapsed.
"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
<!-- @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>
This diff is collapsed.
"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
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -4,6 +4,7 @@ import React from 'react';
import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
import TimerUi from '../TimerUi';
import { Text, useTranslator } from '@eo-locale/react';
import {useColorConfig} from "../../storage/globalColorConfig"
// import {useConfig} from "../../storage"
const BxMiniWidjetUi = ({
widjetState,
......@@ -15,6 +16,7 @@ const BxMiniWidjetUi = ({
position,
}) => {
const translator = useTranslator();
const useColorConfigStore = useColorConfig((store) => store)
// const {state, setState} = useConfig((state) => state)
const colorTypeFunc = ({ widjetState, reason }) => {
switch (`${widjetState}_${reason}`) {
......@@ -36,12 +38,14 @@ const BxMiniWidjetUi = ({
break;
}
};
// useColorConfigStore.state.sizePixel
return (
<BxMiniWidjetUiStyle
// status={widjetState || ''}
status={colorTypeFunc({ reason, widjetState })}
onClick={onClick}
sizePixel={useColorConfigStore.state.sizePixel}
position={position}>
<div className='left'>
<p className='title'>{phoneNumber}</p>
......@@ -58,7 +62,9 @@ const BxMiniWidjetUi = ({
<div className='bottom'>
<BxMiniWidjetUiStyle.StatusLine
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>
</div>
</BxMiniWidjetUiStyle>
......
......@@ -3,6 +3,7 @@
import styled from 'styled-components';
import CallIcon from '@mui/icons-material/Dialpad';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import {sizePixelPixelSizeFunc} from "../../lib/sizeContext"
const colorTypeFunc = (type) => {
switch (type) {
......@@ -60,7 +61,7 @@ const BxMiniWidjetUiStyle = styled.div`
.right {
}
.title {
font-size: 20px;
${({sizePixel})=> sizePixelPixelSizeFunc(sizePixel, 20) }
font-weight: 600;
margin: 0;
padding: 0;
......@@ -81,7 +82,7 @@ BxMiniWidjetUiStyle.ReasonTest = styled.div`
border-radius: 10px;
padding: 0 1px;
margin: 0 5px;
font-size: 12px;
${({sizePixel})=> sizePixelPixelSizeFunc(sizePixel, 12) }
${({ reason }) =>
reason == 'free'
......
......@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react';
import Block, { Input, ModalDropDown } from './style.js';
import {useColorConfig} from "../../storage/globalColorConfig"
const CallHistoryInputDropdown = ({
inputValue,
......@@ -12,7 +13,7 @@ const CallHistoryInputDropdown = ({
}) => {
const [modal, setModal] = useState(false);
var elem = document.getElementById('data');
const useColorConfigStore = useColorConfig((store) => store)
const selectFuncInset = (e) => {
selectFunc(e);
setModal(false);
......@@ -42,7 +43,6 @@ const CallHistoryInputDropdown = ({
.scrollTo(document.getElementById('numbersDiv').scrollWidth, 0);
}, [inputValue]);
console.log('input_modal: ', modal, numberSelectHistory);
document.querySelector('body').addEventListener('click', function (e) {
if (modal) setModal(false);
});
......@@ -59,7 +59,7 @@ const CallHistoryInputDropdown = ({
</Input>
{Boolean(call_history.length) && (
<>
<ModalDropDown visiblevalue={modal}>
<ModalDropDown visiblevalue={modal} switchAnim={useColorConfigStore.state.switchAnim} >
<ModalDropDown.Inset id='data'>
{call_history.reverse().map((value, index) => (
<ModalDropDown.Item
......@@ -74,11 +74,6 @@ const CallHistoryInputDropdown = ({
))}
</ModalDropDown.Inset>
</ModalDropDown>
{/* <ModalDropDown.FullWindow
id='full-size'
visiblevalue={modal}
onClick={() => setModal(!modal)}
/> */}
</>
)}
</Block>
......
......@@ -81,7 +81,7 @@ const ModalDropDown = styled.div`
background-color: #c9d5d9;
border-radius: 20px;
padding: 15px;
transition: 0.1s;
transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' };
z-index: 15;
bottom: 60px;
left: 50%;
......
import React from 'react'
import TableBlock from "./style"
import { v4 as uuidv4 } from 'uuid';
// id, title, inputTag, type: 'row' || 'column'
const MiniTable = ({
data,
gap = '5px'
}) => {
}) => {
return (<TableBlock gap={gap}>
{data?.map(({id, title, inputTag, type, child, gap}) => (
<TableBlock.Row id={id} gap={gap}>
{data?.map(({ id, title, inputTag, type, child, gap }) => (
<TableBlock.Row id={`${id}`} gap={gap} key={`boxdialer_min iTable_${id}`}>
<TableBlock.RowInset blockType={type}>
<p className={'title'}>{title}</p>
<div className={'inputArea'}>{inputTag}</div>
......
......@@ -9,8 +9,13 @@ const TableBlock = styled.div`
`
TableBlock.Row = styled.div`
width: 100%;
border-bottom: 1px solid #333;
//border-bottom: 1px solid #333;
background-color: #d2d2d26b;
box-sizing: border-box;
display: flex;
border-radius: 10px;
padding: 5px;
flex-direction: column;
gap: ${({gap})=> gap ? gap : '3px'};
.child{
......@@ -25,7 +30,7 @@ TableBlock.RowInset = styled.div`
}}
.title {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
font-size: 14px;
font-weight: initial;
margin: 0;
padding: 0;
......
/** @format */
import React, { useEffect, useState } from 'react';
import MainBlock, { ModalContainer } from './style';
import React, {useEffect, useState} from 'react';
import MainBlock, {ModalContainer} from './style';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
import CallEndIcon from '@mui/icons-material/CallEnd';
import MicIcon from '@mui/icons-material/Mic';
......@@ -13,9 +13,8 @@ import DialpadIcon from '@mui/icons-material/Dialpad';
import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad';
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 configHoldMute = useConfigHoldMute((state) => state)
......@@ -24,7 +23,6 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
console.log('callType_modal: ', callType)
useEffect(() => {
setModalHidden(hidden);
......@@ -46,14 +44,14 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
if (!modalHidden) return;
const selectModalType = (type) => {
console.log('selectModalType_inset_component: ', type)
switch (type) {
case 'incoming':
return (
<ModalContainer.Footer rollUp={rollUp}>
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
<CallEndIcon/>
ЗАКРЫТЬ
</button>
<button
......@@ -61,66 +59,50 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>
);
</ModalContainer.Footer>);
case 'outgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>
);
</ModalContainer.Footer>);
case 'connectingIncoming':
return (
<ModalContainer.Footer rollUp={rollUp}>
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
<CallEndIcon/>
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
</ModalContainer.Footer>);
case 'connectingOutgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
<CallEndIcon/>
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
</ModalContainer.Footer>);
case 'connected':
return (
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
return (<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'>
<div onClick={() => boxDialer.holdButtonClick()}>
{configHoldMute?.state?.callHold ? (
<PlayArrowIcon style={{ color: '#fff' }} />
) : (
<PauseIcon style={{ color: '#fff' }} />
)}
{configHoldMute?.state?.callHold ? (<PlayArrowIcon style={{color: '#fff'}}/>) : (
<PauseIcon style={{color: '#fff'}}/>)}
</div>
<div onClick={() => boxDialer.muteButtonClick()}>
{configHoldMute?.state?.callMute ? (
<MicOffIcon style={{ color: '#fff' }} />
) : (
<MicIcon style={{ color: '#fff' }} />
)}
{configHoldMute?.state?.callMute ? (<MicOffIcon style={{color: '#fff'}}/>) : (
<MicIcon style={{color: '#fff'}}/>)}
</div>
<div
className='transferAreaIcon'
onClick={() => {
window.BX
? boxDialer.selectUser()
: setTransferModel(!transferModel);
window.BX ? boxDialer.selectUser() : setTransferModel(!transferModel);
}}>
<SendToMobileIcon style={{ color: '#fff' }} />
<SendToMobileIcon style={{color: '#fff'}}/>
<CallCardDropDown
hiddenState={transferModel}
selectUserFunc={selectUserFunc}
......@@ -128,32 +110,30 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
</div>
<div className={'openNumpadAreaIcon'}>
<DialpadIcon
style={{ color: '#fff' }}
style={{color: '#fff'}}
onClick={() => openNumpad()}
/>
<ModalNumpad hidden={numpadModal} />
<ModalNumpad hidden={numpadModal}/>
</div>
</div>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
<CallEndIcon/>
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
</ModalContainer.Footer>);
default:
return (
<ModalContainer.Footer rollUp={rollUp}>
return (<ModalContainer.Footer rollUp={rollUp}>
Do not fount event
</ModalContainer.Footer>
);
</ModalContainer.Footer>);
}
};
return (
<MainBlock
hidden={modalHidden || modalHidden}
console.log('selectModalType_inset_component modalHidden value', modalHidden)
return (<MainBlock
hidden={true}
rollUp={rollUp}
onClick={(e) => e.stopPropagation()}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
......@@ -167,16 +147,11 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
Свернуть
</p>
</ModalContainer.Top>
<hr />
<hr/>
<ModalContainer.Head rollUp={rollUp}>
<div className='round'></div>
<p className='name'>No name</p>
</ModalContainer.Head>
{/* <hr />
<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
<hr />
<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
<hr /> */}
{selectModalType(callType)}
</ModalContainer>
<div className='rollUpVesion'>
......@@ -190,11 +165,10 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
ЗАКРЫТЬ
</button>
<button className='rollUpUn' onClick={() => setRollUp(false)}>
<VerticalAlignTopIcon />
<VerticalAlignTopIcon/>
</button>
</div>
</MainBlock>
);
</MainBlock>);
};
export default Modal;
......@@ -3,9 +3,10 @@
import React, { useState } from 'react';
import Block, { NumberButton } from './style';
import numbers from '../../lib/numbers';
import {useColorConfig} from "../../storage/globalColorConfig"
const ModalNumpad = ({ hidden }) => {
const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store)
const [dtmfValue, setDtmfValue] = useState('');
const selectNumberType = (value) => {
boxDialer.sipSendDTMF(value);
......@@ -18,7 +19,7 @@ const ModalNumpad = ({ hidden }) => {
};
// 11
return (
<Block visiblevalue={hidden}>
<Block visiblevalue={hidden} switchAnim={useColorConfigStore.state.switchAnim}>
<Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea>
{numbers?.map((mapItem) => (
<NumberButton
......
......@@ -10,7 +10,7 @@ const Block = styled.div`
bottom: 50px;
border-radius: 10px;
left: 50%;
transition: 0.3s;
transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' };
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px;
......
This diff is collapsed.
......@@ -3,6 +3,7 @@
import styled from 'styled-components';
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
import { sizePixelPixelSizeFunc } from '../../lib/sizeContext';
const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0 0 20px #00000047;
......@@ -14,7 +15,8 @@ const ModalPhoneNumpadStyle = styled.div`
width: 230px;
position: fixed;
bottom: 120px;
transition: 0.2s !important;
transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.2s' : '0s') : '0.2s'};
z-index: 9999;
${({ hiddenValue, position, variant }) =>
hiddenValue
......@@ -26,7 +28,7 @@ const ModalPhoneNumpadStyle = styled.div`
grid-template-rows: 40px 1fr;
grid-gap: 15px;
cursor: default;
.settingIcon{
.settingIcon {
position: absolute;
font-size: 11px;
cursor: pointer;
......@@ -101,7 +103,7 @@ const NumberButton = styled.div`
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
${({ sizeContext }) => sizePixelPixelSizeFunc(sizeContext, 22)}
cursor: pointer;
height: 33px;
position: relative;
......@@ -111,7 +113,9 @@ const NumberButton = styled.div`
? 'orange'
: status === 'connected' && '#a0c13d'
: '#0000007d'};
transition: 0.3s;
transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined' ? (switchAnim ? '0.3s' : '0s') : '0.3s'};
.callIcon {
color: #0000007d;
}
......@@ -166,10 +170,6 @@ NumberButton.CallButton = styled.div`
display: flex;
align-items: center;
.icon {
/* margin: 0 auto;
padding: 0;
color: #000;
transition: 0.2s; */
margin: 0 auto;
border: 4px solid transparent;
width: 8px;
......@@ -210,7 +210,9 @@ NumberButton.CallButtonModal = styled.div`
padding: 3px 3px 15px 3px;
border-top-left-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);
${({ visiblevalue }) =>
visiblevalue
......@@ -235,8 +237,12 @@ NumberButton.CallButtonModalInset = styled.div`
.num_item {
text-wrap: nowrap;
color: #000;
transition: 0.2s;
/* padding: 7px 4px; */
transition: ${({ switchAnim }) =>
typeof switchAnim !== 'undefined'
? switchAnim
? '0.2s'
: '0s'
: '0.2s'};
padding: 5px 10px;
font-size: 14px;
margin: 2px 0;
......
import React, {useEffect, useState} from 'react'
import React, { useEffect, useState } from 'react'
import SettingMainStyle from './style'
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import BuildIcon from '@mui/icons-material/Build';
import FixComponent from "../settingComponents/fixComponent"
import StyleComponent from "../settingComponents/styleComponent"
import { useColorConfig } from "../../storage/globalColorConfig"
import { v4 as uuidv4 } from 'uuid';
const SettingComponent = ({
settingHidden, variant, position
}) => {
}) => {
const [settingPage, setSettingPage] = useState(0)
var elem = document.getElementById('data');
const elem = document.getElementById('data');
const useColorConfigStore = useColorConfig((store) => store)
const allData = [
{
id: 0,
title: 'Test-2',
icon: <BuildIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 1,
id: uuidv4(),
title: 'Test-1',
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 = ({
setSettingPage(count)
}
console.log('elem: ', elem)
useEffect(() => {
if(elem){
elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage,behavior: 'smooth'})
if (elem) {
elem.scrollTo({ top: elem.scrollHeight / allData.length * settingPage, behavior: typeof useColorConfigStore.state.switchAnim !== 'undefined' ? useColorConfigStore.state.switchAnim ? 'smooth' : 'auto' : 'smooth' })
}
}, [settingPage]);
......@@ -46,7 +57,7 @@ const SettingComponent = ({
>
<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}
<div className={'backgroundFilter'}></div>
</div>)
......@@ -54,7 +65,7 @@ const SettingComponent = ({
</SettingMainStyle.LeftMenu>
<SettingMainStyle.RightSelectInfo id={'data'}>
{
allData.map(({content, id})=> content)
allData?.map(({ Content, id }) => <div key={id}><Content /></div>)
}
</SettingMainStyle.RightSelectInfo>
......
......@@ -4,14 +4,13 @@ import Switch from '@mui/material/Switch';
import MiniTable from "../../MiniTable"
import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from '@mui/material/Slider';
import { v4 as uuidv4 } from 'uuid'
const FixComponent = () => {
const useColorConfigStore = useColorConfig((store) => store)
console.log('useColorConfig client: ', useColorConfigStore.state.autoAnswer)
const marks = [
{
value: 1,
......@@ -28,8 +27,9 @@ const FixComponent = () => {
];
const tableData = [{
id: '1',
const tableData = [
{
id: uuidv4(),
title: 'Auto answer',
type: 'row',
child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
......@@ -37,9 +37,9 @@ const FixComponent = () => {
aria-label="Restricted values"
defaultValue={40}
step={null}
value={useColorConfigStore.state.autoAnswerSecond}
value={useColorConfigStore.state.autoAnswerSecond || true}
marks={marks}
onChange={(e)=> useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
onChange={(e) => useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
/>
</div>,
inputTag: <Switch
......@@ -49,7 +49,8 @@ const FixComponent = () => {
return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
}}
/>,
}]
}
]
return (<Block>
{/*<p>Text</p>*/}
......
import styled from 'styled-components'
const Block = styled.div`
margin: 5px;
`
export default Block
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
import styled from 'styled-components'
const StyleBlock = styled.div`
`
export default StyleBlock
This diff is collapsed.
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}
}
}
/** @format */
import React, {useContext, useEffect, useState} from 'react';
import React, { useContext, useEffect, useState } from 'react';
import packageJson from '../../package.json';
import DefaultWidjetUi from '../components/DefaultWidjetUi';
import ModalPhoneNumpad from '../components/ModalPhoneNumpad';
......@@ -8,14 +8,12 @@ import Modal from '../components/Modal';
import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
import SecondNotifSip from '../components/SecondNotifSip';
import InnerCaller from '../components/InnerCaller';
import {useConfigHoldMute} from "../storage"
import { useConfigHoldMute } from "../storage"
import SettingComponent from "../components/setting"
import {useColorConfig} from "../storage/globalColorConfig"
// import { contextModalEventProperty } from '../context/modalEventProperty';
import { useColorConfig } from "../storage/globalColorConfig"
const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
const boxDialer = window.BoxDialer;
const useColorConfigStore = useColorConfig((store) => store)
const configHoldMute = useConfigHoldMute((state) => state)
const [phoneModal, setPhoneModal] = useState(false);
......@@ -26,9 +24,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
// const [secondLine, setSecondLine] = useState(false);
const [innerTimer, setInnerTimer] = useState(null);
const [innerCallerModal, setInnerCallerModal] = useState({
bool: false,
type: null,
from: '',
bool: false, type: null, from: '',
});
useEffect(() => {
......@@ -39,7 +35,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
}
}, [secondLine]);
useEffect(()=> {
useEffect(() => {
boxDialer.setGlobalHistoryData(useColorConfigStore.state)
}, [useColorConfigStore.state])
......@@ -51,18 +47,12 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
boxDialer.setSipStateChangeCallback(
setInnerCallerModal,
'innerCallerModal',
);
boxDialer.setSipStateChangeCallback(setInnerCallerModal, 'innerCallerModal',);
if (boxDialer.isUaRunning()) console.log('UA is running! in other tab');
else boxDialer.sipRegister(wsphonedata);
if (boxDialer.isUaRunning()) console.log('UA is running! in other tab'); else boxDialer.sipRegister(wsphonedata);
setTimeout(function waitUaRegisterLost() {
if (boxDialer.isUaRunning() || boxDialer.isRestarting)
setTimeout(waitUaRegisterLost, 10);
else boxDialer.sipRegister(wsphonedata);
if (boxDialer.isUaRunning() || boxDialer.isRestarting) setTimeout(waitUaRegisterLost, 10); else boxDialer.sipRegister(wsphonedata);
}, 10);
}
}, []);
......@@ -94,15 +84,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
// useEffect(()=> {
// console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool)
//
// }, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond])
//
const selectWidjetType = (type) => {
switch (type) {
case 'bxmini':
return (
<BxMiniWidjetUi
return (<BxMiniWidjetUi
widjetState={dynamicValue}
phoneNumber={wsphonedata?.number}
reason={wsphonedata?.reason}
......@@ -112,11 +100,9 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}}
/>
);
/>);
default:
return (
<DefaultWidjetUi
return (<DefaultWidjetUi
widjetState={dynamicValue}
phoneNumber={wsphonedata?.number}
reason={wsphonedata?.reason}
......@@ -126,17 +112,12 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}}
/>
);
/>);
}
};
console.log(
'wsphonedata_all_data: ',
wsphonedata?.position,
wsphonedata?.number,
wsphonedata,
);
// console.log('wsphonedata_all_data: ', wsphonedata?.position, wsphonedata?.number, wsphonedata,);
window.onbeforeunload = () => {
if (typeof BX !== 'undefined') {
......@@ -145,17 +126,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
localStorage.removeItem('mycall');
localStorage.removeItem(BX.bitrix_sessid() + '_mycall');
console.log(
'--==== Checking removed Items: ',
localStorage.getItem('mycall'),
localStorage.getItem(BX.bitrix_sessid() + '_mycall'),
);
console.log('--==== Checking removed Items: ', localStorage.getItem('mycall'), localStorage.getItem(BX.bitrix_sessid() + '_mycall'),);
}
};
if (!wsphonedata?.number && !wsphonedata?.position) return;
return (
<>
return (<>
{selectWidjetType(wsphonedata.variant)}
<SettingComponent
settingHidden={settingHidden && phoneModal ? true : false}
......@@ -178,14 +155,6 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
extnums={wsphonedata.extnums}
/>
{/*
incoming
outgoing
connectingIncoming
connectingOutgoing
connected
*/}
<Modal
className='tailwindGlobalCss'
hidden={modalState.bool}
......@@ -193,11 +162,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
// hidden={true}
// callType={'incoming'}
hangupButton={hangupButton}
phoneNumber={
modalState.callType === 'outcoming'
? 'inputValue'
: modalState.callFromName
}
phoneNumber={modalState.callType === 'outcoming' ? 'inputValue' : modalState.callFromName}
/>
<InnerCaller
......@@ -207,9 +172,8 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
innerTimer={innerTimer}
/>
<SecondNotifSip secondLine={secondLine}/>
</>
);
<SecondNotifSip secondLine={secondLine} />
</>);
};
export default Root;
......
<?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
......@@ -2,17 +2,19 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var PACKAGE = require('./package.json');
const chalk = require('chalk');
//env.production
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 {
entry: path.join(__dirname, 'src', 'index.js'),
mode: 'development',
output: {
path: env?.production
? path.resolve(__dirname, 'prod')
? path.resolve(__dirname, 'prod', `${PACKAGE.version}`)
: path.resolve(__dirname, 'dist'),
},
// 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