light-bootstrap-dashboard | Light Bootstrap Dashboard is an admin dashboard template | Dashboard library

{
path: "/Inicio",
name: "Inicio",
component: Inicio,
layout: "/admin"
},

import React, { Component } from "react";
import {
   Grid,
   Col
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

class Login extends Component {
constructor(props) {
  super(props)
  this.state = {
      users: [],
      user: '',
      pass: '',
      msg: '',
      apiResponse:''
  }
  this.logChange = this.logChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this)
}

handleSubmit(event) {
  event.preventDefault()
  var data = {
    user: this.state.user,
    pass: this.state.pass,
    msg: this.state.msg,
    apiResponse: this.state.apiResponse
  }
  console.log(data)
  fetch("http://localhost:9000/log/Login", {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
  }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
  }).then((data) => {
    if(data == "success"){
      console.log(data) 
      this.setState({users: data});
      this.props.history.push("/Inicio");
      window.location.reload();
    }
    else{
      if(data == 'El usuario o la contraseña no coinciden'){
        this.setState({ apiResponse: data })
      }
      
    }
  }).catch(function(err) {
      console.log(err)
  });
  }
  logChange(e) {
  this.setState({[e.target.name]: e.target.value});

  }

render() {
return (
  <div className="content">
    <p class="col-md-4"></p>
    <Grid >
        <Col md={5}>
          <Card
          
            title="Login"
            content={
              <form method='POST' onSubmit= {this.handleSubmit}>
                <p class="col-md-2"></p>
                <FormInputs
                  ncols={["col-md-7"]}
                  properties={[
                    {
                      label: "Usuario",
                      type: "text",
                      bsClass: "form-control",
                      placeholder: "Usuario",
                      maxlength: 20 ,
                      name: "user",
                      onChange: this.logChange
                    }
                  ]}
                />
                <p class="col-md-2"></p>
                <FormInputs
                  ncols={["col-md-7"]}
                  properties={[
                    {
                      label: "Contraseña",
                      type: "password",
                      bsClass: "form-control",
                      placeholder: "Contraseña",
                      maxlength: 20,
                      name: "pass",
                      onChange: this.logChange
                    }
                  ]}
                />
                <p >{this.state.apiResponse}</p>
                <br/>
                <br/>
                <Button bsStyle="info" pullRight fill type="submit">
                  Login
                </Button>
                <Button bsStyle="info" pullLeft fill type="submit">
                  Olvide mi Contraseña
                </Button>
                
                
              </form>
            }
          />
        </Col>
    </Grid>
    
 </div>
);
}
}

export default Login;

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import AdminLayout from "layouts/Admin.jsx";
import LoginLayout from "layouts/LoginLayout.jsx";
import EfoodLayout from "layouts/EFoodLayout.jsx";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/login" render={props => <LoginLayout {...props} />} />
        <Route path="/Efood" render={props => <EfoodLayout {...props} />} />
        <Redirect from="/" to="/login/Login" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import LoginNavbar from "components/Navbars/LoginNavbar";
import Footer from "components/Footer/Footer";


import routes from "routes.js";

class Login extends Component {

getRoutes = routes => {
return routes.map((prop, key) => {
  if (prop.layout === "/login") {
    return (
      <Route
        path={prop.layout + prop.path}
        render={props => (
          <prop.component
            {...props}
            handleClick={this.handleNotificationClick}
          />
        )}
        key={key}
      />
    );
  } else {
    return null;
  }
});
};
getBrandText = path => {
return "Bienvenido a E Food";
};

render() {
 return (
   <div className="wrapper">
      <LoginNavbar 
        brandText={this.getBrandText(this.props.location.pathname)}
        
      />
      <Switch>{this.getRoutes(routes)}</Switch>
      <Footer />
      
   </div>
  );
 }
} 

export default Login;

   <fg-input
                            v-validate="'required|min:3'"
                            data-vv-name="Login"
                            label="Login"
                            type="text"
                            placeholder="Login"
                            v-model="form.login"
                            autocomplete="none">
                        </fg-input>
                        <span v-show="errors.has('Login')" class="text-danger">{{ errors.first("Login") 
    }}</span>

                        <fg-input
                            data-vv-name="Description"
                            label="Description"
                            type="text"
                            placeholder="Description"
                            v-model="form.description"
                            autocomplete="none">
                        </fg-input>
                        <span v-show="errors.has('Description')" class="text-danger">{{ errors.first("Description") }}</span>

                        <fg-input
                            label="Password"
                            type="password"
                            placeholder="Password"
                            data-vv-name="Password"
                            v-validate="form.id ? '' : 'required|min:3'"
                            v-model="form.password"
                            autocomplete="off">
                        </fg-input>

 var table = $('#datatables').DataTable({
     "scrollX": true,
     orderCellsTop: true,
     fixedHeader: true,
     "pageLength": 10,
     responsive: false,
     sDom: 'lrtip'
 });

