Skip to content

B
BoxDialer
Commit 01b0ebfd authored by Muhammadali's avatar Muhammadali
Browse files
Options

update-

parent 7b1d3bf6
Hide whitespace changes
Inline Side-by-side
Showing with 730 additions and 298 deletions
src/components/MiniTable/index.jsx 0 → 100644
View file @ 01b0ebfd
import React from 'react'
import TableBlock from "./style"
// 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}>
<TableBlock.RowInset blockType={type}>
<p className={'title'}>{title}</p>
<div className={'inputArea'}>{inputTag}</div>
</TableBlock.RowInset>
{
child && <div className={'child'}>{child}</div>
}
</TableBlock.Row>
))}
</TableBlock>)
}
export default MiniTable
src/components/MiniTable/style.js 0 → 100644
View file @ 01b0ebfd
import styled from 'styled-components'
const TableBlock = styled.div`
display: flex;
flex-direction: column;
gap: ${({gap}) => gap ? gap : '3px'};
width: 100%;
`
TableBlock.Row = styled.div`
width: 100%;
border-bottom: 1px solid #333;
display: flex;
flex-direction: column;
gap: ${({gap})=> gap ? gap : '3px'};
.child{
width: 100%;
}
`
TableBlock.RowInset = styled.div`
${({blockType}) => blockType === 'row' ? {
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '5px'
} : {
display: 'flex', flexDirection: 'column'
}}
.title {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: initial;
margin: 0;
padding: 0;
}
.inputArea {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
box-sizing: border-box;
}
`
export default TableBlock
src/components/Modal/index.jsx
View file @ 01b0ebfd
...@@ -24,6 +24,7 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { ...@@ -24,6 +24,7 @@ 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);
......
src/components/ModalPhoneNumpad/index.jsx
View file @ 01b0ebfd
/** @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';
const ModalPhoneNumpad = ({ const ModalPhoneNumpad = ({
phoneModal, phoneModal,
modalState, modalState,
reasons, reasons,
reason, reason,
onSetDnd, onSetDnd,
dynamicValue, dynamicValue,
position, position,
variant, variant,
extnums, extnums,
}) => { setSettingHidden,
const boxDialer = window.BoxDialer; settingHidden
}) => {
const boxDialer = window.BoxDialer;
const [inputValue, setInputValue] = useState('');
const [call_history, setCall_history] = useState([]);
const [numberSelectHistory, setNumberSelectHistory] = useState(0);
const [exNum, setExNum] = useState();
const translator = useTranslator();
const [inputValue, setInputValue] = useState(''); useEffect(() => {
const [call_history, setCall_history] = useState([]); let currentCalls = localStorage.getItem('callhistory') ? JSON.parse(localStorage.getItem('callhistory')) : false;
const [numberSelectHistory, setNumberSelectHistory] = useState(0); if (currentCalls) {
const [exNum, setExNum] = useState(); setCall_history(currentCalls);
const translator = useTranslator(); }
}, [localStorage.getItem('callhistory'), inputValue]);
useEffect(() => { useEffect(() => {
let currentCalls = localStorage.getItem('callhistory') if (!modalState.bool) setInputValue('');
? JSON.parse(localStorage.getItem('callhistory')) }, [modalState.bool]);
: false;
if (currentCalls) {
setCall_history(currentCalls);
}
}, [localStorage.getItem('callhistory'), inputValue]);
useEffect(() => { useEffect(() => {
if (!modalState.bool) setInputValue(''); if (!phoneModal) setSettingHidden(false)
}, [modalState.bool]); }, [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 ( if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) {
value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length if (from === 'input') return setInputValue(value);
) { if (from === 'button') setInputValue(inputValue + value);
if (from === 'input') return setInputValue(value); }
if (from === 'button') setInputValue(inputValue + value);
}
break; break;
case 'delete': case 'delete':
if (from === 'button') { if (from === 'button') {
setInputValue( setInputValue(inputValue
inputValue .split('')
.split('') .slice(0, inputValue.length - 1)
.slice(0, inputValue.length - 1) .join(''),);
.join(''), }
); if (from === 'input') {
} setInputValue(value);
if (from === 'input') { }
setInputValue(value); break;
} default:
break; break;
default: }
break; };
}
};
const history = ({ type }) => { const history = ({type}) => {
if (phoneModal && (modalState.bool ? false : true)) { if (phoneModal && (modalState.bool ? false : true)) {
if ( if ((type === 'up' && numberSelectHistory < call_history.length) || numberSelectHistory === 'zero') {
(type === 'up' && numberSelectHistory < call_history.length) || setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,);
numberSelectHistory === 'zero' }
) { if (type === 'down' && numberSelectHistory > 0) {
setNumberSelectHistory( setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,);
numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1, }
); }
} };
if (type === 'down' && numberSelectHistory > 0) {
setNumberSelectHistory(
numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,
);
}
}
};
useEffect(() => { useEffect(() => {
if (phoneModal && (modalState.bool ? false : true)) { if (phoneModal && (modalState.bool ? false : true)) {
let selectedNumber; let selectedNumber;
if (numberSelectHistory == 0) { if (numberSelectHistory == 0) {
setInputValue(''); setInputValue('');
} }
selectedNumber = call_history.slice(numberSelectHistory * -1)[0] selectedNumber = call_history.slice(numberSelectHistory * -1)[0] ? call_history.slice(numberSelectHistory * -1)[0] : false;
? call_history.slice(numberSelectHistory * -1)[0]
: false;
if (numberSelectHistory === 0) { if (numberSelectHistory === 0) {
selectedNumber = ''; selectedNumber = '';
setNumberSelectHistory('zero'); setNumberSelectHistory('zero');
} }
if (numberSelectHistory === 'zero') { if (numberSelectHistory === 'zero') {
selectedNumber = ''; selectedNumber = '';
setNumberSelectHistory('zero'); setNumberSelectHistory('zero');
} }
if (selectedNumber) { if (selectedNumber) {
setInputValue(selectedNumber.value); setInputValue(selectedNumber.value);
} }
} }
}, [numberSelectHistory]); }, [numberSelectHistory]);
document.onkeydown = function (e) { document.onkeydown = function (e) {
if (phoneModal && modalState.bool ? false : true) { if (phoneModal && modalState.bool ? false : true) {
e = e || window.event; e = e || window.event;
let actualKeyCode = e.keyCode; let actualKeyCode = e.keyCode;
if (e.ctrlKey && actualKeyCode === 86) { if (e.ctrlKey && actualKeyCode === 86) {
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);
}); });
} }
return true; return true;
} }
}; };
const gameState = { const gameState = {
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 ( } else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') {
phoneModal && inputController({type: 'delete', from: 'button', value: e.value});
(modalState.bool ? false : true) && } else if (phoneModal && (modalState.bool ? false : true) && !isNaN(+e.key)) {
e.key === 'Backspace' inputController({type: 'add', value: e.key, from: 'button'});
) { } else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') {
inputController({ type: 'delete', from: 'button', value: e.value }); } else if ((phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) || e.keyCode == 40) history({type: e.keyCode === 38 ? 'up' : 'down'});
} 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( const handleKeyUp = useCallback((event) => {
(event) => { gameState.toggleCP(event);
gameState.toggleCP(event); }, [gameState.toggleCP],);
},
[gameState.toggleCP],
);
useEffect(() => { useEffect(() => {
document.addEventListener('keyup', handleKeyUp); document.addEventListener('keyup', handleKeyUp);
return () => { return () => {
document.removeEventListener('keyup', handleKeyUp); document.removeEventListener('keyup', handleKeyUp);
}; };
}, [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 ---------- // inset if ----------
// ------------------- // -------------------
var currentTime = new Date(); var currentTime = new Date();
if (dynamicValue === 'connected') { if (dynamicValue === 'connected') {
if ( if (Boolean(inputValue.toString().length) && call_history.slice(-1)[0]?.value != inputValue) {
Boolean(inputValue.toString().length) && let newCallsStringify = JSON.stringify([...call_history, {
call_history.slice(-1)[0]?.value != inputValue value: inputValue,
) { time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`,
let newCallsStringify = JSON.stringify([ },]);
...call_history, localStorage.setItem('callhistory', newCallsStringify);
{ }
value: inputValue, boxDialer.initialized(inputValue);
time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`, setInputValue('');
}, } else {
]); toast.error('Please wait', {
localStorage.setItem('callhistory', newCallsStringify); style: {
} zIndex: '99999999999999999',
boxDialer.initialized(inputValue); },
setInputValue(''); });
} else { }
toast.error('Please wait', { };
style: { const selectFunc = (e) => {
zIndex: '99999999999999999', setInputValue(e);
}, };
}); const setDefaultHistoryNumberHistory = () => {
} setNumberSelectHistory('zero');
}; };
const selectFunc = (e) => {
setInputValue(e);
};
const setDefaultHistoryNumberHistory = () => {
setNumberSelectHistory('zero');
};
document.querySelector('body').addEventListener('click', function (e) { document.querySelector('body').addEventListener('click', function (e) {
if (exNum) setExNum(false); if (exNum) setExNum(false);
}); });
return ( return (<ModalPhoneNumpadStyle
<ModalPhoneNumpadStyle 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)}/>
{/* <div {/* <div
style={{ style={{
background: 'red', background: 'red',
position: 'fixed', position: 'fixed',
...@@ -230,92 +198,74 @@ const ModalPhoneNumpad = ({ ...@@ -230,92 +198,74 @@ const ModalPhoneNumpad = ({
height: '100vh', height: '100vh',
zIndex: '99999999', zIndex: '99999999',
}}></div> */} }}></div> */}
<ModalPhoneNumpadStyle.InputArea> <ModalPhoneNumpadStyle.InputArea>
<CallHistoryInputDropdown <CallHistoryInputDropdown
call_history={call_history} call_history={call_history}
inputValue={inputValue} inputValue={inputValue}
selectFunc={selectFunc} selectFunc={selectFunc}
numberSelectHistory={numberSelectHistory} numberSelectHistory={numberSelectHistory}
setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory} setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
/> />
{inputValue?.length ? ( {inputValue?.length ? (<Input.BackSpaceIcon
<Input.BackSpaceIcon onClick={() => inputController({type: 'delete', from: 'button'})}
onClick={() => inputController({ type: 'delete', from: 'button' })} />) : ('')}
/> </ModalPhoneNumpadStyle.InputArea>
) : ( <ModalPhoneNumpadStyle.ButtonArea>
'' {numbers?.map((mapItem) => (<NumberButton
)} onMouseDown={() => boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])}
</ModalPhoneNumpadStyle.InputArea> onMouseUp={() => boxDialer.stop()}
<ModalPhoneNumpadStyle.ButtonArea> onMouseOut={() => boxDialer.stop()}
{numbers?.map((mapItem) => ( className='nocopy'
<NumberButton key={mapItem.id}
onMouseDown={() => onClick={() => {
boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1]) mapItem.type === 'number' && inputController({
} value: mapItem.value, type: 'add', from: 'button',
onMouseUp={() => boxDialer.stop()} });
onMouseOut={() => boxDialer.stop()} }}>
className='nocopy' {mapItem.nameNumber}
key={mapItem.id} <NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
onClick={() => { </NumberButton>))}
mapItem.type === 'number' && {!modalState.bool ? (<>
inputController({ <NumberButton
value: mapItem.value, style={{gridColumn: '1/4'}}
type: 'add', status={dynamicValue}
from: 'button', type={'call_button'}>
}); <NumberButton.CallButton exNum={exNum}>
}}> <div className='left' onClick={() => callButton()}>
{mapItem.nameNumber} <CallIcon className='callIcon'/>
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon> <p className='call_text'>{translator.translate('CALL')}</p>
</NumberButton> </div>
))} <div className='right' onClick={() => setExNum(!exNum)}>
{!modalState.bool ? ( {/* <KeyboardControlKeyIcon className='icon' /> */}
<> <div className='icon'></div>
<NumberButton </div>
style={{ gridColumn: '1/4' }} </NumberButton.CallButton>
status={dynamicValue} <NumberButton.CallButtonModal visiblevalue={exNum}>
type={'call_button'}> <NumberButton.CallButtonModalInset>
<NumberButton.CallButton exNum={exNum}> {extnums?.map(({number, title}, index) => (<p
<div className='left' onClick={() => callButton()}> key={index}
<CallIcon className='callIcon' /> className='num_item'
<p className='call_text'>{translator.translate('CALL')}</p> onClick={() => {
</div> boxDialer.extnum = number;
<div className='right' onClick={() => setExNum(!exNum)}> setExNum(false);
{/* <KeyboardControlKeyIcon className='icon' /> */} callButton();
<div className='icon'></div> }}>
</div> {title}
</NumberButton.CallButton> </p>))}
<NumberButton.CallButtonModal visiblevalue={exNum}> </NumberButton.CallButtonModalInset>
<NumberButton.CallButtonModalInset> </NumberButton.CallButtonModal>
{extnums?.map(({ number, title }, index) => ( {/* <ModalPhoneNumpadStyle.Window
<p
key={index}
className='num_item'
onClick={() => {
boxDialer.extnum = number;
setExNum(false);
callButton();
}}>
{title}
</p>
))}
</NumberButton.CallButtonModalInset>
</NumberButton.CallButtonModal>
{/* <ModalPhoneNumpadStyle.Window
visiblevalue={exNum} visiblevalue={exNum}
onClick={() => setExNum(false)} onClick={() => setExNum(false)}
/> */} /> */}
</NumberButton> </NumberButton>
</> </>) : (<>
) : ( <div style={{height: '33px'}}></div>
<> <div style={{height: '33px'}}></div>
<div style={{ height: '33px' }}></div> </>)}
<div style={{ height: '33px' }}></div> <DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason}/>
</> </ModalPhoneNumpadStyle.ButtonArea>
)} </ModalPhoneNumpadStyle>);
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
</ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle>
);
}; };
export default ModalPhoneNumpad; export default ModalPhoneNumpad;
src/components/ModalPhoneNumpad/style.js
View file @ 01b0ebfd
...@@ -5,12 +5,11 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; ...@@ -5,12 +5,11 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition'; import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
const ModalPhoneNumpadStyle = styled.div` const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0px 0px 20px #00000047; box-shadow: 0 0 20px #00000047;
background-color: #a6bdf438; background-color: #a6bdf438;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0; margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
width: 230px; width: 230px;
position: fixed; position: fixed;
...@@ -27,6 +26,14 @@ const ModalPhoneNumpadStyle = styled.div` ...@@ -27,6 +26,14 @@ 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{
position: absolute;
font-size: 11px;
cursor: pointer;
top: 4px;
right: 6px;
color: #00000030;
}
`; `;
ModalPhoneNumpadStyle.InputArea = styled.div` ModalPhoneNumpadStyle.InputArea = styled.div`
position: relative; position: relative;
......
src/components/setting/index.jsx 0 → 100644
View file @ 01b0ebfd
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"
const SettingComponent = ({
settingHidden, variant, position
}) => {
const [settingPage, setSettingPage] = useState(0)
var elem = document.getElementById('data');
const allData = [
{
id: 0,
title: 'Test-2',
icon: <BuildIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 1,
title: 'Test-1',
icon: <FormatPaintIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>2</SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 2,
title: 'Test-3',
icon: <CheckBoxOutlineBlankIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>3</SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 3,
title: 'Test-4',
icon: <CheckBoxOutlineBlankIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>4</SettingMainStyle.RightSelectInfoOneBlock>
},
]
const changeSettingPageCountFunc = (count) => {
setSettingPage(count)
}
console.log('elem: ', elem)
useEffect(() => {
if(elem){
elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage,behavior: 'smooth'})
}
}, [settingPage]);
return (<SettingMainStyle
hiddenValue={!settingHidden}
// hiddenValue={false}
variant={variant}
position={position}
>
<SettingMainStyle.LeftMenu>
{
allData.map(({id, title, icon})=> <div id={id} className={`menuItem ${settingPage === id && 'active'}`} onClick={()=> changeSettingPageCountFunc(id)}>
{icon}
<div className={'backgroundFilter'}></div>
</div>)
}
</SettingMainStyle.LeftMenu>
<SettingMainStyle.RightSelectInfo id={'data'}>
{
allData.map(({content, id})=> content)
}
</SettingMainStyle.RightSelectInfo>
</SettingMainStyle>)
}
export default SettingComponent
src/components/setting/style.js 0 → 100644
View file @ 01b0ebfd
import styled from 'styled-components'
import {boxDialerWidjetPosition} from "../../lib/boxDialerWidjetPosition"
const SettingMainStyle = styled.div`
box-shadow: 0 0 20px #00000047;
background-color: #a6bdf438;
border-radius: 20px;
margin: 0;
box-sizing: border-box;
width: 230px;
height: 300px;
position: fixed;
padding: 3px;
transition: 0.2s !important;
z-index: 9999;
backdrop-filter: blur(10px);
${({ hiddenValue, position, variant }) =>
hiddenValue
? boxDialerWidjetPosition[variant][position].numpad.hidden
: boxDialerWidjetPosition[variant][position].numpad.seen}
bottom: 400px;
display: grid;
grid-template-columns: 40px 1fr;
grid-gap: 2px;
`
SettingMainStyle.LeftMenu = styled.div`
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px 0;
box-sizing: border-box;
.menuItem {
height: 34px;
width: 34px;
border: 1px solid #9c9c9c80;
padding: 2px;
font-size: 14px;
border-top-left-radius: 10px;
border-top-right-radius: 3px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.leftIcons {
color: #00000080;
}
.backgroundFilter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: #0000004d;
z-index: 1;
border-top-left-radius: 9px;
border-top-right-radius: 2px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 2px;
}
.active {
//.leftIcons{
// color: #fff;
//}
.backgroundFilter {
width: 100%;
animation: .2s ease-in both running backFilter;
}
}
@keyframes backFilter {
from{
height: 0;
}
to{
height: 100%;
}
}
height: 100%;
`
SettingMainStyle.RightSelectInfo = styled.div`
box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden;
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
justify-content: center;
padding: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 10px;
::-webkit-scrollbar {
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #fff0;
width: 0;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #abaaaa;
border-radius: 10px;
width: 0;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
width: 0;
}
`
SettingMainStyle.RightSelectInfoOneBlock = styled.div`
height: 285px;
background: #ccc;
border-top-left-radius: 3px;
border-top-right-radius: 10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 10px;
overflow-y: scroll;
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #fff0;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #abaaaa;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
`
export default SettingMainStyle
src/components/settingComponents/fixComponent/index.jsx 0 → 100644
View file @ 01b0ebfd
import React from 'react'
import Block from "./style"
import Switch from '@mui/material/Switch';
import MiniTable from "../../MiniTable"
import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from '@mui/material/Slider';
const FixComponent = () => {
const useColorConfigStore = useColorConfig((store) => store)
console.log('useColorConfig client: ', useColorConfigStore.state.autoAnswer)
const marks = [
{
value: 1,
label: '1s',
},
{
value: 40,
label: '3s',
},
{
value: 100,
label: '6s',
}
];
const tableData = [{
id: '1',
title: 'Auto answer',
type: 'row',
child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
<Slider
aria-label="Restricted values"
defaultValue={40}
step={null}
value={useColorConfigStore.state.autoAnswerSecond}
marks={marks}
onChange={(e)=> useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
/>
</div>,
inputTag: <Switch
size={'small'}
checked={useColorConfigStore.state.autoAnswer}
onChange={(e) => {
return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
}}
/>,
}]
return (<Block>
{/*<p>Text</p>*/}
{/*<Switch size={'small'} defaultChecked />*/}
<MiniTable data={tableData}/>
</Block>)
}
export default FixComponent
src/components/settingComponents/fixComponent/style.js 0 → 100644
View file @ 01b0ebfd
import styled from 'styled-components'
const Block = styled.div`
margin: 5px;
`
export default Block
src/lib/boxDIaler.js
View file @ 01b0ebfd
...@@ -59,6 +59,9 @@ export class BoxDialer { ...@@ -59,6 +59,9 @@ export class BoxDialer {
player; player;
strmTrack; strmTrack;
isRestarting; isRestarting;
globalHistoryData
constructor() { constructor() {
this.played = false; this.played = false;
document.body.addEventListener('click', () => { document.body.addEventListener('click', () => {
...@@ -423,6 +426,7 @@ export class BoxDialer { ...@@ -423,6 +426,7 @@ export class BoxDialer {
}); });
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(
...@@ -466,7 +470,7 @@ export class BoxDialer { ...@@ -466,7 +470,7 @@ export class BoxDialer {
funcName: 'modalState', funcName: 'modalState',
funcParam: { funcParam: {
bool: true, bool: true,
callType: 'connected', callType: 'incoming',
}, },
}); });
...@@ -530,7 +534,7 @@ export class BoxDialer { ...@@ -530,7 +534,7 @@ export class BoxDialer {
); );
// this handler will be called for incoming calls too // this handler will be called for incoming calls too
console.log( console.log(
'%c incoming confirme', '%c incoming confirmed',
'font-size: 22px; color: yellow;', 'font-size: 22px; color: yellow;',
); );
this.onSipStateChange.innerCallerModal({ this.onSipStateChange.innerCallerModal({
...@@ -540,7 +544,11 @@ export class BoxDialer { ...@@ -540,7 +544,11 @@ export class BoxDialer {
}); });
this.startInnerTimer(); this.startInnerTimer();
this.setGuiPhoneState({ this.setGuiPhoneState({
stateCode: 'connected', funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
},
}); });
}); });
this.callSession.on('ended', () => { this.callSession.on('ended', () => {
...@@ -866,7 +874,7 @@ export class BoxDialer { ...@@ -866,7 +874,7 @@ export class BoxDialer {
answerButtonClick() { answerButtonClick() {
this.onSoundType({ type: 'ring', bool: false }); this.onSoundType({ type: 'ring', bool: false });
this.callSession.answer(this.options); this.callSession?.answer(this.options);
this.callSession.connection.addEventListener('addstream', (event) => { this.callSession.connection.addEventListener('addstream', (event) => {
this.remoteAudio.srcObject = event.stream; this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play(); this.remoteAudio.play();
......
src/lib/controlRenderBX.jsx
View file @ 01b0ebfd
/** @format */ /** @format */
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Root from '../root'; import Root from '../root';
import {useColorConfig} from "../storage/globalColorConfig"
const ControlRenderBX = () => { const ControlRenderBX = () => {
const useColorConfigStore = useColorConfig((store)=> store)
const [wsphonedata, setWsphonedata] = useState({}); const [wsphonedata, setWsphonedata] = useState({});
useEffect(() => { useEffect(() => {
setWsphonedata(window.alovoice_wsphone); setWsphonedata(window.alovoice_wsphone);
useColorConfigStore.getColors()
if (!window.alovoice_wsphone) { if (!window.alovoice_wsphone) {
setWsphonedata({ setWsphonedata({
iscloud: true, iscloud: true,
...@@ -30,6 +33,7 @@ const ControlRenderBX = () => { ...@@ -30,6 +33,7 @@ const ControlRenderBX = () => {
], ],
}); });
} }
// getHistoryColor
}, []); }, []);
console.log('window_alovoice_wsphone: ', window.alovoice_wsphone); console.log('window_alovoice_wsphone: ', window.alovoice_wsphone);
return ( return (
......
src/lib/globalColors.js 0 → 100644
View file @ 01b0ebfd
const getLocalColor = () => {
const res = window.localStorage.getItem('boxdialer-style')
return JSON.parse(res) || {}
}
const globalColors = {
test: '#ff0000',
...getLocalColor(),
}
export {globalColors}
src/root/index.jsx
View file @ 01b0ebfd
...@@ -9,18 +9,21 @@ import BxMiniWidjetUi from '../components/BxMiniWidjetUi'; ...@@ -9,18 +9,21 @@ 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 {useColorConfig} from "../storage/globalColorConfig"
// import { contextModalEventProperty } from '../context/modalEventProperty'; // 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;
// // context const useColorConfigStore = useColorConfig((store) => store)
// const { callEvents, setCallEvents } = useContext(contextModalEventProperty);
const configHoldMute = useConfigHoldMute((state) => state) const configHoldMute = useConfigHoldMute((state) => state)
const [phoneModal, setPhoneModal] = useState(false); const [phoneModal, setPhoneModal] = useState(false);
const [dynamicValue, setDynamicValue] = useState('pending'); const [dynamicValue, setDynamicValue] = useState('pending');
const [modalState, setModalState] = useState(false); const [modalState, setModalState] = useState(false);
const [settingHidden, setSettingHidden] = useState(false);
const [secondLine, setSecondLine] = useState(false); 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,
...@@ -38,13 +41,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -38,13 +41,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
useEffect(() => { useEffect(() => {
boxDialer.globalHistoryData = useColorConfigStore.state
if (wsphonedata && wsphonedata?.number) { if (wsphonedata && wsphonedata?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue'); boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState'); boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine'); boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal'); boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer'); boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
// // context
boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents'); boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
boxDialer.setSipStateChangeCallback( boxDialer.setSipStateChangeCallback(
setInnerCallerModal, setInnerCallerModal,
...@@ -86,6 +89,35 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -86,6 +89,35 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
setWsphonedata(result); setWsphonedata(result);
}; };
useEffect(()=> {
console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool)
if(modalState.callType === 'incoming' && modalState.bool){
let second
if(useColorConfigStore.state?.autoAnswer) {
switch (useColorConfigStore.state?.autoAnswerSecond) {
case 1:
second = 1000
break
case 40:
second = 3000
break
case 100:
second = 6000
break
default:
second = 0
}
console.log('auto_answer second: ', second)
setTimeout(() => {
console.log('auto_answer run boxDialer.answerButtonClick()')
boxDialer.answerButtonClick()
}, second)
}
}
}, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond])
const selectWidjetType = (type) => { const selectWidjetType = (type) => {
switch (type) { switch (type) {
case 'bxmini': case 'bxmini':
...@@ -141,13 +173,19 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -141,13 +173,19 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
} }
}; };
console.log('wsphonedata_variant: ', !wsphonedata?.number, !wsphonedata?.position, !wsphonedata?.number && !wsphonedata?.position)
if (!wsphonedata?.number && !wsphonedata?.position) return; if (!wsphonedata?.number && !wsphonedata?.position) return;
return ( return (
<> <>
{selectWidjetType(wsphonedata.variant)} {selectWidjetType(wsphonedata.variant)}
<SettingComponent
settingHidden={settingHidden && phoneModal ? true : false}
variant={wsphonedata.variant || 'defaultWidjet'}
position={wsphonedata.position || 'bottomLeft'}
/>
<ModalPhoneNumpad <ModalPhoneNumpad
setSettingHidden={setSettingHidden}
settingHidden={settingHidden}
modalState={modalState} modalState={modalState}
phoneModal={phoneModal} phoneModal={phoneModal}
reasons={wsphonedata?.reasons} reasons={wsphonedata?.reasons}
...@@ -160,12 +198,20 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -160,12 +198,20 @@ 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}
// hidden={true}
callType={modalState.callType} callType={modalState.callType}
// callType={'connected'} // hidden={true}
// callType={'incoming'}
hangupButton={hangupButton} hangupButton={hangupButton}
phoneNumber={ phoneNumber={
modalState.callType === 'outcoming' modalState.callType === 'outcoming'
...@@ -176,9 +222,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => { ...@@ -176,9 +222,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
<InnerCaller <InnerCaller
hidden={innerCallerModal.bool} hidden={innerCallerModal.bool}
// hidden={true}
type={innerCallerModal.type} type={innerCallerModal.type}
// type={'connectingIncoming'}
from={innerCallerModal.from} from={innerCallerModal.from}
innerTimer={innerTimer} innerTimer={innerTimer}
/> />
......
src/storage/globalColorConfig.js 0 → 100644
View file @ 01b0ebfd
/** @format */
import {create} from 'zustand';
export const useColorConfig = create((set, get) => ({
state: {},
getColors: () => {
const res = localStorage.getItem('boxdialer-style')
if (!!res) {
let jsonRes = JSON.parse(res)
set(() => ({state: jsonRes}))
}
},
setColor: ({name, value}) => {
const state = get()
if (!!name) {
set((state) => ({
state: {
...state.state,
[name]: value
}
}))
state.saveToHistory()
}
},
saveToHistory: () => {
const state = get()
localStorage.setItem('boxdialer-style', JSON.stringify(state.state))
}
}));
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