Login finished, Game jam functions next.

2021-04-07 01:54:42 +02:00
parent 45164d2c63
commit ee32bf4e5a
13 changed files with 334 additions and 142 deletions
@@ -3,7 +3,7 @@

 <head>
    <!-- Default page settings -->
-    <title>GameJam Adminpanel</title>
+    <title>Admin Panel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../Images/UFO.png" />
@@ -18,54 +18,76 @@
    <!-- CSS end -->

    <!-- Header scripts -->
-    <script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-    <script src="../Javascript/swipe.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    <!-- Header scripts end -->
 </head>

 <body>
-        <div class="HeaderPanel">
-            <div class="HeaderLeft">
-                <a href="../Index.html">
-                    <i class="fas fa-arrow-left"></i>
-                </a>
-                <h6>
-                    Admin panel
-                </h6>
-            </div>
+
+    <div class="HeaderPanel">
+        <div class="HeaderLeft">
+            <a style="display: inline-block;" href="../Index.html">
+                <i class="fas fa-arrow-left"></i>
+            </a>
        </div>
+        <div class="HeaderTitle">
+            <h2 style="margin-bottom: 0px">
+                Admin Panel
+            </h2>
+        </div>
+    </div>

    <!--Opret game jam-->
    <br />
    <br />
+
    <h3>Administration</h3>
    <h5>Opret Game Jam</h5>
+
    <div>
-        <form id="createGameJam">
+        <form id="createGameJam" method="POST">
            <label for="nameOfGameJam">Indtast navn på Game Jam:</label>
-            <input type="text" name="nameOfGameJam" id="nameOfGameJam">
+            <input type="text" name="newGameJam" id="nameOfGameJam">
+
            <br />
+
            <label for="startDate">Start dato:</label>
            <input type="date" name="startDate" id="startDate">
+
            <br />
+
            <label for="endDate">Slut dato:</label>
            <input type="date" name="endDate" id="endDate">
+
            <br />
+
            <label for="startTime">Start tidspunkt:</label>
-            <input type="time" name="startTime" id="startTime">
+            <input type="time" name="startTime" id="startTime" min="00:00" max="24:00" value="00:00" pattern="[0-9]{2}:[0-9]{2}">
+
            <br />
+
            <label for="endDate">Slut tidspunkt:</label>
-            <input type="time" name="endTime" id="endTime">
+            <input type="time" name="endTime" id="endTime" min="00:00" max="24:00" value="00:00" pattern="[0-9]{2}:[0-9]{2}">
+
            <br />
+
+            <label for="keyWord">Emne / Keywords (Ikke obligatorisk):</label>
+            <input type="text" name="keyWord" id="keyWord">
+
+            <br />
+
            <p>Indsæt en beskrivelse af Gam jammet</p>
+
            <div class="form-floating">
                <textarea class="form-control" name="description" id="description" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
                <label for="floatingTextarea2">Beskrivelse</label>
            </div>
-            <button type="button" name="indsend" id="indsend">Indsend</button>
+
+            <input type="submit" name="newGameJam" id="indsend" value="Indsend">
+            <button type="button" id="testTime">Test</button>
        </form>
    </div>
    <!--Opret game jam slut-->
@@ -73,6 +95,7 @@
    <!-- Body scripts -->
    <script src="../Javascript/minibar.min.js"></script>
    <script src="../Javascript/AddEvent.js"></script>
+    <script src="../Javascript/AddGameJam.js"></script>
    <!-- Body scripts end -->
 </body>

@@ -86,13 +86,13 @@
                Opret admin bruger:
            </h1>
            <p>
-                <input name="dbUsername" class="form-control" placeholder="Brugernavn">
+                <input name="AdminUsername" class="form-control" placeholder="Brugernavn">
            </p>
            <p>
                <input id="adminPassword" type="password" class="form-control" placeholder="Password">
            </p>
            <p>
-                <input id="adminConfirmPassword" type="password" name="dbPassword" class="form-control" placeholder="Gentag password">
+                <input id="adminConfirmPassword" type="password" name="AdminPassword" class="form-control" placeholder="Gentag password">
            </p>
        </div>

@@ -105,7 +105,7 @@
                <a type="button" style="float:right;" id="nextBtn" onclick="nextPrev(1)">
                    <i class="fas fa-arrow-right"></i>
                </a>
-                <input id="submitBtn" type="submit" style="float:right;" name="regGroup" value="Opret Siden" onclick="nextPrev(1)">
+                <input id="submitBtn" type="submit" style="float:right;" name="dbSetup" value="Opret Siden" onclick="nextPrev(1)">
            </div>
        </div>

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="da-DK">

 <head>
    <!-- Default page settings -->