import React from "react";
import ReactDOM from "react-dom";

import App from './app';

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';

import Login from './login';
import Main from './main';

import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();

class App extends Component {
    constructor(props) {
        super(props);

        window.token = '';
    }

    render() {
        return <div>
                <Router>
                    <Switch>
                        <Route to="/login" component={Login} exact />
                        <Route to="/main" component={Main} exact/>
                    </Switch>
                </Router>
            </div>;
    }
}

export default App;

import React, {Component} from 'react';
import ReactDOM from "react-dom";

import { HashRouter, Route, Switch } from "react-router-dom";

import indexRoutes from "routes/index.jsx";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import Login from './login';

class Main extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <HashRouter>
        <Switch>

          {indexRoutes.map((prop, key) => {
            return <Route to={prop.path} component={prop.component} key={key} />;
          })}
        </Switch>
      </HashRouter>;
    }
}

export default Main;

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import AdminLayout from "layouts/Admin.jsx";
import UserProfile from "views/UserProfile";
import Sidebar from "components/Sidebar/Sidebar";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" render={props => <AdminLayout {...props} />} />
      <Route exact path="/admin/userProfile" render={props => <UserProfile {...props} />}/>
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

/*!

=========================================================
* Light Bootstrap Dashboard React - v1.3.0
=========================================================

* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import React, { Component } from "react";
import { BrowserRouter as Router, Route} from 'react-router-dom'
import { Grid, Row, Col, Table } from "react-bootstrap";

import Card from "components/Card/Card.jsx";
import { thArray } from "variables/Variables.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";
import NotificationSystem from "react-notification-system";
import UserProfile from "./UserProfile";


class TableList extends Component {

  constructor(props) {
    super(props)
    this.state = {
        error: null,
        transaction: [],
        defaultTransactionState: [],
        _notificationSystem: null
    }
    this.editEntry = this.editEntry.bind(this);  
    this.onChange = this.onChange.bind(this);
  }
  onChange(e){
    this.setState({[e.target.name]: [e.target.value]});
  }
  // values on page loadup..
  componentDidMount() {
    const apiUrl = 'http://localhost:3000/api/str/';
    fetch(apiUrl)
      .then( (response) => {
          return response.json();
        })
      .then((data) => {
          this.setState({ transaction: data.response })
          this.setState({ defaultTransactionState: data.response })
        })
        .catch((error) => console.log(error));            
  }

  handleNotificationClick = position => {
    var color = Math.floor(Math.random() * 4 + 1);
    var level;
    switch (color) {
      case 1:
        level = "success";
        break;
      case 2:
        level = "warning";
        break;
      case 3:
        level = "error";
        break;
      case 4:
        level = "info";
        break;
      default:
        break;
    }
    this.state._notificationSystem.addNotification({
      title: <span data-notify="icon" className="pe-7s-gift" />,
      message: (
        <div>Challan Deleted Successfully!
        </div>
      ),
      level: level,
      position: position,
      autoDismiss: 5
    });
  };

  editEntry = () => {  
    console.log("in edit => " + this.state.transaction)
    this.props.history.push('/admin/userProfile');
  }

  deleteEntry = challanNo => {
    const transactions = this.state.transaction;
    console.log('inside delete.. with Challan No' + challanNo)
    const requestOptions = {
      method: 'DELETE'
    };
    this.setState({
      transaction: transactions.filter(trn => trn.CHALLAN_NO !== challanNo)
    })
    fetch("http://localhost:3000/api/str/delete/" + challanNo, requestOptions)
      .then((response) => {
      return response.json();
    })
    .then((data) => {
      console.log('Done with delete.. Now: ' + typeof data.response)
      this.handleNotificationClick(1)
     // this.setState({ transaction: data.response })
    })
    .catch((error) => console.log(error));
  }
      // reset the rows on backspace..
      onKeyDown = (e) => {
        if (e.keyCode === 8) {
         this.setState({ transaction: this.state.defaultTransactionState })
         console.log('delete');
        }
      }

   // filter data set on change event of field values..
   filterChallan = (event) => {

    console.log(this.state.transaction)
    let transaction = this.state.transaction

    transaction = transaction.filter((challan) => {
      let challanNo = challan.CHALLAN_NO
      console.log(event.target.value)
      return challanNo.toString().search(event.target.value) !== -1
    })
    this.setState({
        transaction: transaction
    })
   }

   filterEntityName = (event) => {

    console.log(this.state.transaction)
    let transaction = this.state.transaction

    transaction = transaction.filter((challan) => {
      let entityName = challan.ENTITY_NAME
      console.log(event.target.value)
      return entityName.toString().toLowerCase().search(event.target.value.toLowerCase()) !== -1
    })
    this.setState({
        transaction: transaction
    })
  }

  render() {
    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={12}>
              <Card
                title="Filter Criteria"
                category="Search the Fee Payment Details for Specific Challan Info"
                ctTableFullWidth
                ctTableResponsive
                content={
                  <div 
                  style={{ paddingLeft: 12, paddingRight: 0 }}>
                  <FormInputs
                      ncols={["col-md-2", "col-md-4"]}
                      properties={[
                        {
                          label: "Challan #",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Challan #",
                          onChange: this.filterChallan,
                          onKeyDown: this.onKeyDown
                        },
                        {
                          label: "Entity Name",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Entity Name",
                          onChange: this.filterEntityName,
                          onKeyDown: this.onKeyDown
                        }
                      ]}
                    />

                  <Table striped hover>
                    <thead>
                      <tr>
                        {thArray.map((prop, key) => {
                          return <th key={key}>{prop}</th>;
                        })}
                      </tr>
                    </thead>
                    <tbody>
                    {this.state.transaction.map((str) => (
                      <tr key={str.CHALLAN_NO}>
                        <td>{str.CHALLAN_NO}</td>
                        <td>{str.ENTITY_NAME}</td>
                        <td>{str.ENTITY_TYPE}</td>
                        <td>{str.CITY}</td>
                        <td>{str.EMAIL}</td>
                        <td>
                        <Button bsStyle="info" fill onClick={this.editEntry} onChange={this.onChange}
                                className="btn btn-primary btn-sm mr-2">
                          Edit 
                        </Button> <Button bsStyle="info" fill onClick={() => this.deleteEntry(str.CHALLAN_NO)} 
                                className="btn btn-primary btn-sm mr-2">
                          Delete
                        </Button>
                        </td>
                      </tr>
                       ))}
                    </tbody>
                  </Table>
              </div>
                }
              />
            </Col>            
          </Row>
        </Grid>
      </div>
    );
  }
}

export default TableList;

/*!

=========================================================
* Light Bootstrap Dashboard React - v1.3.0
=========================================================

* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import React, { Component } from "react";
import backbone from "assets/img/cdc-backbone.jpg";
import {
  Grid,
  Row,
  Col,
  FormGroup,
  ControlLabel,
  FormControl
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import { UserCard } from "components/UserCard/UserCard.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

import avatar from "assets/img/faces/face-3.jpg";

class UserProfile extends Component {

  constructor(props) {
    super(props)
    console.log('props => ' + JSON.stringify(this.props.match.params))
    this.state = {
      challan_no:                 '',
      challan_amount:             '',
      entity_name:                '',
      entity_address:             '',
      city:                       '',
      district:                   '',
      province:                   '',
      telephone:                  null,
      mobile:                     null,
      email:                      '',
      entity_type:                '',
      registraton_no:             null,
      registering_authority_name: '',
      principal_lob:              ''
    }
    this.onChange = this.onChange.bind(this)
    this.insertRecord = this.insertRecord.bind(this)
  }
  onChange(e){
    this.setState({[e.target.name]: [e.target.value]})
}

  insertRecord(event) {
    event.preventDefault();

    fetch('http://localhost:3000/api/str/insert', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
       body: JSON.stringify( {
        challan_no:                 this.state.challan_no,
        challan_amount:             this.state.challan_amount,
        entity_name:                this.state.entity_name,
        entity_address:             this.state.entity_address,
        city:                       this.state.city,
        district:                   this.state.district,
        province:                   this.state.province,
        telephone:                  this.state.telephone,
        mobile:                     this.state.mobile,
        email:                      this.state.email,
        entity_type:                this.state.entity_type,
        registration_no:            this.state.registration_no,
        registering_authority_name: this.state.registering_authority_name,
        principal_lob:              this.state.principal_lob

  })
   }).then(res => res.json())
   .then(data => console.log(data))
   .catch(err => console.log(err));
  }

  render() {
    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={8}>
              <Card
                title="Add Fee Payment Details"
                content={
                  <form>
                    <FormInputs
                      ncols={["col-md-5", "col-md-3", "col-md-4"]}
                      properties={[
                        {
                          label: "Challan #",
                          type: "text",
                          name: "challan_no",
                          bsClass: "form-control",
                          placeholder: "Challan #",
                          value: this.state.challan_no,
                          onChange: this.onChange
                        },
                        {
                          label: "Challan Amount",
                          type: "number",
                          name: "challan_amount",
                          bsClass: "form-control",
                          placeholder: "Challan Amount",
                          value: this.state.challan_amount,
                          onChange: this.onChange
                        },
                        {
                          label: "Entity Name",
                          type: "text",
                          name: "entity_name",
                          bsClass: "form-control",
                          placeholder: "Entity Name",
                          value: this.state.entity_name,
                          onChange: this.onChange
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-6", "col-md-6"]}
                      properties={[
                        {
                          label: "Entity Address",
                          type: "text",
                          name: "entity_address",
                          bsClass: "form-control",
                          placeholder: "Entity Address",
                          value: this.state.entity_address,
                          onChange: this.onChange
                        },
                        {
                          label: "City",
                          type: "text",
                          name: "city",
                          bsClass: "form-control",
                          placeholder: "City",
                          value: this.state.city,
                          onChange: this.onChange
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-6", "col-md-6"]}
                      properties={[
                        {
                          label: "District",
                          type: "text",
                          name: "district",
                          bsClass: "form-control",
                          placeholder: "District",
                          value: this.state.district,
                          onChange: this.onChange
                        },
                        {
                          label: "Province",
                          type: "text",
                          name: "province",
                          bsClass: "form-control",
                          placeholder: "Province",
                          value: this.state.province,
                          onChange: this.onChange
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-4", "col-md-4", "col-md-4"]}
                      properties={[
                        {
                          label: "Telephone",
                          type: "number",
                          name: "telephone",
                          bsClass: "form-control",
                          placeholder: "Telephone",
                          value: this.state.telephone,
                          onChange: this.onChange
                        },
                        {
                          label: "Mobile",
                          type: "number",
                          name: "mobile",
                          bsClass: "form-control",
                          placeholder: "Mobile",
                          value: this.state.mobile,
                          onChange: this.onChange
                        },
                        {
                          label: "Email",
                          type: "text",
                          name: "email",
                          bsClass: "form-control",
                          placeholder: "Email",
                          value: this.state.email,
                          onChange: this.onChange
                        }
                      ]}
                    />
                  <FormInputs
                      ncols={["col-md-4", "col-md-4", "col-md-4"]}
                      properties={[
                        {
                          label: "Entity Type",
                          type: "text",
                          name: "entity_type",
                          bsClass: "form-control",
                          placeholder: "Entity Type",
                          value: this.state.entity_type,
                          onChange: this.onChange
                        },
                        {
                          label: "Registration #",
                          type: "text",
                          name: "registration_no",
                          bsClass: "form-control",
                          placeholder: "Registration #",
                          value: this.state.registraton_no,
                          onChange: this.onChange
                        },
                        {
                          label: "Registration Authority Name",
                          type: "text",
                          name: "registering_authority_name",
                          bsClass: "form-control",
                          placeholder: "Registration Authority Name",
                          value: this.state.registering_authority_name,
                          onChange: this.onChange
                        }
                      ]}
                    />

                    <Row>
                      <Col md={12}>
                        <FormGroup controlId="formControlsTextarea">
                          <ControlLabel>Principal Line of Business</ControlLabel>
                          <FormControl
                            rows="5"
                            componentClass="textarea"
                            bsClass="form-control"
                            name="principal_lob"
                            value={this.state.principal_lob}
                            onChange= {this.onChange}
                            placeholder="Enter the details of your Principal Line of Business"
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                    <Button bsStyle="info" pullRight fill onClick={this.insertRecord}>
                      Save
                    </Button>
                    <div className="clearfix" />
                  </form>
                }
              />
            </Col>
            <Col md={4}>
            <div class="row">
              <div class="col-md-12">
                <div class="thumbnail">
                  <img src={backbone} alt="CDC Pakistan" />
                  <div class="caption">
                    <h4>Secure Transacton Registry</h4>
                    <p>Central Depository Company of Pakistan is starting up their new project..</p>
                    <p><a href="#" class="btn btn-primary" role="button">More Details</a> </p>
                  </div>
                </div>
              </div>
          </div>


            </Col>
            {/* <Col md={4}>
              <UserCard
                bgImage="https://ununsplash.imgix.net/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=300&q=75&w=400"
                avatar={avatar}
                name="Mike Andrew"
                userName="michael24"
                description={
                  <span>
                    "Lamborghini Mercy
                    <br />
                    Your chick she so thirsty
                    <br />
                    I'm in that two seat Lambo"
                  </span>
                }
                socials={
                  <div>
                    <Button simple>
                      <i className="fa fa-facebook-square" />
                    </Button>
                    <Button simple>
                      <i className="fa fa-twitter" />
                    </Button>
                    <Button simple>
                      <i className="fa fa-google-plus-square" />
                    </Button>
                  </div>
                }
              />
            </Col> */}
          </Row>
        </Grid>
      </div>
    );
  }
}

