@itutoring/itutoring_application_js_api 1.19.1 → 1.20.0

package/DebugConsole.css

@@ -0,0 +1,89 @@
+#debug-console {
+    position: fixed;
+    cursor: grab;
+    z-index: 1000;
+    top: 0;
+    border: none;
+}
+
+#debug-console:active {
+    opacity: 0.6;
+}
+
+#debug-console:active iframe {
+    pointer-events: none;
+}
+
+#debug-console iframe {
+    border: none;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    background-color: black;
+    animation: showUp 0.3s ease-in-out;
+}
+
+#debug-console>div {
+    background-color: #282e35;
+    user-select: none;
+    height: 30px;
+    border-radius: 10px 10px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    animation: showUp 0.3s ease-in-out;
+}
+
+.debug-console-close {
+    border-radius: 50%;
+    width: 13px;
+    height: 13px;
+    background-color: #ff5f56;
+    margin-right: 10px;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+
+.debug-console-minimize {
+    border-radius: 50%;
+    width: 13px;
+    height: 13px;
+    background-color: #ffbd2e;
+    margin-right: 10px;
+    margin-left: 10px;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+
+.debug-console-close:hover {
+    background-color: #ff3b30;
+}
+
+#debug-console-icon {
+    width: 20px !important;
+    height: 20px !important;
+    margin-left: 10px;
+    cursor: pointer;
+    background-color: #282e35;
+    border-radius: 50% !important;
+    color: white;
+    padding: 0;
+    font-size: 12px;
+    transition: 0.3s;
+}
+
+#debug-console-icon:hover{
+    border-radius: 10%;
+}
+
+
+@keyframes showUp {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

package/debugConsole.js

@@ -0,0 +1,128 @@
+import React, { useEffect } from 'react';
+
+import './DebugConsole.css';
+import APIController from './apiController';
+import { R_KEYs } from './objects/Enums';
+
+export const DebugConsole = () =>
+{
+    const [isVisible, setVisible] = React.useState(false);
+    const [isTestServer, setIsTestServer] = React.useState(false);
+
+    useEffect(() =>
+    {
+        APIController.GetLocalRKey().then((rkey) =>
+        {
+            if (rkey == R_KEYs.r_key_test)
+                setIsTestServer(true);
+        });
+    }, []);
+
+    const width = 600;
+    const height = 400;
+
+    var dragging = false;
+
+    var mouseOffsetX = 0;
+    var mouseOffsetY = 0;
+
+    var dir = { x: 0, y: 0 };
+
+    const setDragging = (state, e) =>
+    {
+        if (state != dragging)
+        {
+            const posX = e.clientX;
+            const posY = e.clientY;
+            var consoleElem = document.getElementById('debug-console');
+            if (!consoleElem)
+                return;
+            const rect = consoleElem.getBoundingClientRect();
+            mouseOffsetX = posX - rect.left;
+            mouseOffsetY = posY - rect.top;
+
+            if (state)
+            {
+                dir.x = posX;
+                dir.y = posY;
+            }
+            else
+            {
+                dir.x = e.clientX - dir.x;
+                dir.y = e.clientY - dir.y;
+            }
+        }
+
+        dragging = state;
+    }
+
+    const updatePosition = (posX, posY) =>
+    {
+        if (!dragging)
+            return;
+        var consoleElem = document.getElementById('debug-console');
+        if (!consoleElem)
+            return;
+
+        consoleElem.style.left = posX - mouseOffsetX + 'px';
+        consoleElem.style.top = posY - mouseOffsetY + 'px';
+    }
+
+    const hasDragged = () =>
+    {
+        return dir.x > 1 || dir.y > 1;
+    }
+
+    window.addEventListener('mousemove', (e) =>
+    {
+        updatePosition(e.clientX, e.clientY);
+    });
+
+    const minimizeToggle = () =>
+    {
+        const iframe = document.getElementById('debug-console-iframe');
+        if (iframe.style.display == 'none')
+            iframe.style.display = '';
+        else
+            iframe.style.display = 'none';
+    }
+
+    if (!isTestServer)
+        return null;
+    return (
+        <>
+            <div id="debug-console">
+                {
+                    isVisible == false ?
+                        <div
+                            onMouseDown={(e) => { setDragging(true, e); }}
+                            onMouseUp={(e) => { setDragging(false, e); }}
+                            onClick={() => { if (!hasDragged()) setVisible(true) }} id='debug-console-icon'></div>
+                        :
+                        <>
+                            <div
+                                onMouseDown={(e) => { setDragging(true, e); }}
+                                onMouseUp={(e) => { setDragging(false, e); }}
+                            >
+                                <div onClick={() => minimizeToggle()} className='debug-console-minimize' />
+                                <div onClick={() => setVisible(false)} className='debug-console-close' />
+                            </div>
+                            <iframe
+                                id='debug-console-iframe'
+                                width={width + "px"}
+                                height={height + "px"}
+                                src="https://test.itutoring.cz/toolkit/lazydebug/"
+                            ></iframe>
+                        </>
+                }
+            </div>
+        </>
+    );
+}
+
+export const InitializeDebugConsole = () =>
+{
+    const debugConsoleContainer = document.createElement('div');
+    document.body.appendChild(debugConsoleContainer);
+    React.render(<DebugConsole />, debugConsoleContainer);
+}

package/index.d.ts

@@ -54,6 +54,8 @@ import InquiryContactInfo from "./objects/InquiryContactInfo";
 import InquiryAdditionalInfo from "./objects/InquiryAdditionalInfo";
 import PlainInquiryInfo from "./objects/PlainInquiryInfo";
 
+import { InitializeDebugConsole } from "./debugConsole";
+
 import
 {
     BookReturn,
@@ -69,6 +71,8 @@ export
 {
     APIController,
     CookiesManager,
+    
+    InitializeDebugConsole,
 
     CustomerAuth,
     CustomerPortal,

package/index.js

@@ -52,6 +52,8 @@ import InquiryContactInfo from "./objects/InquiryContactInfo";
 import InquiryAdditionalInfo from "./objects/InquiryAdditionalInfo";
 import PlainInquiryInfo from "./objects/PlainInquiryInfo";
 
+import { InitializeDebugConsole } from "./debugConsole";
+
 import
 {
     BookReturn,
@@ -68,6 +70,8 @@ export
     APIController,
     CookiesManager,
 
+    InitializeDebugConsole,
+
     CustomerAuth,
     CustomerPortal,
     SubjectManager,
@@ -116,3 +120,5 @@ export
     R_KEYs,
     AuthType
 }
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itutoring/itutoring_application_js_api",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "description": "Javascript API for iTutoring Application",
   "main": "index.js",
   "types": "index.d.ts",