Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
BoxDialer
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kulya
BoxDialer
Commits
01b0ebfd
Commit
01b0ebfd
authored
Nov 10, 2023
by
Muhammadali
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update-
parent
7b1d3bf6
Changes
14
Show whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
730 additions
and
298 deletions
+730
-298
index.jsx
src/components/MiniTable/index.jsx
+25
-0
style.js
src/components/MiniTable/style.js
+45
-0
index.jsx
src/components/Modal/index.jsx
+1
-0
index.jsx
src/components/ModalPhoneNumpad/index.jsx
+234
-284
style.js
src/components/ModalPhoneNumpad/style.js
+9
-2
index.jsx
src/components/setting/index.jsx
+76
-0
style.js
src/components/setting/style.js
+155
-0
index.jsx
src/components/settingComponents/fixComponent/index.jsx
+61
-0
style.js
src/components/settingComponents/fixComponent/style.js
+7
-0
boxDIaler.js
src/lib/boxDIaler.js
+12
-4
controlRenderBX.jsx
src/lib/controlRenderBX.jsx
+4
-0
globalColors.js
src/lib/globalColors.js
+17
-0
index.jsx
src/root/index.jsx
+52
-8
globalColorConfig.js
src/storage/globalColorConfig.js
+32
-0
No files found.
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
:
15
px
;
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
,
...
@@ -20,7 +22,9 @@ const ModalPhoneNumpad = ({
...
@@ -20,7 +22,9 @@ const ModalPhoneNumpad = ({
position
,
position
,
variant
,
variant
,
extnums
,
extnums
,
})
=>
{
setSettingHidden
,
settingHidden
})
=>
{
const
boxDialer
=
window
.
BoxDialer
;
const
boxDialer
=
window
.
BoxDialer
;
const
[
inputValue
,
setInputValue
]
=
useState
(
''
);
const
[
inputValue
,
setInputValue
]
=
useState
(
''
);
...
@@ -30,9 +34,7 @@ const ModalPhoneNumpad = ({
...
@@ -30,9 +34,7 @@ const ModalPhoneNumpad = ({
const
translator
=
useTranslator
();
const
translator
=
useTranslator
();
useEffect
(()
=>
{
useEffect
(()
=>
{
let
currentCalls
=
localStorage
.
getItem
(
'
callhistory
'
)
let
currentCalls
=
localStorage
.
getItem
(
'
callhistory
'
)
?
JSON
.
parse
(
localStorage
.
getItem
(
'
callhistory
'
))
:
false
;
?
JSON
.
parse
(
localStorage
.
getItem
(
'
callhistory
'
))
:
false
;
if
(
currentCalls
)
{
if
(
currentCalls
)
{
setCall_history
(
currentCalls
);
setCall_history
(
currentCalls
);
}
}
...
@@ -42,13 +44,15 @@ const ModalPhoneNumpad = ({
...
@@ -42,13 +44,15 @@ const ModalPhoneNumpad = ({
if
(
!
modalState
.
bool
)
setInputValue
(
''
);
if
(
!
modalState
.
bool
)
setInputValue
(
''
);
},
[
modalState
.
bool
]);
},
[
modalState
.
bool
]);
const
inputController
=
({
value
,
type
,
from
})
=>
{
useEffect
(()
=>
{
boxDialer
.
onSoundType
({
type
:
'
pick
'
,
bool
:
true
});
if
(
!
phoneModal
)
setSettingHidden
(
false
)
},
[
phoneModal
])
const
inputController
=
({
value
,
type
,
from
})
=>
{
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
===
'
input
'
)
return
setInputValue
(
value
);
if
(
from
===
'
button
'
)
setInputValue
(
inputValue
+
value
);
if
(
from
===
'
button
'
)
setInputValue
(
inputValue
+
value
);
}
}
...
@@ -56,12 +60,10 @@ const ModalPhoneNumpad = ({
...
@@ -56,12 +60,10 @@ const ModalPhoneNumpad = ({
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
'
)
{
if
(
from
===
'
input
'
)
{
setInputValue
(
value
);
setInputValue
(
value
);
...
@@ -72,20 +74,13 @@ const ModalPhoneNumpad = ({
...
@@ -72,20 +74,13 @@ const ModalPhoneNumpad = ({
}
}
};
};
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
'
)
{
setNumberSelectHistory
(
numberSelectHistory
!==
'
zero
'
?
numberSelectHistory
+
1
:
0
+
1
,
);
}
}
if
(
type
===
'
down
'
&&
numberSelectHistory
>
0
)
{
if
(
type
===
'
down
'
&&
numberSelectHistory
>
0
)
{
setNumberSelectHistory
(
setNumberSelectHistory
(
numberSelectHistory
!==
'
zero
'
?
numberSelectHistory
-
1
:
0
-
1
,);
numberSelectHistory
!==
'
zero
'
?
numberSelectHistory
-
1
:
0
-
1
,
);
}
}
}
}
};
};
...
@@ -96,9 +91,7 @@ const ModalPhoneNumpad = ({
...
@@ -96,9 +91,7 @@ const ModalPhoneNumpad = ({
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
=
''
;
...
@@ -122,7 +115,7 @@ const ModalPhoneNumpad = ({
...
@@ -122,7 +115,7 @@ const ModalPhoneNumpad = ({
navigator
.
clipboard
navigator
.
clipboard
.
readText
()
.
readText
()
.
then
((
text
)
=>
{
.
then
((
text
)
=>
{
inputController
({
type
:
'
add
'
,
value
:
text
,
from
:
'
button
'
});
inputController
({
type
:
'
add
'
,
value
:
text
,
from
:
'
button
'
});
})
})
.
catch
((
err
)
=>
{
.
catch
((
err
)
=>
{
console
.
log
(
'
Something went wrong
'
,
err
);
console
.
log
(
'
Something went wrong
'
,
err
);
...
@@ -135,37 +128,18 @@ const ModalPhoneNumpad = ({
...
@@ -135,37 +128,18 @@ const ModalPhoneNumpad = ({
toggleCP
:
(
e
)
=>
{
toggleCP
:
(
e
)
=>
{
if
(
phoneModal
&&
(
modalState
.
bool
?
false
:
true
)
&&
e
.
key
===
'
Enter
'
)
{
if
(
phoneModal
&&
(
modalState
.
bool
?
false
:
true
)
&&
e
.
key
===
'
Enter
'
)
{
callButton
();
callButton
();
}
else
if
(
}
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
);
...
@@ -181,17 +155,11 @@ const ModalPhoneNumpad = ({
...
@@ -181,17 +155,11 @@ const ModalPhoneNumpad = ({
// -------------------
// -------------------
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
)
{
let
newCallsStringify
=
JSON
.
stringify
([
...
call_history
,
{
value
:
inputValue
,
value
:
inputValue
,
time
:
`
${
currentTime
.
getHours
()}
:
${
currentTime
.
getMinutes
()}
${
currentTime
.
getDate
()}
.
${
currentTime
.
getMonth
()}
.
${
currentTime
.
getFullYear
()}
`
,
time
:
`
${
currentTime
.
getHours
()}
:
${
currentTime
.
getMinutes
()}
${
currentTime
.
getDate
()}
.
${
currentTime
.
getMonth
()}
.
${
currentTime
.
getFullYear
()}
`
,
},
},]);
]);
localStorage
.
setItem
(
'
callhistory
'
,
newCallsStringify
);
localStorage
.
setItem
(
'
callhistory
'
,
newCallsStringify
);
}
}
boxDialer
.
initialized
(
inputValue
);
boxDialer
.
initialized
(
inputValue
);
...
@@ -214,12 +182,12 @@ const ModalPhoneNumpad = ({
...
@@ -214,12 +182,12 @@ const ModalPhoneNumpad = ({
document
.
querySelector
(
'
body
'
).
addEventListener
(
'
click
'
,
function
(
e
)
{
document
.
querySelector
(
'
body
'
).
addEventListener
(
'
click
'
,
function
(
e
)
{
if
(
exNum
)
setExNum
(
false
);
if
(
exNum
)
setExNum
(
false
);
});
});
return
(
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',
...
@@ -238,45 +206,33 @@ const ModalPhoneNumpad = ({
...
@@ -238,45 +206,33 @@ const ModalPhoneNumpad = ({
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
.
InputArea
>
<
ModalPhoneNumpadStyle
.
ButtonArea
>
<
ModalPhoneNumpadStyle
.
ButtonArea
>
{
numbers
?.
map
((
mapItem
)
=>
(
{
numbers
?.
map
((
mapItem
)
=>
(<
NumberButton
<
NumberButton
onMouseDown=
{
()
=>
boxDialer
.
dialTone
(
mapItem
.
ringHz
[
0
],
mapItem
.
ringHz
[
1
])
}
onMouseDown=
{
()
=>
boxDialer
.
dialTone
(
mapItem
.
ringHz
[
0
],
mapItem
.
ringHz
[
1
])
}
onMouseUp=
{
()
=>
boxDialer
.
stop
()
}
onMouseUp=
{
()
=>
boxDialer
.
stop
()
}
onMouseOut=
{
()
=>
boxDialer
.
stop
()
}
onMouseOut=
{
()
=>
boxDialer
.
stop
()
}
className=
'nocopy'
className=
'nocopy'
key=
{
mapItem
.
id
}
key=
{
mapItem
.
id
}
onClick=
{
()
=>
{
onClick=
{
()
=>
{
mapItem
.
type
===
'
number
'
&&
mapItem
.
type
===
'
number
'
&&
inputController
({
inputController
({
value
:
mapItem
.
value
,
type
:
'
add
'
,
from
:
'
button
'
,
value
:
mapItem
.
value
,
type
:
'
add
'
,
from
:
'
button
'
,
});
});
}
}
>
}
}
>
{
mapItem
.
nameNumber
}
{
mapItem
.
nameNumber
}
<
NumberButton
.
Icon
>
{
mapItem
.
icon
}
</
NumberButton
.
Icon
>
<
NumberButton
.
Icon
>
{
mapItem
.
icon
}
</
NumberButton
.
Icon
>
</
NumberButton
>
</
NumberButton
>))
}
))
}
{
!
modalState
.
bool
?
(<>
{
!
modalState
.
bool
?
(
<>
<
NumberButton
<
NumberButton
style=
{
{
gridColumn
:
'
1/4
'
}
}
style=
{
{
gridColumn
:
'
1/4
'
}
}
status=
{
dynamicValue
}
status=
{
dynamicValue
}
type=
{
'
call_button
'
}
>
type=
{
'
call_button
'
}
>
<
NumberButton
.
CallButton
exNum=
{
exNum
}
>
<
NumberButton
.
CallButton
exNum=
{
exNum
}
>
<
div
className=
'left'
onClick=
{
()
=>
callButton
()
}
>
<
div
className=
'left'
onClick=
{
()
=>
callButton
()
}
>
<
CallIcon
className=
'callIcon'
/>
<
CallIcon
className=
'callIcon'
/>
<
p
className=
'call_text'
>
{
translator
.
translate
(
'
CALL
'
)
}
</
p
>
<
p
className=
'call_text'
>
{
translator
.
translate
(
'
CALL
'
)
}
</
p
>
</
div
>
</
div
>
<
div
className=
'right'
onClick=
{
()
=>
setExNum
(
!
exNum
)
}
>
<
div
className=
'right'
onClick=
{
()
=>
setExNum
(
!
exNum
)
}
>
...
@@ -286,8 +242,7 @@ const ModalPhoneNumpad = ({
...
@@ -286,8 +242,7 @@ const ModalPhoneNumpad = ({
</
NumberButton
.
CallButton
>
</
NumberButton
.
CallButton
>
<
NumberButton
.
CallButtonModal
visiblevalue=
{
exNum
}
>
<
NumberButton
.
CallButtonModal
visiblevalue=
{
exNum
}
>
<
NumberButton
.
CallButtonModalInset
>
<
NumberButton
.
CallButtonModalInset
>
{
extnums
?.
map
(({
number
,
title
},
index
)
=>
(
{
extnums
?.
map
(({
number
,
title
},
index
)
=>
(<
p
<
p
key=
{
index
}
key=
{
index
}
className=
'num_item'
className=
'num_item'
onClick=
{
()
=>
{
onClick=
{
()
=>
{
...
@@ -296,8 +251,7 @@ const ModalPhoneNumpad = ({
...
@@ -296,8 +251,7 @@ const ModalPhoneNumpad = ({
callButton
();
callButton
();
}
}
>
}
}
>
{
title
}
{
title
}
</
p
>
</
p
>))
}
))
}
</
NumberButton
.
CallButtonModalInset
>
</
NumberButton
.
CallButtonModalInset
>
</
NumberButton
.
CallButtonModal
>
</
NumberButton
.
CallButtonModal
>
{
/* <ModalPhoneNumpadStyle.Window
{
/* <ModalPhoneNumpadStyle.Window
...
@@ -305,17 +259,13 @@ const ModalPhoneNumpad = ({
...
@@ -305,17 +259,13 @@ const ModalPhoneNumpad = ({
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
}
/>
</>
)
}
<
DropDown
selectFunc=
{
onSetDnd
}
reasons=
{
reasons
}
reason=
{
reason
}
/>
</
ModalPhoneNumpadStyle
.
ButtonArea
>
</
ModalPhoneNumpadStyle
.
ButtonArea
>
</
ModalPhoneNumpadStyle
>
</
ModalPhoneNumpadStyle
>);
);
};
};
export
default
ModalPhoneNumpad
;
export
default
ModalPhoneNumpad
;
src/components/ModalPhoneNumpad/style.js
View file @
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: 0
px 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 confirme
d
'
,
'
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
))
}
}));
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment