<repo_name>DimuthuMadushan/EpiDataFuseUI<file_sep>/src/components/createPipeline.js
import React from 'react';
import { Checkbox } from '@material-ui/core';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import {Route, BrowserRouter as Router,useParams, useRouteMatch,matchPath , Switch, Link} from 'react-router-dom';
import AddIcon from "@material-ui/icons/Add";
import { Fab, Button } from "@material-ui/core";
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
class CreatePipeline extends React.Component {
    state={
        pipelines:[{pipelineName:"", status:""}],
        display:"none",
        UI:"none",
        form:"none"
    }
    createPipeline=()=>{
      this.setState((prevState) => ({
        pipelines: [...prevState.pipelines,{pipelineName:"", status:""} ]
    }),()=>{
      let {path, url} = matchPath
      console.log(path)
      console.log(url)
    });
    }
    handleChange = (e) =>{
      let pipelines = [...this.state.pipelines]
      var id  = pipelines.length
      console.log(id)
      pipelines[id-1][e.target.id] = e.target.value
      pipelines[id-1]["status"] = "idle"
      this.setState({pipelines},()=>{
        console.log(pipelines)
      })
    }

    handleCreate = () =>{
        let display = this.state.display
        if(display==="none"){
            display ="block"
            this.setState({display})
        } else {
            display ="none"
            this.setState({display})
        }
    }

    select=(e)=>{
      let UI,form = this.state.display
      if(e.target.value=="0"){
        UI = "block"
        form = "none"
        this.setState({UI,form})
      }else if(e.target.value=="1"){
        form = "block"
        UI = "none"
        this.setState({UI,form})
      }
    }
    handleSubmit = (e) => {
      e.preventDefault()
  }
    render(){
        let pipelines = this.state.pipelines
        return(
          <div>     
            <div  >
              <button className="w3-btn w3-white w3-border w3-border-green w3-round-large" onClick={this.handleCreate} >Create Pipeline</button>
              <button className="w3-btn w3-white w3-border w3-border-green w3-round-large w3-right" >Refresh</button>
              <h6>
              <div className="w3-panel w3-border w3-half" style={{display:this.state.display}}>
              <label  className="col-25">Using</label>
              <br/>
                <div>
                <RadioGroup aria-label="select" name="select1" value={this.value} onChange={this.select}>
                  <FormControlLabel value="0" control={<Radio />} label="UI" />
                  <FormControlLabel value="1" control={<Radio />} label="Config File"/>
                </RadioGroup>
                </div>
               
                  <div style={{display:this.state.UI}}>
                    <label  className="col-25">Pipeline Name</label>
                    <input id="pipelineName" onChange={this.handleChange} className="col-75"/>
                    <button className="w3-btn w3-white w3-border w3-border-red w3-round-large"  >Cancel</button>
                    <button className="w3-btn w3-white w3-border w3-border-green w3-round-large" onClick={this.createPipeline} >Create</button>
                  </div>
                  <div style={{display:this.state.form}}>
                    <label  className="col-25">Config file</label>
                    <label htmlFor="upload-photo">
                    <input
                      style={{ display: "block" }}
                      id="upload-file"
                      name="upload-file"
                      type="file"
                    />
                    <button className="w3-btn w3-white w3-border w3-border-red w3-round-large"  >Cancel</button>
                    <button className="w3-btn w3-white w3-border w3-border-green w3-round-large" onClick={this.createPipeline}>Create</button>
                  </label>
                </div>
              </div>
              </h6>
            </div>
            <h6>
              <Router>
                <table className="w3-table-all w3-col-50">
                <tr>
                    <th>Pipeline</th>
                    <th>Status</th>
                    <th>Custom</th>
                  </tr>
                  {pipelines.map((val,idx)=>{
                    return(
                    <tr key={idx}>
                      <td><Link to="/addFeature" >{val.pipelineName}</Link></td>
                    <td>{val.status}</td>
                      <td></td>
                    </tr>
                    )
                  })}
                </table>
                </Router>
                </h6>
                </div>
                
            )
    }
}
export default CreatePipeline;


<file_sep>/src/firebase/firebase.js
import firebase from 'firebase';

