Contact Requests in admin panel

adminPanel/src/api.js

@@ -118,4 +118,16 @@ export default class API {
     async getVisitors(type, date) {
         return this.apiCall("visitors/stats", { type: type, date: date });
     }
+
+    async fetchContactRequests() {
+        return this.apiCall('contact/fetch');
+    }
+
+    async getContactMessages(id) {
+        return this.apiCall('contact/get', { requestId: id });
+    }
+
+    async sendContactMessage(id, message) {
+        return this.apiCall('contact/respond', { requestId: id, message: message });
+    }
 };

adminPanel/src/elements/footer.js

@@ -5,7 +5,7 @@ export default function Footer() {
     return (
         <footer className={"main-footer"}>
             Theme: <strong>Copyright © 2014-2019 <a href={"http://adminlte.io"}>AdminLTE.io</a>. <b>Version</b> 3.0.3</strong>&nbsp;
-            CMS: <strong><a href={"https://git.romanh.de/Projekte/web-base"}>WebBase</a></strong>. <b>Version</b> 1.2.0
+            CMS: <strong><a href={"https://git.romanh.de/Projekte/web-base"}>WebBase</a></strong>. <b>Version</b> 1.2.6
         </footer>
     )
 }

adminPanel/src/elements/header.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import Icon from "./elements/icon";
+import Icon from "./icon";
 import {useState} from "react";
