Added frond-end and needed get calls.

permissions_control_panel/src/components/addpermission/AddPermission.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const AddPermission= ({onAddPermission}) => {
+        return (
+            <div className='ph3 dib'>
+                <a className="f6 link dim ph3 pv2 mb2 dib white bg-light-purple" href="#0"
+                onClick={()=> onAddPermission()}>Add Permission</a>
+            </div>
+         );
+}
+
+export default AddPermission;

permissions_control_panel/src/components/adduser/AddUser.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const AddUser = ({onAddUser}) => {
+        return (
+            <div className='ph3 dib'>
+                <a className="f6 link dim ph3 pv2 mb2 dib white bg-purple" href="#0"
+                onClick={()=> onAddUser()}>Add User To Group</a>
+            </div>
+         );
+}
+
+export default AddUser;

permissions_control_panel/src/components/cleargroup/ClearGroup.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ClearGroup = ({onClearGroup}) => {
+        return (
+            <div className='ph3 dib'>
+                <a className="f6 link dim ph3 pv2 mb2 dib white bg-hot-pink" href="#0"
+                onClick={()=>onClearGroup()}>Clear Group</a>
+            </div>
+         );
+}
+
+export default ClearGroup;

permissions_control_panel/src/components/clearpermission/ClearPermission.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ClearPermission =({onClearPerm}) => {
+        return (
+            <div className='ph3 dib'>
+                <a className="f6 link dim ph3 pv2 mb2 dib white bg-dark-pink" href="#0"
+                onClick={()=>onClearPerm()}>Clear Permissions</a>
+            </div>
+         );
+}
+
+export default ClearPermission;

permissions_control_panel/src/components/grouplist/GroupList.css

@@ -0,0 +1,17 @@
+s {
+    text-decoration: none;
+}
+.whbg {
+    background: white;
+}
+.wht {
+    color: white;
+}
+.scroll {
+    max-height:150px;
+    overflow:auto;
+}
+.not-und {
+    text-decoration: none;
+}
+

permissions_control_panel/src/components/grouplist/GroupList.js

@@ -0,0 +1,76 @@
+import React, {Component} from 'react';
+import './GroupList.css';
+
+class GroupList extends Component {
+    constructor (props) {
+        super (props);
+        this.state = {
+            groups: []
+        }
+    }
+    componentDidMount () {
+        fetch('http://localhost:3000/listgroupusers')
+        .then (response => response.json())
+        .then( response => { 
+            //Changing received data to suitable form
+            let group=[
+                {
+                groupname: response[0].groupname,
+                users: [response[0].username]
+                }
+            ];
+            let j=0;
+            for (let i=1; i<response.length; i++) {
+                if(response[i].groupname.toLowerCase()===response[i-1].groupname.toLowerCase()) {
+                    group[j].users.push(response[i].username);
+                }
+                else {
+                    group.push({
+                        groupname: response[i].groupname,
+                        users: [response[i].username]
+                    });
+                    j++;
+                }
+            }
+            this.setState( {groups: group});
+        })
+        .catch (err => console.log(err));
+    }
+    //Function that changes received data to list items 
+    makeItems = (group, selectGroup) => {
+       return (
+            <ul className="list ph3 ph5-ns pv4 whbg scroll">
+                 {group.map( (item, index) => 
+                    <li key={index} className="db mr2">
+                        <a href="#0" key={index*10} 
+                        onClick={()=> selectGroup(item.groupname)}
+                        className="f6 f5-ns b db pa2 link dim mid-gray not-und">
+                            <s key={index*100}>{item.groupname}</s>
+                            {item.users.map( (user, index2) => {
+                                if(user.length!==0) {
+                                    return <s key={index2}>, {user}</s>
+                                }
+                                else {
+                                    return '';
+                                }
+                             }
+                            )}
+                        </a>
+                    </li>
+                 )}
+            </ul>
+            );
+    }
+    
+    render () {
+        const {selectGroup} = this.props;
+        return (
+            <div className="dib">
+                <h3 className="wht">List of Groups with all Users</h3>
+                {this.makeItems(this.state.groups, selectGroup)}
+            </div>
+         );
+    }
+}
+
+export default GroupList;

permissions_control_panel/src/components/permissionlist/PermissionList.css

@@ -0,0 +1,13 @@
+s {
+    text-decoration: none;
+}
+.whbg {
+    background: white;
+}
+.wht {
+    color: white;
+}
+.scroll {
+    max-height:150px;
+    overflow:auto;
+}

permissions_control_panel/src/components/permissionlist/PermissionList.js