@@ -19,7 +19,6 @@
    <!-- Header scripts -->
    <script src="https://kit.fontawesome.com/57b6c8b971.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-    <script src="Javascript/swipe.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
@@ -73,23 +72,27 @@
                            </ul>
                        </div>
                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link NavLink" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" href="#admin">
-                            Administration
-                        </a>
-                    </li>
                    <li class="nav-item">
                        <a type="button" class="nav-link NavLink" data-bs-toggle="modal" data-bs-target="#RulesModal">
                            Regler
                        </a>
                    </li>
                </ul>
+
+                <a id="NavUser" type="button" class="nav-link" style="display: none; cursor: default; color: rgba(255, 255, 255, .55);">
+                    
+                </a>
+
+                <a id="AdminPanel" type="button" class="nav-link LoginButton" href="/Frontend/Html/AdminPage.html" style="display: none;">
+                    Admin Panel
+                </a>
+
+                <a id="NavLogout" type="button" class="nav-link LoginButton" style="display: none;">
+                    Logout
+                </a>
                <a id="NavLogin" type="button" class="nav-link LoginButton" data-bs-toggle="modal" data-bs-target="#LoginModal" style="display: block;">
                    Login
                </a>
-                <a id="NavUser" type="button" class="nav-link LoginButton" style="display: none;">
-
-                </a>
            </div>
        </div>
    </nav>
@@ -112,6 +115,11 @@
                                    <i class="fas fa-user-plus"></i> Registrer
                                </button>
                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link" id="AdminLoginTab" data-bs-toggle="tab" data-bs-target="#AdminLogin" type="button" role="tab" aria-controls="AdminLogin" aria-selected="false">
+                                    <i class="fas fa-user-secret"></i> Admin Login
+                                </button>
+                            </li>
                            <li style="width: 32px; height: 42px; right: 0; position: absolute;">
                                <button style="padding: 25% !important; border: none; background-color: transparent;" type="button" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fas fa-times CloseIcon"></i>
@@ -129,6 +137,11 @@

                                    <input id="loginUsername" type="text" name="groupName" placeholder="Gruppe navn">
                                    <input id="loginPassword" type="password" name="password" placeholder="Password">
+
+                                    <p id="ErrorText" style="text-align: center; color: red; display: none;">
+                                        Wrong Username Or Password!
+                                    </p>
+
                                    <input id="LoginBtn" type="submit" name="login" value="Login">
                                </form>
                            </div>
@@ -185,6 +198,22 @@
                                    <input id="RegisterBtn" type="submit" name="regGroup" value="Registrer">
                                </form>
                            </div>
+                            <div class="tab-pane fade" id="AdminLogin" role="tabpanel" aria-labelledby="AdminLoginTab">
+                                <form id="AdminLoginForm" method="POST" class="box">
+                                    <h1 class="text-muted">
+                                        Admin Login
+                                    </h1>
+
+                                    <input id="adminUsername" type="text" name="userName" placeholder="Brugernavn">
+                                    <input id="adminPassword" type="password" name="password" placeholder="Password">
+
+                                    <p id="AdminErrorText" style="text-align: center; color: red; display: none;">
+                                        Wrong Username Or Password!
+                                    </p>
+
+                                    <input id="AdminLoginBtn" type="submit" name="aLogin" value="Login">
+                                </form>
+                            </div>
                        </div>
                    </div>
                </div>
@@ -366,6 +395,7 @@
            <!-- Information slut -->

            <hr class="GradientDivider" />
+
            <!--Kalender-->
            <section id="events">
                <h3>Events</h3>
@@ -651,7 +681,6 @@
    <script src="Javascript/minibar.min.js"></script>
    <script src="Javascript/HeaderFunctionality.js"></script>
    <script src="Javascript/LoginFunctionality.js"></script>
-    <script src="Javascript/Lodtrækning.js"></script>
    <!-- Body scripts end -->
 </body>

