mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 10:04:33 +02:00
550 lines
18 KiB
HTML
550 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
|
|
<!-- Bootstrap CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
id="bootstrap_theme"
|
|
href="../node_modules/bootstrap/dist/css/bootstrap.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css"
|
|
/>
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
<title>FreeDATA - CHAT</title>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- bootstrap -->
|
|
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- chart.js -->
|
|
<script src="../node_modules/chart.js/dist/chart.umd.js"></script>
|
|
<!--<script src="../node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>-->
|
|
<!--<script type="module" src="../node_modules/emoji-picker-element/index.js"></script>-->
|
|
<script
|
|
type="module"
|
|
src="../node_modules/emoji-picker-element/picker.js"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="../node_modules/emoji-picker-element/database.js"
|
|
></script>
|
|
<div
|
|
class="position-absolute container w-100 h-100 bottom-0 end-0 mb-5"
|
|
style="z-index: 100; display: none"
|
|
id="emojipickercontainer"
|
|
>
|
|
<emoji-picker
|
|
locale="en"
|
|
class="position-absolute bottom-0 end-0 p-1 mb-2"
|
|
data-source="../node_modules/emoji-picker-element-data/en/emojibase/data.json"
|
|
></emoji-picker>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row h-100">
|
|
<div class="col-4 p-2 bg-light">
|
|
<! ------Chats area ---------------------------------------------------------------------->
|
|
<div class="container-fluid m-0 p-0">
|
|
<div class="input-group bottom-0 m-0 w-100">
|
|
<input
|
|
class="form-control w-50"
|
|
maxlength="9"
|
|
style="text-transform: uppercase"
|
|
id="chatModuleNewDxCall"
|
|
placeholder="DX CALL"
|
|
/>
|
|
<button
|
|
class="btn btn-sm btn-success"
|
|
id="createNewChatButton"
|
|
type="button"
|
|
>
|
|
<i class="bi bi-pencil-square" style="font-size: 1.2rem"></i>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
id="userModalButton"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#userModal"
|
|
class="btn btn-sm btn-primary ms-2"
|
|
>
|
|
<i class="bi bi-person" style="font-size: 1.2rem"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="sharedFolderButton"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#sharedFolderModal"
|
|
class="btn btn-sm btn-primary"
|
|
>
|
|
<i class="bi bi-files" style="font-size: 1.2rem"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr class="m-2" />
|
|
<div class="overflow-auto vh-100">
|
|
<div
|
|
class="list-group overflow-auto"
|
|
id="list-tab"
|
|
role="tablist"
|
|
style="height: calc(100vh - 70px)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-8 border vh-100 p-0">
|
|
<! ------ chat navbar ---------------------------------------------------------------------->
|
|
<div class="container-fluid m-2 p-0">
|
|
<div class="input-group bottom-0">
|
|
<button
|
|
class="btn btn-sm btn-secondary me-2"
|
|
id="ping"
|
|
type="button"
|
|
>
|
|
Ping
|
|
</button>
|
|
<button
|
|
id="chatSettingsDropDown"
|
|
type="button"
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="chatSettingsDropDown">
|
|
<li>
|
|
<a
|
|
class="dropdown-item bg-danger text-white"
|
|
id="delete_selected_chat"
|
|
href="#"
|
|
>Delete chat</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
|
|
<button
|
|
type="button"
|
|
id="userModalDXButton"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#userModalDX"
|
|
class="btn btn-sm btn-secondary"
|
|
>
|
|
<i class="bi bi-person" style="font-size: 1.2rem"></i>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
id="sharedFolderDXButton"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#sharedFolderModalDX"
|
|
class="btn btn-sm btn-secondary"
|
|
>
|
|
<i class="bi bi-files" style="font-size: 1.2rem"></i>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-small btn-primary dropdown-toggle"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
data-bs-auto-close="outside"
|
|
>
|
|
<i class="bi bi-funnel-fill"></i>
|
|
</button>
|
|
<form class="dropdown-menu p-4" id="frmFilter">
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input
|
|
checked="true"
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="chkMessage"
|
|
/>
|
|
<label class="form-check-label" for="chkMessage">
|
|
Messages
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="chkPing"
|
|
/>
|
|
<label class="form-check-label" for="chkPing">
|
|
Pings
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input
|
|
checked="true"
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="chkPingAck"
|
|
/>
|
|
<label class="form-check-label" for="chkPingAck">
|
|
Ping-Acks
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="chkBeacon"
|
|
/>
|
|
<label class="form-check-label" for="chkBeacon">
|
|
Beacons
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="btnFilter">
|
|
Refresh
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<hr class="m-0" />
|
|
<! ------messages area ---------------------------------------------------------------------->
|
|
<div
|
|
class="container overflow-auto"
|
|
id="message-container"
|
|
style="height: calc(100% - 150px)"
|
|
>
|
|
<div class="tab-content" id="nav-tabContent"></div>
|
|
<!--<div class="container position-absolute bottom-0">-->
|
|
</div>
|
|
<!-- </div>-->
|
|
<div class="container-fluid mt-2 p-0">
|
|
<input
|
|
type="checkbox"
|
|
id="expand_textarea"
|
|
class="btn-check"
|
|
autocomplete="off"
|
|
/>
|
|
<label
|
|
class="btn d-flex justify-content-center"
|
|
id="expand_textarea_label"
|
|
for="expand_textarea"
|
|
><i
|
|
id="expand_textarea_button"
|
|
class="bi bi-chevron-compact-up"
|
|
></i
|
|
></label>
|
|
|
|
<div class="input-group bottom-0 w-100">
|
|
<!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
|
|
<!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">--><i
|
|
id="emojipickerbutton"
|
|
class="bi bi-emoji-smile m-1"
|
|
style="font-size: 1.5rem; color: grey"
|
|
></i
|
|
><!--</button>-->
|
|
<!--<input class="form-control rounded-pill m-1 p-1" id="chatModuleMessage" placeholder="Message - Send with [Enter]"></input>-->
|
|
|
|
<textarea
|
|
class="form-control m-1 p-1"
|
|
rows="1"
|
|
id="chatModuleMessage"
|
|
placeholder="Message - Send with [Enter]"
|
|
></textarea>
|
|
|
|
<!--<button class="btn btn-sm btn-primary me-2" style="width: 3rem" id="selectFilesButton" type="button"><i class="bi bi-paperclip" style="font-size: 1.2rem; color: white;"></i></button>--><i
|
|
class="bi bi-paperclip m-1"
|
|
style="font-size: 1.5rem; color: grey"
|
|
id="selectFilesButton"
|
|
></i>
|
|
<button
|
|
class="btn btn-sm btn-secondary me-2"
|
|
style="width: 5rem; display: none"
|
|
id="sendMessage"
|
|
type="button"
|
|
>
|
|
<i
|
|
class="bi bi-send"
|
|
style="font-size: 1.2rem; color: white"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- user modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="userModal"
|
|
tabindex="-1"
|
|
aria-labelledby="userModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="userModalLabel">
|
|
My station info
|
|
</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container-fluid">
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Callsign</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Callsign"
|
|
id="user_info_callsign"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Name</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Name"
|
|
id="user_info_name"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Age</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Age"
|
|
id="user_info_age"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Gridsquare</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Gridsquare"
|
|
id="user_info_gridsquare"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Location</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Location"
|
|
id="user_info_location"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Radio</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Radio"
|
|
id="user_info_radio"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Antenna</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Antenna"
|
|
id="user_info_antenna"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Email</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Email"
|
|
id="user_info_email"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Website</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Website"
|
|
id="user_info_website"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
<div class="input-group input-group-sm mb-1">
|
|
<span class="input-group-text w-25">Comments</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Comments"
|
|
id="user_info_comments"
|
|
aria-label="Name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- dx user modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="userModalDX"
|
|
tabindex="-1"
|
|
aria-labelledby="userModalDXLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="userModalDXLabel">Station info</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container-fluid">Future feature... be patient :-)</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- user shared folder -->
|
|
<div
|
|
class="modal fade"
|
|
id="sharedFolderModal"
|
|
tabindex="-1"
|
|
aria-labelledby="sharedFolderModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="sharedFolderModalLabel">
|
|
My Shared folder
|
|
</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container-fluid">Future feature... be patient :-)</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- dx user shared folder -->
|
|
<div
|
|
class="modal fade"
|
|
id="sharedFolderModalDX"
|
|
tabindex="-1"
|
|
aria-labelledby="sharedFolderModalDXLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="sharedFolderModalDXLabel">
|
|
Shared folder
|
|
</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container-fluid">Future feature... be patient :-)</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|