const firebaseConfig = {
    apiKey: "<KEY>",
    authDomain: "epidatafuse.firebaseapp.com",
    databaseURL: "https://epidatafuse.firebaseio.com",
    projectId: "epidatafuse",
    storageBucket: "epidatafuse.appspot.com",
    messagingSenderId: "697726385863",
    appId: "1:697726385863:web:419e9fc84e35b73fe848e2",
    measurementId: "G-4XHGTM838D"
  };

const fire = firebase.initializeApp(firebaseConfig);
export default fire;
<file_sep>/src/components/pipeline.js
import React from 'react';
import axios from 'axios';
import {Route,Redirect, BrowserRouter as Router, Switch, Link} from 'react-router-dom';
import GranularityConfig from './granuralityConfig'
import GranularityMappingConfig from './granularityMappingConfig'
import SchemaConfig from './schemaConfig'
import Query from './query';
import SourceConnector from './sourceConnector';
import IngestConfig from './ingestConfig';
import Start from './start';
import { Divider } from '@material-ui/core';


class Pipeline extends React.Component {

    handleSubmit = (e) => {
        e.preventDefault()
    }
    render() {
        return(
            <div>
                <Router>
                    <Link to="/addGranular"><button className="w3-btn w3-white w3-border w3-border-green w3-round-large" >Add New Granularity</button></Link>
                    <Link to="/addFeature"><button className="w3-btn w3-white w3-border w3-border-green w3-round-large">Add New Feature</button></Link>
                    <Link to="/addSource"><button className="w3-btn w3-white w3-border w3-border-green w3-round-large">Add New Sources</button></Link>
                    <Link to="/addGranConfig"> <button className="w3-btn w3-white w3-border w3-border-green w3-round-large">Add Granularity Config</button></Link>
                    <Link to="/addAggreConfig"><button className="w3-btn w3-white w3-border w3-border-green w3-round-large">Add Granularity Mapping Config</button></Link>
                <Switch>
                    <Route exact path="/addGranular"><SchemaConfig/></Route>
                    <Route exact path="/addFeature"><IngestConfig/></Route>
                    <Route exact path="/addSource"><SourceConnector/></Route>
                    <Route exact path="/addGranConfig"><GranularityConfig/></Route>
                    <Route exact path="/addAggreConfig"><GranularityMappingConfig/></Route>
                </Switch>
                <br/><br/>
                <table className="w3-table-all w3-col-50">
                <tr>
                    <th>Feature</th>
                    <th>Spatial</th>
                    <th>Temporal</th>
                    <th>Target Spatial</th>
                    <th>Target Temporal</th>
                    <th>Data Source</th>
                  </tr>
                  
                    <tr >
                      <td>val 1</td>
                      <td>val 1</td>
                      <td>val 1</td>
                      <td>val 1</td>
                      <td>val 1</td>
                      <td>val 1</td>
                    </tr>
                </table>
                </Router>
            </div>
            
        )
    }
}

export default Pipeline;<file_sep>/src/App.js
import React,{useRef, useState} from 'react';
import './App.css';
import './w3.css';
import './Mt.css';
import Home from './components/home'
import SignIn from './components/signin'
import SignUp from './components/signup'
import {Route,Redirect, BrowserRouter as Router, Switch, Link} from 'react-router-dom';
import CustomRouter from './components/router';
import fire from './firebase/firebase';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      user: null,
    }

    this.authListenr = this.authListener.bind(this);
  }

  componentDidMount(){
    console.log(this.state.user)
    this.authListener();
  }

  authListener(){
    fire.auth().onAuthStateChanged((user)=>{
      if(user){
        this.setState({ user });
      } else {
        this.setState({user:null});
      }
    })
  }
  handleSubmit = (e) => {
    e.preventDefault()
}
  render(){
  return (
    <div>
      <Switch>
      <Route exact path="/">
      {this.state.user ? (<Home/>) : (<SignIn/>)}
      </Route>
      <CustomRouter exact path="/signup" component={SignUp} {...this.state}/> 
      </Switch>   
    </div>
  );
  }
}
export default App;
