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 }) => {
const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
console.log('callType_modal: ', callType)
useEffect(() => {
setModalHidden(hidden);
......
src/components/ModalPhoneNumpad/index.jsx
View file @ 01b0ebfd
/** @format */
import React, { useCallback, useEffect, useState } from 'react';
import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
import React, {useCallback, useEffect, useState} from 'react';
import ModalPhoneNumpadStyle, {NumberButton, Input} from './style';
import numbers from '../../lib/numbers';
import CallIcon from '@mui/icons-material/Call';
import { toast } from 'react-hot-toast';
import {toast} from 'react-hot-toast';
import DropDown from '../DropDown';
import { CommentsDisabledOutlined } from '@mui/icons-material';
import {CommentsDisabledOutlined} from '@mui/icons-material';
import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
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 = ({
phoneModal,
modalState,
reasons,
reason,
onSetDnd,
dynamicValue,
position,
variant,
extnums,
}) => {
const boxDialer = window.BoxDialer;
phoneModal,
modalState,
reasons,
reason,
onSetDnd,
dynamicValue,
position,
variant,
extnums,
setSettingHidden,
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('');
const [call_history, setCall_history] = useState([]);
const [numberSelectHistory, setNumberSelectHistory] = useState(0);
const [exNum, setExNum] = useState();
const translator = useTranslator();
useEffect(() => {
let currentCalls = localStorage.getItem('callhistory') ? JSON.parse(localStorage.getItem('callhistory')) : false;
if (currentCalls) {
setCall_history(currentCalls);
}
}, [localStorage.getItem('callhistory'), inputValue]);
useEffect(() => {
let currentCalls = localStorage.getItem('callhistory')
? JSON.parse(localStorage.getItem('callhistory'))
: false;
if (currentCalls) {
setCall_history(currentCalls);
}
}, [localStorage.getItem('callhistory'), inputValue]);
useEffect(() => {
if (!modalState.bool) setInputValue('');
}, [modalState.bool]);
useEffect(() => {
if (!modalState.bool) setInputValue('');
}, [modalState.bool]);
useEffect(() => {
if (!phoneModal) setSettingHidden(false)
}, [phoneModal])
const inputController = ({ value, type, from }) => {
boxDialer.onSoundType({ type: 'pick', bool: true });
switch (type) {
case 'add':
if (
value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length
) {
if (from === 'input') return setInputValue(value);
if (from === 'button') setInputValue(inputValue + value);
}
const inputController = ({value, type, from}) => {
boxDialer.onSoundType({type: 'pick', bool: true});
switch (type) {
case 'add':
if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) {
if (from === 'input') return setInputValue(value);
if (from === 'button') setInputValue(inputValue + value);
}
break;
case 'delete':
if (from === 'button') {
setInputValue(
inputValue
.split('')
.slice(0, inputValue.length - 1)
.join(''),
);
}
if (from === 'input') {
setInputValue(value);
}
break;
default:
break;
}
};
break;
case 'delete':
if (from === 'button') {
setInputValue(inputValue
.split('')
.slice(0, inputValue.length - 1)
.join(''),);
}
if (from === 'input') {
setInputValue(value);
}
break;
default:
break;
}
};
const history = ({ type }) => {
if (phoneModal && (modalState.bool ? false : true)) {
if (
(type === 'up' && numberSelectHistory < call_history.length) ||
numberSelectHistory === 'zero'
) {
setNumberSelectHistory(
numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,
);
}
if (type === 'down' && numberSelectHistory > 0) {
setNumberSelectHistory(
numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,
);
}
}
};
const history = ({type}) => {
if (phoneModal && (modalState.bool ? false : true)) {
if ((type === 'up' && numberSelectHistory < call_history.length) || numberSelectHistory === 'zero') {
setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,);
}
if (type === 'down' && numberSelectHistory > 0) {
setNumberSelectHistory(numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,);
}
}
};
useEffect(() => {
if (phoneModal && (modalState.bool ? false : true)) {
let selectedNumber;
if (numberSelectHistory == 0) {
setInputValue('');
}
selectedNumber = call_history.slice(numberSelectHistory * -1)[0]
? call_history.slice(numberSelectHistory * -1)[0]
: false;
useEffect(() => {
if (phoneModal && (modalState.bool ? false : true)) {
let selectedNumber;
if (numberSelectHistory == 0) {
setInputValue('');
}
selectedNumber = call_history.slice(numberSelectHistory * -1)[0] ? call_history.slice(numberSelectHistory * -1)[0] : false;
if (numberSelectHistory === 0) {
selectedNumber = '';
setNumberSelectHistory('zero');
}
if (numberSelectHistory === 'zero') {
selectedNumber = '';
setNumberSelectHistory('zero');
}
if (selectedNumber) {
setInputValue(selectedNumber.value);
}
}
}, [numberSelectHistory]);
if (numberSelectHistory === 0) {
selectedNumber = '';
setNumberSelectHistory('zero');
}
if (numberSelectHistory === 'zero') {
selectedNumber = '';
setNumberSelectHistory('zero');
}
if (selectedNumber) {
setInputValue(selectedNumber.value);
}
}
}, [numberSelectHistory]);
document.onkeydown = function (e) {
if (phoneModal && modalState.bool ? false : true) {
e = e || window.event;
let actualKeyCode = e.keyCode;
if (e.ctrlKey && actualKeyCode === 86) {
navigator.clipboard
.readText()
.then((text) => {
inputController({ type: 'add', value: text, from: 'button' });
})
.catch((err) => {
console.log('Something went wrong', err);
});
}
return true;
}
};
const gameState = {
toggleCP: (e) => {
if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
callButton();
} 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) &&
!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' });
},
};
document.onkeydown = function (e) {
if (phoneModal && modalState.bool ? false : true) {
e = e || window.event;
let actualKeyCode = e.keyCode;
if (e.ctrlKey && actualKeyCode === 86) {
navigator.clipboard
.readText()
.then((text) => {
inputController({type: 'add', value: text, from: 'button'});
})
.catch((err) => {
console.log('Something went wrong', err);
});
}
return true;
}
};
const gameState = {
toggleCP: (e) => {
if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
callButton();
} 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) && !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) => {
gameState.toggleCP(event);
},
[gameState.toggleCP],
);
const handleKeyUp = useCallback((event) => {
gameState.toggleCP(event);
}, [gameState.toggleCP],);
useEffect(() => {
document.addEventListener('keyup', handleKeyUp);
useEffect(() => {
document.addEventListener('keyup', handleKeyUp);
return () => {
document.removeEventListener('keyup', handleKeyUp);
};
}, [handleKeyUp]);
// `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}`
const callButton = () => {
// inset if ----------
return () => {
document.removeEventListener('keyup', handleKeyUp);
};
}, [handleKeyUp]);
// `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}`
const callButton = () => {
// inset if ----------
// -------------------
var currentTime = new Date();
if (dynamicValue === 'connected') {
if (
Boolean(inputValue.toString().length) &&
call_history.slice(-1)[0]?.value != inputValue
) {
let newCallsStringify = JSON.stringify([
...call_history,
{
value: inputValue,
time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`,
},
]);
localStorage.setItem('callhistory', newCallsStringify);
}
boxDialer.initialized(inputValue);
setInputValue('');
} else {
toast.error('Please wait', {
style: {
zIndex: '99999999999999999',
},
});
}
};
const selectFunc = (e) => {
setInputValue(e);
};
const setDefaultHistoryNumberHistory = () => {
setNumberSelectHistory('zero');
};
// -------------------
var currentTime = new Date();
if (dynamicValue === 'connected') {
if (Boolean(inputValue.toString().length) && call_history.slice(-1)[0]?.value != inputValue) {
let newCallsStringify = JSON.stringify([...call_history, {
value: inputValue,
time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`,
},]);
localStorage.setItem('callhistory', newCallsStringify);
}
boxDialer.initialized(inputValue);
setInputValue('');
} else {
toast.error('Please wait', {
style: {
zIndex: '99999999999999999',
},
});
}
};
const selectFunc = (e) => {
setInputValue(e);
};
const setDefaultHistoryNumberHistory = () => {
setNumberSelectHistory('zero');
};
document.querySelector('body').addEventListener('click', function (e) {
if (exNum) setExNum(false);
});
return (
<ModalPhoneNumpadStyle
position={position}
hiddenValue={!phoneModal}
variant={variant}
onClick={(e) => e.stopPropagation()}>
{/* <div
document.querySelector('body').addEventListener('click', function (e) {
if (exNum) setExNum(false);
});
return (<ModalPhoneNumpadStyle
position={position}
hiddenValue={!phoneModal}
variant={variant}
onClick={(e) => e.stopPropagation()}>
<SettingsIcon className={'settingIcon'} onClick={() => setSettingHidden(!settingHidden)}/>
{/* <div
style={{
background: 'red',
position: 'fixed',
......@@ -230,92 +198,74 @@ const ModalPhoneNumpad = ({
height: '100vh',
zIndex: '99999999',
}}></div> */}
<ModalPhoneNumpadStyle.InputArea>
<CallHistoryInputDropdown
call_history={call_history}
inputValue={inputValue}
selectFunc={selectFunc}
numberSelectHistory={numberSelectHistory}
setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
/>
{inputValue?.length ? (
<Input.BackSpaceIcon
onClick={() => inputController({ type: 'delete', from: 'button' })}
/>
) : (
''
)}
</ModalPhoneNumpadStyle.InputArea>
<ModalPhoneNumpadStyle.ButtonArea>
{numbers?.map((mapItem) => (
<NumberButton
onMouseDown={() =>
boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])
}
onMouseUp={() => boxDialer.stop()}
onMouseOut={() => boxDialer.stop()}
className='nocopy'
key={mapItem.id}
onClick={() => {
mapItem.type === 'number' &&
inputController({
value: mapItem.value,
type: 'add',
from: 'button',
});
}}>
{mapItem.nameNumber}
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
</NumberButton>
))}
{!modalState.bool ? (
<>
<NumberButton
style={{ gridColumn: '1/4' }}
status={dynamicValue}
type={'call_button'}>
<NumberButton.CallButton exNum={exNum}>
<div className='left' onClick={() => callButton()}>
<CallIcon className='callIcon' />
<p className='call_text'>{translator.translate('CALL')}</p>
</div>
<div className='right' onClick={() => setExNum(!exNum)}>
{/* <KeyboardControlKeyIcon className='icon' /> */}
<div className='icon'></div>
</div>
</NumberButton.CallButton>
<NumberButton.CallButtonModal visiblevalue={exNum}>
<NumberButton.CallButtonModalInset>
{extnums?.map(({ number, title }, index) => (
<p
key={index}
className='num_item'
onClick={() => {
boxDialer.extnum = number;
setExNum(false);
callButton();
}}>
{title}
</p>
))}
</NumberButton.CallButtonModalInset>
</NumberButton.CallButtonModal>
{/* <ModalPhoneNumpadStyle.Window
<ModalPhoneNumpadStyle.InputArea>
<CallHistoryInputDropdown
call_history={call_history}
inputValue={inputValue}
selectFunc={selectFunc}
numberSelectHistory={numberSelectHistory}
setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
/>
{inputValue?.length ? (<Input.BackSpaceIcon
onClick={() => inputController({type: 'delete', from: 'button'})}
/>) : ('')}
</ModalPhoneNumpadStyle.InputArea>
<ModalPhoneNumpadStyle.ButtonArea>
{numbers?.map((mapItem) => (<NumberButton
onMouseDown={() => boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])}
onMouseUp={() => boxDialer.stop()}
onMouseOut={() => boxDialer.stop()}
className='nocopy'
key={mapItem.id}
onClick={() => {
mapItem.type === 'number' && inputController({
value: mapItem.value, type: 'add', from: 'button',
});
}}>
{mapItem.nameNumber}
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
</NumberButton>))}
{!modalState.bool ? (<>
<NumberButton
style={{gridColumn: '1/4'}}
status={dynamicValue}
type={'call_button'}>
<NumberButton.CallButton exNum={exNum}>
<div className='left' onClick={() => callButton()}>
<CallIcon className='callIcon'/>
<p className='call_text'>{translator.translate('CALL')}</p>
</div>
<div className='right' onClick={() => setExNum(!exNum)}>
{/* <KeyboardControlKeyIcon className='icon' /> */}
<div className='icon'></div>
</div>
</NumberButton.CallButton>
<NumberButton.CallButtonModal visiblevalue={exNum}>
<NumberButton.CallButtonModalInset>
{extnums?.map(({number, title}, index) => (<p
key={index}
className='num_item'
onClick={() => {
boxDialer.extnum = number;
setExNum(false);
callButton();
}}>
{title}
</p>))}
</NumberButton.CallButtonModalInset>
</NumberButton.CallButtonModal>
{/* <ModalPhoneNumpadStyle.Window
visiblevalue={exNum}
onClick={() => setExNum(false)}
/> */}
</NumberButton>
</>
) : (
<>
<div style={{ height: '33px' }}></div>
<div style={{ height: '33px' }}></div>
</>
)}
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
</ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle>
);
</NumberButton>
</>) : (<>
<div style={{height: '33px'}}></div>
<div style={{height: '33px'}}></div>
</>)}
<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason}/>
</ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle>);
};
export default ModalPhoneNumpad;
src/components/ModalPhoneNumpad/style.js
View file @ 01b0ebfd
......@@ -5,12 +5,11 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0px 0px 20px #00000047;
box-shadow: 0 0 20px #00000047;
background-color: #a6bdf438;
backdrop-filter: blur(10px);
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 230px;
position: fixed;
......@@ -27,6 +26,14 @@ const ModalPhoneNumpadStyle = styled.div`
grid-template-rows: 40px 1fr;
grid-gap: 15px;
cursor: default;
.settingIcon{
position: absolute;
font-size: 11px;
cursor: pointer;
top: 4px;
right: 6px;
color: #00000030;
}
`;
ModalPhoneNumpadStyle.InputArea = styled.div`
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 {
player;
strmTrack;
isRestarting;
globalHistoryData
constructor() {
this.played = false;
document.body.addEventListener('click', () => {
......@@ -423,6 +426,7 @@ export class BoxDialer {
});
this.ua.on('connecting', (e) => {
console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e);
});
this.ua.on('registrationExpiring', (e) => {
console.log(
......@@ -466,7 +470,7 @@ export class BoxDialer {
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
callType: 'incoming',
},
});
......@@ -530,7 +534,7 @@ export class BoxDialer {
);
// this handler will be called for incoming calls too
console.log(
'%c incoming confirme',
'%c incoming confirmed',
'font-size: 22px; color: yellow;',
);
this.onSipStateChange.innerCallerModal({
......@@ -540,7 +544,11 @@ export class BoxDialer {
});
this.startInnerTimer();
this.setGuiPhoneState({
stateCode: 'connected',
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
},
});
});
this.callSession.on('ended', () => {
......@@ -866,7 +874,7 @@ export class BoxDialer {
answerButtonClick() {
this.onSoundType({ type: 'ring', bool: false });
this.callSession.answer(this.options);
this.callSession?.answer(this.options);
this.callSession.connection.addEventListener('addstream', (event) => {
this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play();
......
src/lib/controlRenderBX.jsx
View file @ 01b0ebfd
/** @format */
import React, { useEffect, useState } from 'react';
import Root from '../root';
import {useColorConfig} from "../storage/globalColorConfig"
const ControlRenderBX = () => {
const useColorConfigStore = useColorConfig((store)=> store)
const [wsphonedata, setWsphonedata] = useState({});
useEffect(() => {
setWsphonedata(window.alovoice_wsphone);
useColorConfigStore.getColors()
if (!window.alovoice_wsphone) {
setWsphonedata({
iscloud: true,
......@@ -30,6 +33,7 @@ const ControlRenderBX = () => {
],
});
}
// getHistoryColor
}, []);
console.log('window_alovoice_wsphone: ', window.alovoice_wsphone);
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';
import SecondNotifSip from '../components/SecondNotifSip';
import InnerCaller from '../components/InnerCaller';
import {useConfigHoldMute} from "../storage"
import SettingComponent from "../components/setting"
import {useColorConfig} from "../storage/globalColorConfig"
// import { contextModalEventProperty } from '../context/modalEventProperty';
const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
const boxDialer = window.BoxDialer;
// // context
// const { callEvents, setCallEvents } = useContext(contextModalEventProperty);
const useColorConfigStore = useColorConfig((store) => store)
const configHoldMute = useConfigHoldMute((state) => state)
const [phoneModal, setPhoneModal] = useState(false);
const [dynamicValue, setDynamicValue] = useState('pending');
const [modalState, setModalState] = useState(false);
const [settingHidden, setSettingHidden] = useState(false);
const [secondLine, setSecondLine] = useState(false);
// const [secondLine, setSecondLine] = useState(false);
const [innerTimer, setInnerTimer] = useState(null);
const [innerCallerModal, setInnerCallerModal] = useState({
bool: false,
......@@ -38,13 +41,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
useEffect(() => {
boxDialer.globalHistoryData = useColorConfigStore.state
if (wsphonedata && wsphonedata?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
// // context
boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
boxDialer.setSipStateChangeCallback(
setInnerCallerModal,
......@@ -86,6 +89,35 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
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) => {
switch (type) {
case 'bxmini':
......@@ -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;
return (
<>
{selectWidjetType(wsphonedata.variant)}
<SettingComponent
settingHidden={settingHidden && phoneModal ? true : false}
variant={wsphonedata.variant || 'defaultWidjet'}
position={wsphonedata.position || 'bottomLeft'}
/>
<ModalPhoneNumpad
setSettingHidden={setSettingHidden}
settingHidden={settingHidden}
modalState={modalState}
phoneModal={phoneModal}
reasons={wsphonedata?.reasons}
......@@ -160,12 +198,20 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
extnums={wsphonedata.extnums}
/>
{/*
incoming
outgoing
connectingIncoming
connectingOutgoing
connected
*/}
<Modal
className='tailwindGlobalCss'
hidden={modalState.bool}
// hidden={true}
callType={modalState.callType}
// callType={'connected'}
// hidden={true}
// callType={'incoming'}
hangupButton={hangupButton}
phoneNumber={
modalState.callType === 'outcoming'
......@@ -176,9 +222,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
<InnerCaller
hidden={innerCallerModal.bool}
// hidden={true}
type={innerCallerModal.type}
// type={'connectingIncoming'}
from={innerCallerModal.from}
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