export default UserProfile;

import React, { Component } from "react";
import { BrowserRouter as Router, Route} from 'react-router-dom'
import { Grid, Row, Col, Table } from "react-bootstrap";

import Card from "components/Card/Card.jsx";
import { thArray } from "variables/Variables.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";
import NotificationSystem from "react-notification-system";
import UserProfile from "./UserProfile";


class TableList extends Component {

  constructor(props) {
    super(props)
    this.state = {
        error: null,
        transaction: [],
        defaultTransactionState: [],
        _notificationSystem: null
    }
    this.editEntry = this.editEntry.bind(this);  
  }

  // values on page loadup..
  componentDidMount() {
    const apiUrl = 'http://localhost:3000/api/str/';
    fetch(apiUrl)
      .then( (response) => {
          return response.json();
        })
      .then((data) => {
          this.setState({ transaction: data.response })
          this.setState({ defaultTransactionState: data.response })
        })
        .catch((error) => console.log(error));            
  }

  handleNotificationClick = position => {
    var color = Math.floor(Math.random() * 4 + 1);
    var level;
    switch (color) {
      case 1:
        level = "success";
        break;
      case 2:
        level = "warning";
        break;
      case 3:
        level = "error";
        break;
      case 4:
        level = "info";
        break;
      default:
        break;
    }
    this.state._notificationSystem.addNotification({
      title: <span data-notify="icon" className="pe-7s-gift" />,
      message: (
        <div>Challan Deleted Successfully!
        </div>
      ),
      level: level,
      position: position,
      autoDismiss: 5
    });
  };