-import {getPeriodString} from "./global";
+import {getPeriodString} from "../global";
 import {Link} from "react-router-dom";
 
 export default function Header(props) {

adminPanel/src/elements/sidebar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from "./elements/icon";
+import Icon from "./icon";
 import {Link, NavLink} from "react-router-dom";
 
 export default function Sidebar(props) {
@@ -8,6 +8,7 @@ export default function Sidebar(props) {
         showDialog: props.showDialog || function() {},
         api: props.api,
         notifications: props.notifications || [ ],
+        contactRequests: props.contactRequests || [ ],
         filesPath: props.filesPath || null
     };
 
@@ -46,6 +47,10 @@ export default function Sidebar(props) {
             "name": "Logs & Notifications",
             "icon": "file-medical-alt"
         },
+        "contact": {
+            "name": "Contact Requests",
+            "icon": "comments"
+        },
         "help": {
             "name": "Help",
             "icon": "question-circle"
@@ -58,6 +63,15 @@ export default function Sidebar(props) {
         menuItems["logs"]["badge"] = { type: "warning", value: numNotifications };
     }
 
+    console.log("sidebar", parent.contactRequests);
+    let numUnreadContactMessages = 0;
+    for (const contactRequest of parent.contactRequests) {
+        numUnreadContactMessages += contactRequest.unread;
+    }
+    if (numUnreadContactMessages > 0) {
+        menuItems["contact"]["badge"] = { type: "info", value: numUnreadContactMessages };
+    }
+
     let li = [];
     for (let id in menuItems) {
         let obj = menuItems[id];

adminPanel/src/index.js

@@ -3,24 +3,25 @@ import ReactDOM from 'react-dom';
 import './include/adminlte.min.css';
 import './include/index.css';
 import API from './api.js';
-import Header from './header.js';
+import Header from './elements/header.js';
-import Sidebar from './sidebar.js';
+import Sidebar from './elements/sidebar.js';
 import UserOverview from './views/users.js';
 import Overview from './views/overview.js'
 import CreateUser from "./views/adduser";
 import Icon from "./elements/icon";
 import Dialog from "./elements/dialog";
 import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
-import View404 from "./404";
+import View404 from "./views/404";
 import Logs from "./views/logs";
 import PageOverview from "./views/pages";
 import HelpPage from "./views/help";
-import Footer from "./footer";
+import Footer from "./elements/footer";
 import EditUser from "./views/edituser";
 import CreateGroup from "./views/addgroup";
 import Settings from "./views/settings";
 import PermissionSettings from "./views/permissions";
 import Visitors from "./views/visitors";
+import ContactRequestOverview from "./views/contact";
 
 class AdminDashboard extends React.Component {
 
@@ -31,12 +32,14 @@ class AdminDashboard extends React.Component {
       loaded: false,
       dialog: { onClose: () => this.hideDialog() },
       notifications: [ ],
+      contactRequests: [ ],
       filesPath: null
     };
   }
 
   onUpdate() {
     this.fetchNotifications();
+    this.fetchContactRequests();
   }
 
   showDialog(message, title, options=["Close"], onOption = null) {
@@ -58,6 +61,16 @@ class AdminDashboard extends React.Component {
     });
   }
 
+  fetchContactRequests() {
+    this.api.fetchContactRequests().then((res) => {
+      if (!res.success) {
+        this.showDialog("Error fetching contact requests: " + res.msg, "Error fetching contact requests");
+      } else {
+        this.setState({...this.state, contactRequests: res.contactRequests });
+      }
+    });
+  }
+
   fetchFilesPath() {
     this.api.getRoutes().then((res) => {
       if (!res.success) {
@@ -87,6 +100,7 @@ class AdminDashboard extends React.Component {
       } else {
         this.fetchNotifications();
         this.fetchFilesPath();
+        this.fetchContactRequests();
         setInterval(this.onUpdate.bind(this), 60*1000);
         this.setState({...this.state, loaded: true});
       }
@@ -107,7 +121,7 @@ class AdminDashboard extends React.Component {
 
     return <Router>
         <Header {...this.controlObj} notifications={this.state.notifications} />
-        <Sidebar {...this.controlObj} notifications={this.state.notifications} filesPath={this.state.filesPath} />
+        <Sidebar {...this.controlObj} notifications={this.state.notifications} contactRequests={this.state.contactRequests} filesPath={this.state.filesPath} />
         <div className={"content-wrapper p-2"}>
           <section className={"content"}>
             <Switch>
@@ -120,6 +134,7 @@ class AdminDashboard extends React.Component {
               }}/>
               <Route path={"/admin/user/permissions"}><PermissionSettings {...this.controlObj}/></Route>
               <Route path={"/admin/group/add"}><CreateGroup {...this.controlObj} /></Route>
+              <Route exact={true} path={"/admin/contact/"}><ContactRequestOverview {...this.controlObj} /></Route>
               <Route path={"/admin/visitors"}><Visitors {...this.controlObj} /></Route>
               <Route path={"/admin/logs"}><Logs {...this.controlObj} notifications={this.state.notifications} /></Route>
               <Route path={"/admin/settings"}><Settings {...this.controlObj} /></Route>

adminPanel/src/views/404.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import {Link, useLocation, useHistory} from "react-router-dom";
-import Icon from "./elements/icon";
+import Icon from "../elements/icon";
 
 export default function View404() {
 

adminPanel/src/views/contact.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import {Link} from "react-router-dom";
+import Alert from "../elements/alert";
+import ReactTooltip from "react-tooltip";
+import {useState} from "react";
+
+export default function ContactRequestOverview(props) {
+
+    let parent = {
+        api: props.api,
+        contactRequests: props.contactRequests || [ ]
+    };
+
+    let [errors, setErrors] = useState([]);
+
+    function removeError(i) {
+        if (i >= 0 && i < errors.length) {
+            let newErrors = errors.slice();
+            newErrors.splice(i, 1);
+            setErrors(newErrors);
+        }
+    }
+
+    console.log("contact site", parent.contactRequests);
+
+    let errorElements = [];
+    for (let i = 0; i < errors.length; i++) {
+        errorElements.push(<Alert key={"error-" + i} onClose={() => removeError(i)} {...errors[i]}/>)
+    }
+
+    let chats = [];
+    for (let i = 0; i < parent.contactRequests.length; i++) {
+        const req = parent.contactRequests[i];
+        chats.push(<div key={"contact-request-" + i}>
+            From: { req.from_name } - { req.from_email }
+            Unread messages: { req.unread }
+        </div>
+        );
+    }
+
+    return <>
+        <div className="content-header">
+            <div className="container-fluid">
+                <div className="row mb-2">
+                    <div className="col-sm-6">
+                        <h1 className="m-0 text-dark">Contact Requests</h1>
+                    </div>
+                    <div className="col-sm-6">
+                        <ol className="breadcrumb float-sm-right">
+                            <li className="breadcrumb-item"><Link to={"/admin/dashboard"}>Home</Link></li>
+                            <li className="breadcrumb-item active">Contact</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className={"content"}>
+            {errorElements}
+            {chats}
+        </div>
+        <ReactTooltip />
+    </>;
+}

adminPanel/src/views/settings.js

@@ -687,7 +687,6 @@ export default class Settings extends React.Component {
     onSendTestMail() {
         this.setState({...this.state, mail: {...this.state.mail, isSending: true}});
 
-        console.log(this.state.mail);
         this.parent.api.sendTestMail(this.state.mail.test_email).then((res) => {
             let alerts = this.state.mail.alerts.slice();
             let newState = {...this.state.mail, isSending: false};

core/Api/ContactAPI.class.php

@@ -236,7 +236,15 @@ namespace Api\Contact {
       $this->lastError = $sql->getLastError();
 
       if ($this->success) {
-        $this->result["contactRequests"] = $res;
+        $this->result["contactRequests"] = [];
+        foreach ($res as $row) {
+          $this->result["contactRequests"][] = array(
+            "uid" => intval($row["uid"]),
+            "from_name" => $row["from_name"],
+            "from_email" => $row["from_email"],
+            "unread" => intval($row["unread"]),
+          );
+        }
       }
 
       return $this->success;