@@ -1,17 +1,7 @@
-// Admin add event
-$("#indsend").click(function () {
-    let startDate = $("#startDate").val();
-    let endDate = $("#endDate").val();
-    let startTime = $("#startTime").val();
-    let endTime = $("#endTime").val();
-    console.log(`startDate ${startDate} \n
-    endDate ${endDate} \n
-    startTime ${startTime} \n
-    endTime ${endTime}`);
-})
-
-function addEvent() {
-
-
-}
-
+$(document).ready(function() {
+    $("#testTime").click(function () {
+        let startTime = $("#startTime").val();
+        let endTime = $("#endTime").val();
+        console.log(`startTime: ${startTime} \n endTime: ${endTime}`);
+    });
+});
@@ -0,0 +1,32 @@
+$(document).ready(function() {
+
+    $('#createGameJam').submit(function(e) {
+        let URL = 'https://ptsv2.com/t/tzztn-1616799712/post';
+
+        let form = $('#createGameJam')[0];
+        let formData = new FormData(form);
+
+        let id = $('#indsend').attr('name');
+        let value = $('#indsend').val();
+
+        let startTime = $("#startTime").text();
+        let endTime = $("#endTime").text();
+
+        formData.append(id, value);
+        formData.set('startTime', startTime);
+        formData.append('endTime', endTime);
+
+        axios.post(URL, formData, {
+            header: 'multipart/form-data'
+        }).then(res => {
+            if (res.status === 200)
+            {
+                console.log('New Game Jam Created!');
+            }            
+        }).catch(error => {
+            console.log(error.response);
+        });
+
+        e.preventDefault();
+    });
+});
@@ -1,19 +1,28 @@
 $(document).ready(function () {
    // Register Start
    let selectedGameJam;
-    let MemberSize = $('#NUDDisplay').text();
+    let isAdminLoggedIn = false;
    let displayValue = 0;
    let arr = [
        {"id": "-1", "Gamejam": "Vælg aktivt GameJam"}
    ];

+    if (getCookie('userName') != null)
+    {
+        isAdminLoggedIn = true;
+        SwitchNavInfo(true, true);
+    }
+    else if (getCookie('groupName') != null)
+    {
+        isAdminLoggedIn = false;
+        SwitchNavInfo(true);
+    }
+
    // Populate select with options from the database
    axios.get('/Backend/Controllers/GameJam/GetGameJam.php')
    .then(function(res) {
        let resArr = res.data;

-        //console.log(res.data.data);
-
        for(let i = 0; i < res.data.data.length; i++)
        {
            arr.push({
@@ -33,8 +42,8 @@ $(document).ready(function () {
            }
        });
    })
-    .catch(function(err) {
-        console.log(err);
+    .catch(function(error) {
+        console.log(error.response);
    });

    // Remove invalidInput if selected option has been changed
@@ -154,9 +163,12 @@ $(document).ready(function () {
            axios.post(URL, formData, {
                header: 'multipart/form-data'
            }).then(res => {
-                console.log(res);
+                if (res.status === 201)
+                {
+                    SwitchNavInfo(true);
+                }
            }).catch(error => {
-                console.log(error);
+                console.log(error.response);
            });

            e.preventDefault();
@@ -211,19 +223,141 @@ $(document).ready(function () {

        formData.append(id, value);

+        axios.post(URL, formData, {
+            header: 'multipart/form-data'
+        }).then(res => {
+            if (res.status === 200)
+            {
+                isAdminLoggedIn = false;
+                SwitchNavInfo(true);
+            }            
+        }).catch(error => {
+            if (error.response.status === 401)
+            {
+                $('#loginUsername').css({'border-color':'red'});
+                $('#loginPassword').css({'border-color':'red'});
+                $('#ErrorText').css({'display':'block'});
+            }
+            else
+            {
+                console.log(error.response);
+            }
+        });
+
+        e.preventDefault();
+    });
+
+    $('#AdminLoginForm').submit(function(e) {
+        let URL = "/Backend/Controllers/Admin/AdminLogin.php";
+
+        let form = $('#AdminLoginForm')[0];
+        let formData = new FormData(form);
+
+        let id = $('#AdminLoginBtn').attr('name');
+        let value = $('#AdminLoginBtn').val();
+
+        formData.append(id, value);

        axios.post(URL, formData, {
            header: 'multipart/form-data'
        }).then(res => {
            if (res.status === 200)
            {
-                console.log('Logged in');
-            }
+                isAdminLoggedIn = true;
+                SwitchNavInfo(true, true);
+            }            
        }).catch(error => {
-            console.log(error);
+            if (error.response.status === 401)
+            {
+                $('#adminUsername').css({'border-color':'red'});
+                $('#adminPassword').css({'border-color':'red'});
+                $('#AdminErrorText').css({'display':'block'});
+            }
+            else
+            {
+                console.log(error.response);
+            }
        });

        e.preventDefault();
-    })
+    });
+
+    function SwitchNavInfo(isLoggedIn, isAdmin) {
+        if (isLoggedIn)
+        {
+            $('#NavUser').css({'display':'block'});
+            $('#NavUser').text(`Welcome, ${isAdmin ? getCookie('userName') : getCookie('groupName')}!`);
+
+            $('#NavLogin').css({'display':'none'});
+            $('#NavLogout').css({'display':'block'});
+
+            $('#LoginModal').modal('hide');
+        }
+        else
+        {
+            $('#NavUser').css({'display':'none'});
+            $('#NavUser').text(``);
+
+            $('#NavLogin').css({'display':'block'});
+            $('#NavLogout').css({'display':'none'});
+        }
+
+        if (isAdmin === undefined)
+        {
+            return
+        }
+        else
+        {
+            if (isAdmin)
+            {
+                if (isLoggedIn)
+                {
+                    $('#AdminPanel').css({'display':'block'});
+
+                    console.log('Logged In As Admin!');
+                }
+                else
+                {
+                    $('#AdminPanel').css({'display':'none'});
+
+                    console.log('Logged Out As Admin!');
+                }
+            }
+        }
+    }
    // Login end
+
+    // Logout start
+    $('#NavLogout').click(function() {
+        axios.get('/Backend/Controllers/Group/Logout.php').then(res => {
+            if (res.status == 200)
+            {
+                SwitchNavInfo(false, isAdminLoggedIn);
+                isAdminLoggedIn = false;
+            }
+        }).catch(error => {
+            console.log(error.response);
+        });
+    });
+    // Logout end
+
+    function getCookie(name) {
+        // Split cookie string and get all individual name=value pairs in an array
+        var cookieArr = document.cookie.split(";");
+        
+        // Loop through the array elements
+        for(var i = 0; i < cookieArr.length; i++) {
+            var cookiePair = cookieArr[i].split("=");
+            
+            /* Removing whitespace at the beginning of the cookie name
+            and compare it with the given string */
+            if(name == cookiePair[0].trim()) {
+                // Decode the cookie value and return
+                return decodeURIComponent(cookiePair[1]);
+            }
+        }
+        
+        // Return null if not found
+        return null;
+    }
 });
@@ -134,45 +134,25 @@ $('#adminConfirmPassword').on('change keyup paste', function() {
 });

 $('#regForm').submit(function(e) {
-    e.preventDefault();
-    $('#DBType').val($('#dbSelect option:selected').val());
-    
+    $('#DBType').val($('#dbSelect option:selected').val());    

    let form = $('#regForm')[0];
+    console.log(form);
    let formData = new FormData(form);
+    console.log(formData);

    let id = $('#submitBtn').attr('name');
    let value = $('#submitBtn').val();

    formData.append(id, value);

-    console.log(form);
-    console.log(formData);
-
-
-    $.ajax({
-        url : 'https://ptsv2.com/t/tzztn-1616799712/post',
-        type: 'POST',
-        data : formData,
-        processData: false,
-        contentType: false,
-        crossDomain: true,
-        success:function(data, textStatus, jqXHR) {
-            console.log(textStatus);
-            console.log(data)
-        },
-        error: function(jqXHR, textStatus, errorThrown) {
-            console.log(textStatus);
-            console.log(jqXHR);
-            console.log(errorThrown);     
-        }
+    axios.post('https://ptsv2.com/t/tzztn-1616799712/post', formData, {
+        header: 'multipart/form-data'
+    }).then(res => {
+        console.log(res)
+    }).catch(error => {
+        console.log(error.response);
    });
-    // axios.post(', formData, {
-    //     header: 'multipart/form-data'
-    // }).then(res => {
-    //     console.log(`data: ${res}`)
-    // }).catch(error => {
-    //     console.log(error);
-    // });
+    
    e.preventDefault();
 });
@@ -22,6 +22,9 @@ body{

 .HeaderTitle {
    text-align: center;
+    display: inline-block; 
+    font-weight: bold; 
+    margin-bottom: 0;
 }

 .HeaderLeft {
@@ -29,15 +32,14 @@ body{
 }

 /*Create game jam*/
-
 #createGameJam{
   justify-content: center;
   display: grid;
 }
+
 #createGameJam input{
    display: block;
    position: center;
-   
 }

 #startTime {
@@ -72,7 +74,8 @@ body{
    filter: invert(90%);
 }

-#nameOfGameJam {
+#nameOfGameJam,
+#keyWord {
    background-color: rgb(18, 18, 18);
    color: rgba(255, 255, 255, .55);
    border-radius: 15px;
@@ -417,9 +417,11 @@ a:hover {

 .box #username,
 .box #loginUsername,
+.box #adminUsername,
 .box #pass1,
 .box #pass2,
 .box #loginPassword,
+.box #adminPassword,
 .box #GameJamSelect {
    border: 0;
    background: none;
@@ -515,17 +517,21 @@ a:hover {

 .box #username:focus,
 .box #loginUsername:focus,
+.box #adminUsername:focus,
 .box #pass1:focus,
 .box #pass2:focus,
-.box #loginPassword:focus {
+.box #loginPassword:focus,
+.box #adminPassword:focus {
    width: 300px;
 }

 .box #username:hover,
 .box #loginUsername:hover,
+.box #adminUsername:hover,
 .box #pass1:hover,
 .box #pass2:hover,
-.box #loginPassword:hover {
+.box #loginPassword:hover,
+.box #adminPassword:hover {
    color: rgba(255, 255, 255, .75);
 }