  editEntry = () => {  
    console.log("in edit.")
    this.props.history.push('/userProfile');
  }

  deleteEntry = challanNo => {
    const transactions = this.state.transaction;
    console.log('inside delete.. with Challan No' + challanNo)
    const requestOptions = {
      method: 'DELETE'
    };
    this.setState({
      transaction: transactions.filter(trn => trn.CHALLAN_NO !== challanNo)
    })
    fetch("http://localhost:3000/api/str/delete/" + challanNo, requestOptions)
      .then((response) => {
      return response.json();
    })
    .then((data) => {
      console.log('Done with delete.. Now: ' + typeof data.response)
      this.handleNotificationClick(1)
     // this.setState({ transaction: data.response })
    })
    .catch((error) => console.log(error));
  }
      // reset the rows on backspace..
      onKeyDown = (e) => {
        if (e.keyCode === 8) {
         this.setState({ transaction: this.state.defaultTransactionState })
         console.log('delete');
        }
      }

   // filter data set on change event of field values..
   filterChallan = (event) => {

    console.log(this.state.transaction)
    let transaction = this.state.transaction

    transaction = transaction.filter((challan) => {
      let challanNo = challan.CHALLAN_NO
      console.log(event.target.value)
      return challanNo.toString().search(event.target.value) !== -1
    })
    this.setState({
        transaction: transaction
    })
   }

