User Settings : New frontend part

Settings: - Updated the events for the drag and drop image - Added the categories for the user settings Locales: - Changed the service for the IP location check Model (User): - Renamed the user model file to user.mdl
fet1sov · Apr 23, 2024 · a2bb4e4 · a2bb4e4
1 parent 22385a4
commit a2bb4e4
Show file tree

Hide file tree

Showing 8 changed files with 401 additions and 100 deletions.
diff --git a/www/_styles/_css/styles.css b/www/_styles/_css/styles.css
@@ -7,6 +7,7 @@
     --secondary-color-02: #a0a0a0;
     --secondary-color-03: #000000;
     --secondary-color-04: #F0F0F0;
+    --secondary-color-05: #cecece;
 }
 
 @font-face {
@@ -38,6 +39,17 @@
     }
 }
 
+@keyframes appearAnimation-Y {
+    from {
+        margin-top: -20px;
+        opacity: 0;
+    }
+    to {
+        margin-top: 0;
+        opacity: 1;
+    }
+}
+
 * {
     transition: 0.5s all;
     scroll-behavior: smooth;
@@ -298,6 +310,63 @@ img.small-avatar {
     border-radius: 10px;
 }
 
+.small-primary-button {
+    display: flex;
+    justify-content: center;
+
+    background-color: var(--primary-color-01);
+    color: var(--secondary-color-01);
+
+    border-radius: 10px;
+
+    padding: 10px;
+    width: 100%;
+
+    user-select: none;
+    outline: none;
+
+    box-shadow: none;
+    cursor: pointer;
+    border: none;
+}
+
+.small-primary-button:hover {
+    background-color: var(--primary-color-02);
+}
+
+.small-primary-button:focus {
+    outline: none;
+}
+
+.round-button {
+    display: flex;
+    justify-content: center;
+
+    background-color: var(--primary-color-01);
+    color: var(--secondary-color-01);
+
+    border-radius: 50%;
+
+    padding: 10px;
+
+    user-select: none;
+}
+
+.round-button:hover {
+    background-color: var(--primary-color-02);
+}
+
+.primary-link-button {
+    padding: 10px;
+    user-select: none;
+
+    text-align: center;
+}
+
+.primary-link-button:hover {
+    color: var(--primary-color-01);
+}
+
 /* Small Desktop */
 @media (width <= 1024px) {
     body {

diff --git a/www/backend/models/user.php → www/backend/models/user.mdl.php b/www/backend/models/user.php → www/backend/models/user.mdl.php
@@ -74,7 +74,7 @@ public function saveData() : void
     {
         $stmt = $GLOBALS["dbAdapter"]->prepare("UPDATE `user` SET `username`=?, `password`=?, `company`=?, `email`=? WHERE `id`=?");
         $stmt->bind_param(
-            'ssss',
+            'ssssi',
             $this->username,
             $this->password,
             $this->company,

diff --git a/www/backend/routes/user/user.ctrl.php b/www/backend/routes/user/user.ctrl.php
@@ -1,36 +1,60 @@
 <?php
 
-if ($_SERVER['REQUEST_METHOD'] == "POST")
-{
-
-} else {
-    if (isset($params['category']))
-    {
-        switch($params['category'])
-        {
-            case "logout": {
+if (!isset($_SESSION["userData"])) {
+    header('Location: /');
+}
+
+if (isset($params['category'])) {
+    switch ($params['category']) {
+        case "logout": {
                 session_destroy();
                 header('Location: /');
                 break;
             }
 
-            case "settings": {
-                Renderer::includeTemplate("frontend/components/layout.php", [
-                    "layout_path" => ROUTE_ROOT . "user/user.view.php",
-                    "layout_data" => [
-                        "category" => $params['category'],
-                        "footerShow" => false
-                    ]
-                ]);
+        case "settings": {
+                $userData = unserialize($_SESSION["userData"]);
+
+                if ($_SERVER['REQUEST_METHOD'] == "POST") {
+                    $userData->setCompany(isset($_POST["companyName"]) ? $_POST["companyName"] : $userData->getCompany());
+                    $userData->saveData();
+
+                    Renderer::includeTemplate("frontend/components/layout.php", [
+                        "layout_path" => ROUTE_ROOT . "user/user.view.php",
+                        "layout_data" => [
+                            "category" => $params['category'],
+                            "message" => [
+                                "type" => "success"
+                            ],
+                            "footerShow" => false,
+                            "userData" => [
+                                "email" => $userData->getEmail(),
+                                "company" => $userData->getCompany()
+                            ]
+                        ]
+                    ]);
+
+                } else {
+                    Renderer::includeTemplate("frontend/components/layout.php", [
+                        "layout_path" => ROUTE_ROOT . "user/user.view.php",
+                        "layout_data" => [
+                            "category" => $params['category'],
+                            "footerShow" => false,
+                            "userData" => [
+                                "email" => $userData->getEmail(),
+                                "company" => $userData->getCompany()
+                            ]
+                        ]
+                    ]);
+                }
                 break;
             }
-        }
-    } else {
-        Renderer::includeTemplate("frontend/components/layout.php", [
-            "layout_path" => ROUTE_ROOT . "user/user.view.php",
-            "layout_data" => [
-                "footerShow" => false
-            ]
-        ]);
     }
+} else {
+    Renderer::includeTemplate("frontend/components/layout.php", [
+        "layout_path" => ROUTE_ROOT . "user/user.view.php",
+        "layout_data" => [
+            "footerShow" => false
+        ]
+    ]);
 }
diff --git a/www/backend/routes/user/user.view.php b/www/backend/routes/user/user.view.php
@@ -1,11 +1,4 @@
-<link href="_styles/_css/user.css" rel="stylesheet"/>
-
-<?php
-    if (!isset($_SESSION["userData"]))
-    {
-        header('Location: /');
-    }
-?>
+<link href="_styles/_css/user.css" rel="stylesheet" />
 
 <style>
     section.user-info {
@@ -57,94 +50,87 @@
         const profileBlock = document.querySelector("div#profileBlock div#profileInfo");
         const welcomeBlock = document.querySelector("div#profileBlock div#welcomeMessage")
 
-        setInterval(() => {
-            profileBlock.style.display = "block";
-            welcomeBlock.remove();
-        }, 2000);
+        if (profileBlock) {
+            setInterval(() => {
+                profileBlock.style.display = "block";
+                welcomeBlock.remove();
+            }, 2000);
+        }
     });
 </script>
 
-<?php if (isset($category)) { 
-        switch($category) { 
-            case "settings": { ?>
-
+<?php if (isset($category)) {
+    switch ($category) {
+        case "settings": { ?>
             <style>
-                .avatars-block {
+                .centerized-block {
                     display: flex;
-                    justify-content: space-between;
-
-                    margin-bottom: auto;
-                    align-items: end;
+                    flex-direction: column;
+                    justify-content: center;
                 }
 
-                .avatar-preview {
-                    border-radius: 10px;
+                .settings-navigation-block {
+                    margin-bottom: 20px;
                 }
-
-                #smallAvatarPic {
-                    width: 48px;
-                    height: 48px;
+
+                .settings-navigation-block ul {
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: row;
                 }
 
-                #middleAvatarPic {
-                    width: 64px;
-                    height: 64px;
+                .settings-navigation-block ul li {
+                    user-select: none;
+                    margin-right: 10px;
                 }
 
-                #bigAvatarPic {
-                    width: 128px;
-                    height: 128px;
+                .settings-navigation-block ul li:hover {
+                    color: var(--primary-color-03);
                 }
 
-                div.settings-section-block.avatars {
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: column;
-                }
-
-                .small-category-block {
-                    margin-bottom: 10px;
+                section {
+                    height: unset;
+                    padding-top: 100px;
                 }
-
             </style>
 
-            <script>
-
-            </script>
-
-            <section>
-                <form method="post">
-                    <div class="settings-section-block avatars">
-                        <div class="avatars-block">
-                            <img id="smallAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
-                            <img id="middleAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
-                            <img id="bigAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
-                        </div>
-
-                        <div class="avatars-block small-category-block">
-                            <p>48px</p>
-                            <p>64px</p>
-                            <p>128px</p>
-                        </div>
-
-                        <p><strong><?= $GLOBALS["locale"]["userPage"]["settings"]["avatar"]["placeholder"] ?></strong></p>
-                        <button class="small-primary-button"><?= $GLOBALS["locale"]["buttons"]["upload"] ?></button>
+            <form method="post">
+                <section class="centerized-block">
+                    <div class="settings-navigation-block">
+                        <ul>
+                            <?php foreach($GLOBALS["locale"]["userPage"]["settings"]["settingsNavigation"] as $settingSection) { ?>
+                                <li>
+                                    <?= $settingSection ?>
+                                </li>
+                            <?php } ?>
+                        </ul>
                     </div>
-                </form>
-            </section>
-        <?php } 
-        }
+
+                    <?php
+                    Renderer::includeTemplate("frontend/components/settings/settingsBlock.php", [
+                        "message" => [
+                            "type" => "success"
+                        ],
+                        "userData" => $userData
+                    ]);
+                    break;
+                    ?>
+                </section>
+            </form>
+        <?php
+        } 
+    }
 } else { ?>
     <section class="user-info">
         <div id="profileBlock">
             <div id="welcomeMessage">
                 <?
-                    $time = date("H");
+                $time = date("H");
                 ?>
 
                 <? if ($time < "12") { ?>
                     <h2><?= $GLOBALS["locale"]["userPage"]["greetings"]["goodmorning"] ?><?= unserialize($_SESSION["userData"])->getUsername(); ?></h2>
-                <? } else if ($time >= "12" && $time < "17") { ?>
+                <? } else if ($time >= "12" && $time < "19") { ?>
                     <h2><?= $GLOBALS["locale"]["userPage"]["greetings"]["goodday"] ?><?= unserialize($_SESSION["userData"])->getUsername(); ?></h2>
                 <? } else if ($time >= "19") { ?>
                     <h2><?= $GLOBALS["locale"]["userPage"]["greetings"]["goodnight"] ?><?= unserialize($_SESSION["userData"])->getUsername(); ?></h2>
@@ -162,5 +148,5 @@
                 </div>
             </div>
         </div>
-    <section>
-<?php } ?>
+        <section>
+        <?php } ?>