@@ -0,0 +1,172 @@
+import React, {Component} from 'react';
+import './PermissionList.css';
+
+class PermissionList extends Component {
+    constructor (props) {
+        super (props);
+        this.state = {
+            groupswperm: [],
+            userswperm: []
+        }
+    }
+    componentDidMount () {
+        //Getting data for groups and all associated permissions 
+        fetch('http://localhost:3000/listgrouppermissions')
+        .then (response => response.json())
+        .then( response => { 
+            let groups=[
+                {
+                groupname: response[0].groupname,
+                permissions: [
+                            { object: response[0].objname,
+                              type: response[0].type  
+                             }
+                           ]
+                }
+            ];
+            let j=0;
+            for (let i=1; i<response.length; i++) {
+                if(response[i].groupname.toLowerCase()===response[i-1].groupname.toLowerCase()) {
+                    if(response[i].objname !==null) {
+                        groups[j].permissions.push( 
+                            {   object: response[i].objname,
+                                type: response[i].type  
+                            }
+                        );
+                    }
+                }
+                else {
+                    if (response[i].objname !==null) {
+                        groups.push({
+                            groupname: response[i].groupname,
+                            permissions: [
+                                { object: response[i].objname,
+                                  type: response[i].type  
+                                 }
+                               ]
+                        });
+                        j++;
+                    }
+                    else if (response[i].objname ===null) {
+                        groups.push({
+                            groupname: response[i].groupname,
+                            permissions: []
+                        });
+                        j++;
+                    }
+                   
+                }
+
+            }
+            this.setState( {groupswperm: groups});
+        })
+        .catch (err => console.log(err));
+        //Getting data for users and all associated permissions 
+        fetch('http://localhost:3000/listuserpermissions')
+        .then (response => response.json())
+        .then( response => { 
+            let users=[
+                {
+                username: response[0].username,
+                permissions: [
+                            { object: response[0].objname,
+                              type: response[0].type  
+                             }
+                           ]
+                }
+            ];
+            let j=0;
+            for (let i=1; i<response.length; i++) {
+                if(response[i].username===response[i-1].username) {
+                    if(response[i].objname !==null) {
+                        users[j].permissions.push( 
+                            {   object: response[i].objname,
+                                type: response[i].type  
+                            }
+                        );
+                    }
+                }
+                else {
+                    if (response[i].objname !==null) {
+                        users.push({
+                            username: response[i].username,
+                            permissions: [
+                                { object: response[i].objname,
+                                  type: response[i].type  
+                                 }
+                               ]
+                        });
+                        j++;
+                    }
+                    else if (response[i].objname ===null) {
+                        users.push({
+                            username: response[i].username,
+                            permissions: []
+                        });
+                        j++;
+                    }
+                   
+                }
+
+            }
+            this.setState( {userswperm: users});
+           
+        })
+        .catch (err => console.log(err));
+    }
+    //Function that changes received data to list items 
+    makeItems = (groups, users, selectPerm) => {
+        return (
+             <ul className="list ph3 ph5-ns pv4 whbg scroll">
+                  {groups.map( (item, index) => 
+                    <li key={index} className="db mr2">
+                        <a href="#0" key={index*10} 
+                        onClick ={()=> selectPerm(item.groupname, 'group')}
+                        className="f6 f5-ns b db pa2 link dim mid-gray not-und">
+                          <s key={index*100}>{item.groupname} (G)</s>
+                          {item.permissions.map( (perm, index2) => {
+                              if(perm.length!==0 && perm.object!==null) {
+                                return <s key={index2}>, {perm.object} - {perm.type}</s>
+                              }
+                              else {
+                                return '';
+                              }
+                            }
+                          )}
+                         </a>
+                     </li>
+                  )}
+                    {users.map( (item, index) => 
+                     <li key={index*2} className="db mr2">
+                      <a href="#0" key={index*20} 
+                        onClick ={()=> selectPerm(item.username, 'user')}
+                        className="f6 f5-ns b db pa2 link dim mid-gray not-und">
+                          <s key={index*200}>{item.username} (U)</s>
+                          {item.permissions.map( (perm, index2) => {
+                              if(perm.length!==0 && perm.object!==null) {
+                                return <s key={index2*2}>, {perm.object} - {perm.type}</s>
+                              }
+                              else {
+                                return '';
+                                }
+                            }
+                          )}
+                         </a>
+                     </li>
+                    )}
+             </ul>
+        );
+
+     }
+    render () {
+        const {selectPerm} = this.props;
+        return (
+            <div className="dib">
+                <h3 className="wht">List of all Permissions</h3>
+                {this.makeItems(this.state.groupswperm, this.state.userswperm, selectPerm)}
+        </div>
+         );
+    }
+}
+
+export default PermissionList;