   filterEntityName = (event) => {

    console.log(this.state.transaction)
    let transaction = this.state.transaction

    transaction = transaction.filter((challan) => {
      let entityName = challan.ENTITY_NAME
      console.log(event.target.value)
      return entityName.toString().toLowerCase().search(event.target.value.toLowerCase()) !== -1
    })
    this.setState({
        transaction: transaction
    })
  }

  render() {
    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={12}>
              <Card
                title="Filter Criteria"
                category="Search the Fee Payment Details for Specific Challan Info"
                ctTableFullWidth
                ctTableResponsive
                content={
                  <div 
                  style={{ paddingLeft: 12, paddingRight: 0 }}>
                  <FormInputs
                      ncols={["col-md-2", "col-md-4"]}
                      properties={[
                        {
                          label: "Challan #",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Challan #",
                          onChange: this.filterChallan,
                          onKeyDown: this.onKeyDown
                        },
                        {
                          label: "Entity Name",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Entity Name",
                          onChange: this.filterEntityName,
                          onKeyDown: this.onKeyDown
                        }
                      ]}
                    />

                  <Table striped hover>
                    <thead>
                      <tr>
                        {thArray.map((prop, key) => {
                          return <th key={key}>{prop}</th>;
                        })}
                      </tr>
                    </thead>
                    <tbody>
                    {this.state.transaction.map((str) => (
                      <tr key={str.CHALLAN_NO}>
                        <td>{str.CHALLAN_NO}</td>
                        <td>{str.ENTITY_NAME}</td>
                        <td>{str.ENTITY_TYPE}</td>
                        <td>{str.CITY}</td>
                        <td>{str.EMAIL}</td>
                        <td>
                        <Button bsStyle="info" fill onClick={this.editEntry} 
                                className="btn btn-primary btn-sm mr-2">
                          Edit 
                        </Button> <Button bsStyle="info" fill onClick={() => this.deleteEntry(str.CHALLAN_NO)} 
                                className="btn btn-primary btn-sm mr-2">
                          Delete
                        </Button>
                        </td>
                      </tr>
                       ))}
                    </tbody>
                  </Table>
              </div>
                }
              />
            </Col>            
          </Row>
        </Grid>
      </div>
    );
  }
}

export default TableList;

