developers@smswithoutborders.com 104 |
105 | 106 |https://github.com/smswithoutborders
109 | 110 | 113 | 114 | 117 |├── .gitignore
├── assets
├── images
│ ├── 90OK.gif
│ ├── swob.png
│ ├── example.png
│ ├── favicon.ico
│ ├── logoicon.png
│ ├── Artboard 9.png
│ ├── favicon (1).ico
│ └── blob-scene-haikei.svg
├── js
│ ├── controller.js
│ └── main.js
└── css
│ └── style.css
├── README.md
├── Dockerfile
├── support.html
├── help.html
├── index.html
├── configs
├── httpd-ssl.conf
├── httpd.conf
└── httpd.ssl.conf
└── LICENSE
/.gitignore:
--------------------------------------------------------------------------------
1 | /.vscode
2 |
--------------------------------------------------------------------------------
/assets/images/90OK.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/90OK.gif
--------------------------------------------------------------------------------
/assets/images/swob.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/swob.png
--------------------------------------------------------------------------------
/assets/images/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/example.png
--------------------------------------------------------------------------------
/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/favicon.ico
--------------------------------------------------------------------------------
/assets/images/logoicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/logoicon.png
--------------------------------------------------------------------------------
/assets/images/Artboard 9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/Artboard 9.png
--------------------------------------------------------------------------------
/assets/images/favicon (1).ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smswithoutborders/RelaySMS-Telemetry-FE/HEAD/assets/images/favicon (1).ico
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SMSWithoutBorders-Telemetry-Front-End
2 |
3 |
4 | This is a tool for SMSWithoutBorders visual data analysis.
5 |
6 | ## [See Live](https://smswithoutborders.com:8080/)
7 |
8 | ## Tools
9 | 1. [Google Charts](https://developers.google.com/chart)
10 | 2. [Any Chart Map](https://www.anychart.com/)
11 |
12 | ## Licensing
13 | This project is licensed under the [GNU General Public License v3.0](LICENSE).
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM httpd:2.4 as apache
2 | WORKDIR /usr/local/apache2
3 |
4 | # production build with ssl
5 | FROM apache as production
6 | # copy custom apache config with ssl enabled
7 | COPY configs/httpd.ssl.conf ./conf/httpd.conf
8 | COPY configs/httpd-ssl.conf ./conf/extra/httpd-ssl.conf
9 | COPY . ./htdocs
10 |
11 | EXPOSE 443
12 |
13 | # dev build without ssl
14 | FROM apache as development
15 | # copy custom apache config
16 | COPY configs/httpd.conf ./conf/httpd.conf
17 | COPY . ./htdocs
18 |
19 | EXPOSE 80
--------------------------------------------------------------------------------
/assets/images/blob-scene-haikei.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/js/controller.js:
--------------------------------------------------------------------------------
1 | const baseUrl = "https://vault.smswithoutborders.com/v3";
2 |
3 | window.onload = () => {
4 | let getFormat = () => {
5 | let result;
6 | let format = document.getElementsByName("format");
7 |
8 | for (let i = 0; i < format.length; i++) {
9 | if (format[i].checked) {
10 | result = format[i].value;
11 | break;
12 | }
13 | }
14 |
15 | return result;
16 | };
17 |
18 | let checkDate = () => {
19 | if (start_date.value == "") {
20 | start_date.value = end_date.value;
21 | } else if (end_date.value == "") {
22 | end_date.value = start_date.value;
23 | }
24 |
25 | return;
26 | };
27 |
28 | document.getElementById("mapping").style.display = "none";
29 |
30 | checkDate();
31 | let format_value = getFormat();
32 |
33 | if (format_value == "month" || format_value == "day") {
34 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
35 | fetchData(URL, format_value, type.value);
36 | } else {
37 | let today = new Date();
38 | let dd = String(today.getDate()).padStart(2, "0");
39 | let mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
40 | let yyyy = today.getFullYear();
41 |
42 | today = yyyy + "-" + mm + "-" + dd;
43 |
44 | // Default chart
45 | start_date.value = today;
46 | end_date.value = today;
47 | format_month.checked = true;
48 | type.value = "available";
49 | format_value = "month";
50 |
51 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
52 | fetchData(URL, format_value, type.value);
53 | }
54 |
55 | format_month.addEventListener("click", () => {
56 | checkDate();
57 | let format_value = getFormat();
58 |
59 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
60 | fetchData(URL, format_value, type.value);
61 | });
62 |
63 | format_day.addEventListener("click", () => {
64 | checkDate();
65 | let format_value = getFormat();
66 |
67 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
68 | fetchData(URL, format_value, type.value);
69 | });
70 |
71 | type.addEventListener("change", () => {
72 | checkDate();
73 | let format_value = getFormat();
74 |
75 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
76 | fetchData(URL, format_value, type.value);
77 | });
78 |
79 | start_date.addEventListener("change", () => {
80 | checkDate();
81 | let format_value = getFormat();
82 |
83 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
84 | fetchData(URL, format_value, type.value);
85 | });
86 |
87 | end_date.addEventListener("change", () => {
88 | checkDate();
89 | let format_value = getFormat();
90 |
91 | const URL = `${baseUrl}/entities?start=${start_date.value}&end=${end_date.value}&type=${type.value}&format=${format_value}`;
92 | fetchData(URL, format_value, type.value);
93 | });
94 | };
95 |
96 | let arrow = document.querySelectorAll(".arrow");
97 | for (var i = 0; i < arrow.length; i++) {
98 | arrow[i].addEventListener("click", (e) => {
99 | let arrowParent = e.target.parentElement.parentElement; //selecting main parent of arrow
100 | arrowParent.classList.toggle("showMenu");
101 | });
102 | }
103 | let sidebar = document.querySelector(".sidebar");
104 | let sidebarBtn = document.querySelector(".bx-menu");
105 | sidebarBtn.addEventListener("click", () => {
106 | sidebar.classList.toggle("close");
107 | });
108 |
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #181818;
3 | width: 99%;
4 | }
5 |
6 | .rest {
7 | height: 200px !important;
8 | overflow-y: auto;
9 | }
10 |
11 | .footer a{
12 | text-decoration: none;
13 | color: white;
14 | }
15 |
16 | #download {
17 | font-size: 30px;
18 | }
19 |
20 | .mapouter {
21 | height: 90%;
22 | }
23 |
24 | /* Map pointer */
25 | .refresh,
26 | .pointclick {
27 | cursor: pointer;
28 | }
29 |
30 | .pointclick:hover {
31 | cursor: pointer;
32 | background-color: #1160b4;
33 | }
34 |
35 | .textsmall {
36 | font-size: 12px;
37 | }
38 |
39 | .card2,
40 | .card1 {
41 | background-color: #212121;
42 | padding-top: 20px;
43 | }
44 |
45 | .icon1 {
46 | background-color: #41f3263f;
47 | border-radius: 50%;
48 | width: 50px;
49 | height: 50px;
50 | padding: 5px;
51 | display: block;
52 | margin-left: auto;
53 | margin-right: auto;
54 | }
55 |
56 | .icon2 {
57 | background-color: #b226f33f;
58 | border-radius: 50%;
59 | width: 50px;
60 | height: 50px;
61 | padding: 5px;
62 | display: block;
63 | margin-left: auto;
64 | margin-right: auto
65 | }
66 |
67 | .bigbox2,
68 | .bigbox {
69 | background-color: #212121;
70 | height: 250px !important;
71 | margin-right: 20px;
72 | padding: 10px;
73 | }
74 |
75 | .smallbox2,
76 | .smallbox {
77 | background-color: #212121;
78 | height: 250px !important;
79 | margin-left: 10px;
80 | padding: 10px;
81 | }
82 |
83 | .main {
84 | margin-left: 59px;
85 | }
86 |
87 |
88 | /* Side Nav */
89 | * {
90 | margin: 0;
91 | padding: 0;
92 | box-sizing: border-box;
93 | font-family: 'Poppins', sans-serif;
94 | }
95 |
96 | .sidebar {
97 | position: fixed;
98 | top: 0;
99 | left: 0;
100 | height: 100%;
101 | width: 260px;
102 | background: #212121;
103 | z-index: 100;
104 | transition: all 0.5s ease;
105 | }
106 |
107 | .sidebar.close {
108 | width: 78px;
109 | }
110 |
111 | .sidebar .logo-details {
112 | height: 60px;
113 | width: 100%;
114 | display: flex;
115 | align-items: center;
116 | }
117 |
118 | .sidebar .logo-details i {
119 | font-size: 30px;
120 | color: #fff;
121 | height: 50px;
122 | min-width: 78px;
123 | text-align: center;
124 | line-height: 50px;
125 | }
126 |
127 | .sidebar .logo-details .logo_name {
128 | font-size: 22px;
129 | color: #fff;
130 | font-weight: 600;
131 | transition: 0.3s ease;
132 | transition-delay: 0.1s;
133 | }
134 |
135 | .sidebar.close .logo-details .logo_name {
136 | transition-delay: 0s;
137 | opacity: 0;
138 | pointer-events: none;
139 | }
140 |
141 | .sidebar .nav-links {
142 | height: 100%;
143 | padding: 30px 0 150px 0;
144 | overflow: auto;
145 | }
146 |
147 | .sidebar.close .nav-links {
148 | overflow: visible;
149 | }
150 |
151 | .sidebar .nav-links::-webkit-scrollbar {
152 | display: none;
153 | }
154 |
155 | .sidebar .nav-links li {
156 | position: relative;
157 | list-style: none;
158 | transition: all 0.4s ease;
159 | }
160 |
161 | .sidebar .nav-links li:hover {
162 | background: #181818;
163 | }
164 |
165 | .sidebar .nav-links li .iocn-link {
166 | display: flex;
167 | align-items: center;
168 | justify-content: space-between;
169 | }
170 |
171 | .sidebar.close .nav-links li .iocn-link {
172 | display: block
173 | }
174 |
175 | .sidebar .nav-links li i {
176 | height: 50px;
177 | min-width: 78px;
178 | text-align: center;
179 | line-height: 50px;
180 | color: #fff;
181 | font-size: 20px;
182 | cursor: pointer;
183 | transition: all 0.3s ease;
184 | }
185 |
186 | .sidebar .nav-links li.showMenu i.arrow {
187 | transform: rotate(-180deg);
188 | }
189 |
190 | .sidebar.close .nav-links i.arrow {
191 | display: none;
192 | }
193 |
194 | .sidebar .nav-links li a {
195 | display: flex;
196 | align-items: center;
197 | text-decoration: none;
198 | }
199 |
200 | .sidebar .nav-links li a .link_name {
201 | font-size: 18px;
202 | font-weight: 400;
203 | color: #fff;
204 | transition: all 0.4s ease;
205 | }
206 |
207 | .sidebar.close .nav-links li a .link_name {
208 | opacity: 0;
209 | pointer-events: none;
210 | }
211 |
212 | .sidebar .nav-links li .sub-menu {
213 | padding: 6px 6px 14px 80px;
214 | margin-top: -10px;
215 | background: #000000;
216 | display: none;
217 | }
218 |
219 | .sidebar .nav-links li.showMenu .sub-menu {
220 | display: block;
221 | }
222 |
223 | .sidebar .nav-links li .sub-menu a {
224 | color: #fff;
225 | font-size: 15px;
226 | padding: 5px 0;
227 | white-space: nowrap;
228 | opacity: 0.6;
229 | transition: all 0.3s ease;
230 | }
231 |
232 | .sidebar .nav-links li .sub-menu a:hover {
233 | opacity: 1;
234 | }
235 |
236 | .sidebar.close .nav-links li .sub-menu {
237 | position: absolute;
238 | left: 100%;
239 | top: -10px;
240 | margin-top: 0;
241 | padding: 10px 20px;
242 | border-radius: 0 6px 6px 0;
243 | opacity: 0;
244 | display: block;
245 | pointer-events: none;
246 | transition: 0s;
247 | }
248 |
249 | .sidebar.close .nav-links li:hover .sub-menu {
250 | top: 0;
251 | opacity: 1;
252 | pointer-events: auto;
253 | transition: all 0.4s ease;
254 | }
255 |
256 | .sidebar .nav-links li .sub-menu .link_name {
257 | display: none;
258 | }
259 |
260 | .sidebar.close .nav-links li .sub-menu .link_name {
261 | font-size: 18px;
262 | opacity: 1;
263 | display: block;
264 | }
265 |
266 | .sidebar .nav-links li .sub-menu.blank {
267 | opacity: 1;
268 | pointer-events: auto;
269 | padding: 3px 20px 6px 16px;
270 | opacity: 0;
271 | pointer-events: none;
272 | }
273 |
274 | .sidebar .nav-links li:hover .sub-menu.blank {
275 | top: 50%;
276 | transform: translateY(-50%);
277 | }
278 |
279 | .home-section {
280 | position: relative;
281 | height: 100%;
282 | left: 260px;
283 | width: calc(100% - 260px);
284 | transition: all 0.5s ease;
285 | }
286 |
287 | .sidebar.close~.home-section {
288 | left: 78px;
289 | width: calc(100% - 78px);
290 | }
291 |
292 | .home-section .home-content {
293 | height: 100%;
294 | /* display: flex; */
295 | align-items: center;
296 | }
297 |
298 | .home-section .home-content .bx-menu,
299 | .home-section .home-content .text {
300 | color: #11101d;
301 | font-size: 35px;
302 | }
303 |
304 | .home-section .home-content .bx-menu {
305 | margin: 0 15px;
306 | cursor: pointer;
307 | }
308 |
309 | .home-section .home-content .text {
310 | font-size: 26px;
311 | font-weight: 600;
312 | }
313 |
314 | @media (max-width: 900px) {
315 | .main {
316 | margin: 20px;
317 |
318 | }
319 | }
--------------------------------------------------------------------------------
/support.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
developers@smswithoutborders.com 104 |
105 | 106 |https://github.com/smswithoutborders
109 | 110 | 113 | 114 | 117 |This is an open source tool used to monitor 98 | SMSWithoutBorders statistics.
99 | 100 |We use this data to provide and improve SMSWithoutBorders.
101 |
106 | Type Category
107 | Signed-up Users - See number of sign ups
108 | Available Users - See number of all available users
109 | Published - See the total number of all messages sent using SMSWithoutBorders
110 |
113 | Filters
114 | Month - See all data in months format
115 | Day - See all data in days format
116 |
119 | Date
120 | Start Date - Pick the date you want the data to fetch from
121 | End Date - Pick the date you want the data to end
122 | Example - To see data for just January and Feburary
123 |
124 |
129 | © 2023 - SMSWithoutBorders . 130 |
131 |TOTAL ${headers[1]}
`; 181 | 182 | document.getElementById("total").innerHTML = `TOTAL
106 |COUNTRY TOTAL
121 |