import React, { Component } from "react";
import {
  Grid,
  Row,
  Col,
  FormGroup,
  ControlLabel,
  FormControl
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import { UserCard } from "components/UserCard/UserCard.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

import avatar from "assets/img/faces/face-3.jpg";

class UserProfile extends Component {

  constructor() {
    super()
    this.state = {
      challan_no:                 '',
      challan_amount:             '',
      entity_name:                '',
      entity_address:             '',
      city:                       '',
      district:                   '',
      province:                   '',
      telephone:                  null,
      mobile:                     null,
      email:                      '',
      entity_type:                '',
      registraton_no:             null,
      registering_authority_name: '',
      principal_lob:              ''
    }
    this.onChange = this.onChange.bind(this)
    this.insertRecord = this.insertRecord.bind(this)
  }
  onChange(e){
    this.setState({[e.target.name]: [e.target.value]})
}

  insertRecord(event) {
    event.preventDefault();

    fetch('http://localhost:3000/api/str/insert', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
       body: JSON.stringify( {
        challan_no:                 this.state.challan_no,
        challan_amount:             this.state.challan_amount,
        entity_name:                this.state.entity_name,
        entity_address:             this.state.entity_address,
        city:                       this.state.city,
        district:                   this.state.district,
        province:                   this.state.province,
        telephone:                  this.state.telephone,
        mobile:                     this.state.mobile,
        email:                      this.state.email,
        entity_type:                this.state.entity_type,
        registration_no:            this.state.registration_no,
        registering_authority_name: this.state.registering_authority_name,
        principal_lob:              this.state.principal_lob

  })
   }).then(res => res.json())
   .then(data => console.log(data))
   .catch(err => console.log(err));
  }

  render() {
    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={8}>
              <Card
                title="Add Fee Payment Details"
                content={
                  <form>
                    <FormInputs
                      ncols={["col-md-5", "col-md-3", "col-md-4"]}
                      properties={[
                        {
                          label: "Challan #",
                          type: "text",
                          name: "challan_no",
                          bsClass: "form-control",
                          placeholder: "Challan #",
                          value: this.state.challan_no,
                          onChange: this.onChange
                        },
                        {
                          label: "Challan Amount",
                          type: "number",
                          name: "challan_amount",
                          bsClass: "form-control",
                          placeholder: "Challan Amount",
                          value: this.state.challan_amount,
                          onChange: this.onChange
                        },
                        {
                          label: "Entity Name",
                          type: "text",
                          name: "entity_name",
                          bsClass: "form-control",
                          placeholder: "Entity Name",
                          value: this.state.entity_name,
                          onChange: this.onChange
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-6", "col-md-6"]}
                      properties={[
                        {
                          label: "Entity Address",
                          type: "text",
                          name: "entity_address",
                          bsClass: "form-control",
                          placeholder: "Entity Address",
                          value: this.state.entity_address,
                          onChange: this.onChange
                        },
                        {
                          label: "City",
                          type: "text",
                          name: "city",
                          bsClass: "form-control",
                          placeholder: "City",
                          value: this.state.city,
                          onChange: this.onChange
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-6", "col-md-6"]}
                      properties={[
                        {
                          label: "District",
                          type: "text",
                          name: "district",
                          bsClass: "form-control",
                          placeholder: "District",
                          value: this.state.district,
                          onChange: this.onChange
                        },
                        {
                          label: "Province",
                          type: "text",
                          name: "province",
                          bsClass: "form-control",
                          placeholder: "Province",
                          value: this.state.province,
                          onChange: this.onChange
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-4", "col-md-4", "col-md-4"]}
                      properties={[
                        {
                          label: "Telephone",
                          type: "number",
                          name: "telephone",
                          bsClass: "form-control",
                          placeholder: "Telephone",
                          value: this.state.telephone,
                          onChange: this.onChange
                        },
                        {
                          label: "Mobile",
                          type: "number",
                          name: "mobile",
                          bsClass: "form-control",
                          placeholder: "Mobile",
                          value: this.state.mobile,
                          onChange: this.onChange
                        },
                        {
                          label: "Email",
                          type: "text",
                          name: "email",
                          bsClass: "form-control",
                          placeholder: "Email",
                          value: this.state.email,
                          onChange: this.onChange
                        }
                      ]}
                    />
                  <FormInputs
                      ncols={["col-md-4", "col-md-4", "col-md-4"]}
                      properties={[
                        {
                          label: "Entity Type",
                          type: "text",
                          name: "entity_type",
                          bsClass: "form-control",
                          placeholder: "Entity Type",
                          value: this.state.entity_type,
                          onChange: this.onChange
                        },
                        {
                          label: "Registration #",
                          type: "text",
                          name: "registration_no",
                          bsClass: "form-control",
                          placeholder: "Registration #",
                          value: this.state.registraton_no,
                          onChange: this.onChange
                        },
                        {
                          label: "Registration Authority Name",
                          type: "text",
                          name: "registering_authority_name",
                          bsClass: "form-control",
                          placeholder: "Registration Authority Name",
                          value: this.state.registering_authority_name,
                          onChange: this.onChange
                        }
                      ]}
                    />

                    <Row>
                      <Col md={12}>
                        <FormGroup controlId="formControlsTextarea">
                          <ControlLabel>Principal Line of Business</ControlLabel>
                          <FormControl
                            rows="5"
                            componentClass="textarea"
                            bsClass="form-control"
                            name="principal_lob"
                            value={this.state.principal_lob}
                            onChange= {this.onChange}
                            placeholder="Enter the details of your Principal Line of Business"
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                    <Button bsStyle="info" pullRight fill onClick={this.insertRecord}>
                      Save
                    </Button>
                    <div className="clearfix" />
                  </form>
                }
              />
            </Col>
            <Col md={4}>
              <UserCard
                bgImage="https://ununsplash.imgix.net/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=300&q=75&w=400"
                avatar={avatar}
                name="Mike Andrew"
                userName="michael24"
                description={
                  <span>
                    "Lamborghini Mercy
                    <br />
                    Your chick she so thirsty
                    <br />
                    I'm in that two seat Lambo"
                  </span>
                }
                socials={
                  <div>
                    <Button simple>
                      <i className="fa fa-facebook-square" />
                    </Button>
                    <Button simple>
                      <i className="fa fa-twitter" />
                    </Button>
                    <Button simple>
                      <i className="fa fa-google-plus-square" />
                    </Button>
                  </div>
                }
              />
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default UserProfile;

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import AdminLayout from "layouts/Admin.jsx";
import UserProfile from "views/UserProfile";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/admin" render={props => <AdminLayout {...props} />} />
      <Route path='/userProfile' component={UserProfile} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

import React from "react";
import ReacrDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/css/light-bootstrap-dashboard.css";
import "./assets/css/demo.css";
import "font-awesome/css/font-awesome.min.css";
import "./assets/css/pe-icon-7-stroke.css";

import $ from "jquery";
import "bootstrap/dist/js/bootstrap.min";
import "./assets/js/bootstrap-checkbox-radio-switch";
import "./assets/js/chartist.min";
import "./assets/js/bootstrap-notify";
import "./assets/js/light-bootstrap-dashboard";
import "./assets/js/demo";

var webpack = require('webpack');
var path = require('path');
var debug = process.env.NODE_ENV !== "production";

module.exports = {
    context: __dirname + "/src",
    devtool: debug ? 'inline-source-map' : null,
    entry: 'index.js',
    output: {
        path: path.join(__dirname, ''),
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=react-html-attrs,plugins[]=transform-class-properties,plugins[]=transform-decorators-legacy']
            },
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
            {test: /\.gif$/, loader: "url-loader?mimetype=image/png"},
            {test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff"},
            {test: /\.(ttf|eot|svg|jpe?g|png|gif)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]"},
            {
                test: /vendor\/.+\.(jsx|js)$/,
                loader: 'imports?jQuery=jquery,$=jquery,this=>window'
            },
        ]
    },
    plugins: debug ? [] : [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
            new webpack.optimize.AggressiveMergingPlugin(),
            new webpack.ProvidePlugin({
                $: "jquery",
                jquery: "jquery",
                "window.jQuery": "jquery",
                jQuery: "jquery"
            }),
        ]
};

{
  "name": "learn-react",
  "version": "1.0.0",
  "description": "for learning purpose only",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --content-base --inline --hot --port 3300"
  },
  "keywords": [
    "react",
    "learning"
  ],
  "author": "vidy hermes",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^2.8.1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "base-64": "^0.1.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
    "font-awesome": "^4.7.0",
    "globalize": "^0.1.1",
    "history": "^4.5.1",
    "imports-loader": "^0.7.1",
    "jquery": "^3.2.1",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "moment": "^2.17.1",
    "path": "^0.12.7",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-redux": "^5.0.2",
    "react-redux-loading-bar": "^2.8.2",
    "react-router": "^3.0.2",
    "react-widgets": "^3.4.6",
    "redux": "^3.6.0",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8"
  }
}

<!--   Core JS Files   -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" type="text/javascript"></script>
<script src="/assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="/assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
<script src="../assets/js/gabservizi.js"></script>
<script>
 $(function () {
        LoadChart();
    });
    function LoadChart() {
        $("#dvChart").html("");
        $("#dvLegend").html("");

        //Populate data for the chart
        var fruits = new Array();

        var mango = {};
        mango.text = "Mango";
        mango.value = 20;
        mango.color = "#FEBD01";
        fruits.push(mango);

        var orange = {};
        orange.text = "Orange";
        orange.value = 40;
        orange.color = "#FF8C00";
        fruits.push(orange);

        var peach = {};
        peach.text = "Peach";
        peach.value = 55;
        peach.color = "#FFCBA6";
        fruits.push(peach);

        var el = document.createElement('canvas');
        $("#dvChart")[0].appendChild(el);

        var ctx = el.getContext('2d');
        var chart = new Chart(ctx, {
            type: 'pie',
            data: fruits
        });

        for (var i = 0; i < fruits.length; i++) {
            var div = $("<div />");
            div.css("margin-bottom", "10px");
            div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + fruits[i].color + "'></span> " + fruits[i].text);
            $("#dvLegend").append(div);
        }
    }

</script>

//server.go    
package main

import (
    "fmt"
    "html/template"
    "io"
    "log"
    "net/http"
    "time"
)

const STATIC_URL string = "/assets/"
const STATIC_ROOT string = "assets/"

type Context struct {
    Title  string
    Static string
}

func Home(w http.ResponseWriter, req *http.Request) {
    context := Context{Title: "Welcome!"}
    render(w, "index", context)
}

func About(w http.ResponseWriter, req *http.Request) {
    context := Context{Title: "About"}
    render(w, "about", context)
}

func render(w http.ResponseWriter, tmpl string, context Context) {
    context.Static = STATIC_URL
    tmpl_list := []string{"templates/base.html",
        fmt.Sprintf("templates/%s.html", tmpl)}
    t, err := template.ParseFiles(tmpl_list...)
    if err != nil {
        log.Print("template parsing error: ", err)
    }
    err = t.Execute(w, context)
    if err != nil {
        log.Print("template executing error: ", err)
    }
}

func StaticHandler(w http.ResponseWriter, req *http.Request) {
    static_file := req.URL.Path[len(STATIC_URL):]
    if len(static_file) != 0 {
        f, err := http.Dir(STATIC_ROOT).Open(static_file)
        if err == nil {
            content := io.ReadSeeker(f)
            http.ServeContent(w, req, static_file, time.Now(), content)
            return
        }
    }
    http.NotFound(w, req)
}

func main() {
    http.HandleFunc("/", Home)
    http.HandleFunc("/about/", About)
    http.HandleFunc(STATIC_URL, StaticHandler)
    err := http.ListenAndServe(":8080", nil)
    if err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

<!--base.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CELERATES UNIVERSITY</title>

        <!-- Favicon     -->
        <link rel="icon" type="image/png" href="{{ .Static }}img/favicon2.ico">

        <!-- Bootstrap core CSS     -->
        <link rel="stylesheet" href="{{ .Static }}css/bootstrap.min.css" type="text/css">

        <!-- Animation library for notifications   -->
        <link href="{{ .Static }}css/animate.min.css" rel="stylesheet"/>

        <!--  Light Bootstrap Table core CSS    -->
        <link href="{{ .Static }}css/light-bootstrap-dashboard.css" rel="stylesheet"/>

        <!--     Fonts and icons     -->
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
        <link href="{{ .Static }}css/pe-icon-7-stroke.css" rel="stylesheet" />

        <!--     Datatables     -->
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
    </head>
    <body>
        <div class="wrapper">
            <!--SIDEBAR-->
            {{  template "Sidebar" . }}
            <div class="main-panel">
                <!--HEADER-->
                {{  template "Header" . }}
                <!--CONTENT-->
                <div class="content">
                    <div class="container-fluid" align="center">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            {{ template "content" . }}
                            </div>
                        </div>
                    </div>
                </div>
                <!--FOOTER-->
                {{  template "Footer" . }}
            </div>
        </div>


        <!--   JAVASCRIPTS   -->
        <!--   Core JS Files   -->
    <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="{{ .Static }}js/bootstrap.min.js" type="text/javascript"></script> 

    <!-- Datatables -->
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#example").DataTable();
        } );
    </script>

    <!--  Checkbox, Radio & Switch Plugins -->
    <script src="{{ .Static }}js/bootstrap-checkbox-radio-switch.js"></script>

    <!--  Charts Plugin -->
    <script src="{{ .Static }}js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="{{ .Static }}js/bootstrap-notify.js"></script>

    <!--  Google Maps Plugin    -->
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
    <script src="{{ .Static }}js/light-bootstrap-dashboard.js"></script>
    </body>

{{ define "Sidebar" }}
<!--sidebar.html-->
    <div class="sidebar" data-color="blue" data-image="{{ .Static }}img/sidebar-4.jpg">
        <div class="sidebar-wrapper">
            <div class="logo">
                <a href="/" class="simple-text">
                    Celerates University
                </a>
            </div>

            <ul class="nav">
                <li>
                    <a href="/">
                        <i class="pe-7s-graph"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li>
                    <a href="/">
                        <i class="pe-7s-user"></i>
                        <p>Admin List</p>
                    </a>
                </li>
                <li>
                    <a href="/">
                        <i class="pe-7s-note2"></i>
                        <p>Student List</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{{ end }}