\n \n \n Google Sheets\n \n
\n \n 
\n
\n \n \n \n
\n \n );\n }\n}\n\nexport default Sidebar;\n","import React from \"react\";\nimport google from '../assets/google';\nimport { loadTable1, loadTableHeader } from '../helpers/spreadsheet';\nimport { compareJersey } from '../helpers/compareJersey';\n// reactstrap components\nimport {\n Card,\n CardHeader,\n CardBody,\n CardTitle,\n Table,\n Row,\n Col,\n} from \"reactstrap\";\n\nclass Table1 extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n data: [],\n header: [],\n };\n }\n\n componentDidMount() {\n this.methodsToCall();\n setInterval(() => {\n this.methodsToCall();\n }, 60000);\n }\n\n methodsToCall() {\n window.gapi.load('client', this.initClient);\n }\n\n initClient = () => {\n window.gapi.client.init({\n apiKey: google.apiKey,\n discoveryDocs: google.googleSheet\n })\n .then(() => {\n loadTable1(this.onLoad, this.props.type);\n })\n }\n onLoad = (data, error) => {\n if (data) {\n this.setState({\n header: data.headers,\n data: data.dataTable,\n });\n }\n }\n\n renderTableHeader() {\n return this.state.header.map((item, key) => {\n const { value1, value2, value3, value4 } = item //destructuring\n return (\n {value3}
\n\n \n \n \n {this.props.name} \n \n \n \n \n \n
\n
\n );\n }\n}\n\nexport default Table1;\n","import config from '../assets/google';\r\n\r\n\r\n\r\nexport function loadTable1(callback, type) {\r\n window.gapi.client.load('sheets', 'v4', () => {\r\n window.gapi.client.sheets.spreadsheets.values.batchGet({\r\n spreadsheetId: type === 'men' ? config.spreadsheetIdMen : config.spreadsheetIdWomen,\r\n ranges: ['A6:D6', 'A7:D20']\r\n })\r\n .then((response) => {\r\n\r\n const header = response.result.valueRanges[0].values;\r\n const data = response.result.valueRanges[1].values;\r\n\r\n const headers = header.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3]\r\n }));\r\n\r\n const dataTable = data.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3]\r\n }));\r\n\r\n callback({\r\n headers,\r\n dataTable\r\n });\r\n },\r\n (response) => {\r\n callback(false, response.result.error);\r\n })\r\n });\r\n}\r\n\r\nexport function loadTable2(callback, type) {\r\n window.gapi.client.load('sheets', 'v4', () => {\r\n window.gapi.client.sheets.spreadsheets.values.batchGet({\r\n spreadsheetId: type === 'men' ? config.spreadsheetIdMen : config.spreadsheetIdWomen,\r\n ranges: ['F6:R6', 'F7:R21']\r\n })\r\n .then((response) => {\r\n const header = response.result.valueRanges[0].values;\r\n const data = response.result.valueRanges[1].values;\r\n\r\n const headers = header.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3],\r\n value5: item[4],\r\n value6: item[5],\r\n value7: item[6],\r\n value8: item[7],\r\n value9: item[8],\r\n value10: item[9],\r\n value11: item[10],\r\n value12: item[11],\r\n value13: item[12],\r\n }));\r\n\r\n const dataTable = data.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3],\r\n value5: item[4],\r\n value6: item[5],\r\n value7: item[6],\r\n value8: item[7],\r\n value9: item[8],\r\n value10: item[9],\r\n value11: item[10],\r\n value12: item[11],\r\n value13: item[12],\r\n }));\r\n\r\n callback({\r\n headers,\r\n dataTable\r\n });\r\n },\r\n (response) => {\r\n callback(false, response.result.error);\r\n })\r\n });\r\n}\r\n\r\nexport function loadTable3(callback, type) {\r\n window.gapi.client.load('sheets', 'v4', () => {\r\n window.gapi.client.sheets.spreadsheets.values.batchGet({\r\n spreadsheetId: type === 'men' ? config.spreadsheetIdMen : config.spreadsheetIdWomen,\r\n ranges: ['F24:R24', 'F25:R39']\r\n })\r\n .then((response) => {\r\n const header = response.result.valueRanges[0].values;\r\n const data = response.result.valueRanges[1].values;\r\n\r\n const headers = header.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3],\r\n value5: item[4],\r\n value6: item[5],\r\n value7: item[6],\r\n value8: item[7],\r\n value9: item[8],\r\n value10: item[9],\r\n value11: item[10],\r\n value12: item[11],\r\n value13: item[12],\r\n }));\r\n\r\n const dataTable = data.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3],\r\n value5: item[4],\r\n value6: item[5],\r\n value7: item[6],\r\n value8: item[7],\r\n value9: item[8],\r\n value10: item[9],\r\n value11: item[10],\r\n value12: item[11],\r\n value13: item[12],\r\n }));\r\n\r\n callback({\r\n headers,\r\n dataTable\r\n });\r\n },\r\n (response) => {\r\n callback(false, response.result.error);\r\n })\r\n });\r\n}\r\n\r\nexport function loadTable4(callback, type) {\r\n window.gapi.client.load('sheets', 'v4', () => {\r\n window.gapi.client.sheets.spreadsheets.values.batchGet({\r\n spreadsheetId: type === 'men' ? config.spreadsheetIdMen : config.spreadsheetIdWomen,\r\n ranges: ['F42:M42', 'F43:M57']\r\n })\r\n .then((response) => {\r\n const header = response.result.valueRanges[0].values;\r\n const data = response.result.valueRanges[1].values;\r\n\r\n const headers = header.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3],\r\n value5: item[4],\r\n value6: item[5],\r\n value7: item[6],\r\n value8: item[7]\r\n }));\r\n\r\n const dataTable = data.map((item) => ({\r\n value1: item[0],\r\n value2: item[1],\r\n value3: item[2],\r\n value4: item[3],\r\n value5: item[4],\r\n value6: item[5],\r\n value7: item[6],\r\n value8: item[7]\r\n }));\r\n\r\n callback({\r\n headers,\r\n dataTable\r\n });\r\n },\r\n (response) => {\r\n callback(false, response.result.error);\r\n })\r\n });\r\n}\r\n\r\n","import React from \"react\";\nimport google from '../assets/google';\nimport { loadTable2, loadTableHeader2 } from '../helpers/spreadsheet';\nimport { compareJersey } from '../helpers/compareJersey';\n// reactstrap components\nimport {\n Card,\n CardHeader,\n CardBody,\n CardTitle,\n Table,\n Row,\n Col,\n} from \"reactstrap\";\n\nclass Table2 extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n data: [],\n header: [],\n };\n }\n\n componentDidMount() {\n this.methodsToCall();\n setInterval(() => {\n this.methodsToCall();\n }, 60000);\n }\n\n methodsToCall() {\n window.gapi.load('client', this.initClient);\n }\n\n initClient = () => {\n window.gapi.client.init({\n apiKey: google.apiKey,\n discoveryDocs: google.googleSheet\n })\n .then(() => {\n loadTable2(this.onLoad, this.props.type);\n })\n }\n\n onLoad = (data, error) => {\n if (data) {\n this.setState({\n header: data.headers,\n data: data.dataTable,\n });\n }\n }\n\n renderTableHeader() {\n return this.state.header.map((item, key) => {\n const { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10, value11, value12, value13 } = item //destructuring\n return (\n \n \n \n {this.renderTableHeader()}\n \n \n {this.renderTableData()}\n \n
\n
\n {value5}
\n\n \n \n \n {this.props.name} \n \n \n \n \n \n
\n
\n );\n }\n}\n\nexport default Table2;\n","import React from \"react\";\nimport google from '../assets/google';\nimport { loadTable3, loadTableHeader3 } from '../helpers/spreadsheet';\nimport { compareJersey } from '../helpers/compareJersey';\n// reactstrap components\nimport {\n Card,\n CardHeader,\n CardBody,\n CardTitle,\n Table,\n Row,\n Col,\n} from \"reactstrap\";\n\nclass Table3 extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n data: [],\n header: [],\n };\n }\n\n componentDidMount() {\n this.methodsToCall();\n setInterval(() => {\n this.methodsToCall();\n }, 60000);\n }\n\n methodsToCall() {\n window.gapi.load('client', this.initClient);\n }\n\n initClient = () => {\n window.gapi.client.init({\n apiKey: google.apiKey,\n discoveryDocs: google.googleSheet\n })\n .then(() => {\n loadTable3(this.onLoad, this.props.type);\n })\n }\n\n onLoad = (data, error) => {\n if (data) {\n this.setState({\n header: data.headers,\n data: data.dataTable,\n });\n }\n }\n\n renderTableHeader() {\n return this.state.header.map((item, key) => {\n const { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10, value11, value12, value13 } = item //destructuring\n return (\n \n \n \n {this.renderTableHeader()}\n \n \n {this.renderTableData()}\n \n
\n
\n {value5}
\n\n \n \n \n {this.props.name} \n \n \n \n \n \n
\n
\n );\n }\n}\n\nexport default Table3;\n","import React from \"react\";\nimport google from '../assets/google';\nimport { loadTable4 } from '../helpers/spreadsheet';\nimport { compareJersey } from '../helpers/compareJersey';\n// reactstrap components\nimport {\n Card,\n CardHeader,\n CardBody,\n CardTitle,\n Table,\n Row,\n Col,\n} from \"reactstrap\";\n\nclass Table4 extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n data: [],\n header: [],\n };\n }\n\n componentDidMount() {\n this.methodsToCall();\n setInterval(() => {\n this.methodsToCall();\n }, 60000);\n }\n\n methodsToCall() {\n window.gapi.load('client', this.initClient);\n }\n\n initClient = () => {\n window.gapi.client.init({\n apiKey: google.apiKey,\n discoveryDocs: google.googleSheet\n })\n .then(() => {\n loadTable4(this.onLoad, this.props.type);\n })\n }\n\n onLoad = (data, error) => {\n if (data) {\n this.setState({\n header: data.headers,\n data: data.dataTable,\n });\n }\n }\n\n renderTableHeader() {\n return this.state.header.map((item, key) => {\n const { value1, value2, value3, value4, value5, value6, value7, value8 } = item //destructuring\n return (\n \n \n \n {this.renderTableHeader()}\n \n \n {this.renderTableData()}\n \n
\n
\n {value5}
\n\n \n \n \n {this.props.name} \n \n \n \n \n \n
\n
\n );\n }\n}\n\nexport default Table4;\n","import React from \"react\";\n// react plugin used to create google maps\nimport {\n withScriptjs,\n withGoogleMap,\n GoogleMap,\n Marker,\n} from \"react-google-maps\";\n// reactstrap components\nimport { Card, CardHeader, CardBody, Row, Col } from \"reactstrap\";\n\nconst MapWrapper = withScriptjs(\n withGoogleMap((props) => (\n \n \n \n {this.renderTableHeader()}\n \n \n {this.renderTableData()}\n \n
\n
\n \n \n \n Google Maps \n \n \n
\n \n \n \n \n \n \n );\n }\n}\n\nexport default Map;\n","\nimport Dashboard from \"views/Dashboard.js\";\nimport Notifications from \"views/Notifications.js\";\nimport Icons from \"views/Icons.js\";\nimport Typography from \"views/Typography.js\";\nimport TableList from \"views/Table1.js\";\nimport TableList2 from \"views/Table2\";\nimport TableList3 from \"views/Table3\";\nimport TableList4 from 'views/Table4';\nimport Maps from \"views/Map.js\";\nimport UserPage from \"views/User.js\";\nimport UpgradeToPro from \"views/Upgrade.js\";\n\n// var routes = [\n// {\n// path: \"/dashboard\",\n// name: \"Dashboard\",\n// icon: \"nc-icon nc-bank\",\n// component: Dashboard,\n// layout: \"/admin\",\n// },\n// {\n// path: \"/icons\",\n// name: \"Icons\",\n// icon: \"nc-icon nc-diamond\",\n// component: Icons,\n// layout: \"/admin\",\n// },\n// {\n// path: \"/maps\",\n// name: \"Maps\",\n// icon: \"nc-icon nc-pin-3\",\n// component: Maps,\n// layout: \"/admin\",\n// },\n// {\n// path: \"/notifications\",\n// name: \"Notifications\",\n// icon: \"nc-icon nc-bell-55\",\n// component: Notifications,\n// layout: \"/admin\",\n// },\n// {\n// path: \"/user-page\",\n// name: \"User Profile\",\n// icon: \"nc-icon nc-single-02\",\n// component: UserPage,\n// layout: \"/admin\",\n// },\n// {\n// path: \"/tables\",\n// name: \"Table List\",\n// icon: \"nc-icon nc-tile-56\",\n// component: TableList,\n// layout: \"/admin\",\n// },\n// {\n// path: \"/typography\",\n// name: \"Typography\",\n// icon: \"nc-icon nc-caps-small\",\n// component: Typography,\n// layout: \"/admin\",\n// }\n// ];\n\nvar routes = [\n {\n path: \"/table1\",\n name: \"MEN HELLOFRESH TEAM COMPETITION\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList,\n layout: \"/admin\",\n type: 'men',\n },\n {\n path: \"/table2\",\n name: \"MEN COLAVITA INDIVIDUAL LEADER\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList2,\n layout: \"/admin\",\n type: 'men',\n },\n {\n path: \"/table3\",\n name: \"MEN PRIMAL BEST YOUNG RIDER\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList3,\n layout: \"/admin\",\n type: 'men',\n },\n {\n path: \"/table4\",\n name: \"MEN BIKEREG LAP LEADER\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList4,\n layout: \"/admin\",\n type: 'men',\n },\n\n\n\n {\n path: \"/table5\",\n name: \"WOMEN HELLOFRESH TEAM COMPETITION\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList,\n layout: \"/admin\",\n type: 'women',\n },\n {\n path: \"/table6\",\n name: \"WOMEN COLAVITA INDIVIDUAL LEADER\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList2,\n layout: \"/admin\",\n type: 'women',\n },\n {\n path: \"/table7\",\n name: \"WOMEN PRIMAL BEST YOUNG RIDER\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList3,\n layout: \"/admin\",\n type: 'women',\n },\n {\n path: \"/table8\",\n name: \"WOMEN BIKEREG LAP LEADER\",\n icon: \"nc-icon nc-tile-56\",\n component: TableList4,\n layout: \"/admin\",\n type: 'women',\n },\n\n\n\n\n\n {\n path: \"/\",\n pathTo: \"/results\",\n name: \"HELLO FRESH TEAM COMPETITION\",\n redirect: true\n }\n];\nexport default routes;\n","\nimport React from \"react\";\n\n// reactstrap components\nimport {\n Button,\n Card,\n CardHeader,\n CardBody,\n CardFooter,\n CardTitle,\n FormGroup,\n Form,\n Input,\n Row,\n Col,\n} from \"reactstrap\";\n\nclass User extends React.Component {\n render() {\n return (\n <>\n \n \n \n \n \n \n
\n \n \n \n \n Team Members \n \n \n \n \n \n \n \n Edit Profile \n \n \n \n \n \n \n
\n
\n \n );\n }\n}\n\nexport default User;\n","import React from \"react\";\n\n// reactstrap components\nimport {\n Button,\n Card,\n CardHeader,\n CardBody,\n CardTitle,\n Table,\n Row,\n Col,\n} from \"reactstrap\";\n\nclass Upgrade extends React.Component {\n render() {\n return (\n <>\n \n
\n \n e.preventDefault()}>\n
\n Chet Faker
\n \n@chetfaker
\n\n \"I like the way you work it
\n No diggity
I wanna bag it up\"\n
\n
\n \n \n 12
\n \n \n 2GB
\n \n \n 24,6$
\n \n
\n
\n \n 12
\n Files\n
\n \n \n 2GB
\n Used\n
\n \n \n 24,6$
\n Spent\n
\n \n - \n
- \n
\n
\n\n \n\n \n\n DJ Khaled
\n \n Offline\n \n \n\n \n - \n
\n
\n\n \n\n \n\n Edgar
\n \n Available\n \n \n\n \n - \n
\n
\n\n \n\n \n\n Flume
\n \n Busy\n \n \n\n \n
\n \n \n \n Paper Dashboard PRO \n \n \n \n \n
\n \n \n \n
\n
\n \n );\n }\n}\n\nexport default Upgrade;\n","import React from \"react\";\nimport { Link, NavLink } from \"react-router-dom\";\nimport {\n Collapse,\n Navbar,\n NavbarToggler,\n NavbarBrand,\n Nav,\n NavItem,\n Dropdown,\n DropdownToggle,\n DropdownMenu,\n DropdownItem,\n Container,\n InputGroup,\n InputGroupText,\n InputGroupAddon,\n Input,\n} from \"reactstrap\";\n\nimport routes from \"routes.js\";\n\nclass Header extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isOpen: false,\n dropdownOpen: false,\n color: \"transparent\",\n };\n // this.toggle = this.toggle.bind(this);\n // this.dropdownToggle = this.dropdownToggle.bind(this);\n // this.sidebarToggle = React.createRef();\n }\n // toggle() {\n // if (this.state.isOpen) {\n // this.setState({\n // color: \"transparent\",\n // });\n // } else {\n // this.setState({\n // color: \"dark\",\n // });\n // }\n // this.setState({\n // isOpen: !this.state.isOpen,\n // });\n // }\n // dropdownToggle(e) {\n // this.setState({\n // dropdownOpen: !this.state.dropdownOpen,\n // });\n // }\n getBrand() {\n let brandName = \"Default Brand\";\n routes.map((prop, key) => {\n if (window.location.href.indexOf(prop.path) !== -1) {\n brandName = prop.name;\n }\n return null;\n });\n return brandName;\n }\n // openSidebar() {\n // document.documentElement.classList.toggle(\"nav-open\");\n // this.sidebarToggle.current.classList.toggle(\"toggled\");\n // }\n // function that adds color dark/transparent to the navbar on resize (this is for the collapse)\n updateColor() {\n if (window.innerWidth < 993 && this.state.isOpen) {\n this.setState({\n color: \"dark\",\n });\n } else {\n this.setState({\n color: \"transparent\",\n });\n }\n }\n componentDidMount() {\n window.addEventListener(\"resize\", this.updateColor.bind(this));\n }\n componentDidUpdate(e) {\n if (\n window.innerWidth < 993 &&\n e.history.location.pathname !== e.location.pathname &&\n document.documentElement.className.indexOf(\"nav-open\") !== -1\n ) {\n document.documentElement.classList.toggle(\"nav-open\");\n this.sidebarToggle.current.classList.toggle(\"toggled\");\n }\n }\n\n toggle() {\n this.setState({\n isOpen: !this.state.isOpen\n });\n }\n\n toggle2() {\n this.setState({\n isOpen: false\n });\n }\n render() {\n return (\n // add or remove classes depending if we are on full-screen-maps page or not\n \n Are you looking for more components? Please check our\n Premium Version of Paper Dashboard PRO.\n
\n| \n | Free | \nPRO | \n
|---|---|---|
| Components | \n16 | \n160 | \n
| Plugins | \n4 | \n13 | \n
| Example Pages | \n7 | \n27 | \n
| Login, Register, Pricing, Lock Pages | \n\n \n | \n\n \n | \n
| \n DataTables, VectorMap, SweetAlert, Wizard,\n jQueryValidation, FullCalendar etc...\n | \n\n \n | \n\n \n | \n
| Mini Sidebar | \n\n \n | \n\n \n | \n
| Premium Support | \n\n \n | \n\n \n | \n
| \n | Free | \nFrom $49 | \n
| \n | \n | \n \n | \n
\n {/*
\n );\n }\n}\n\nexport default Dashboard;\n","\nimport React, { Component } from \"react\";\n\nimport { Button } from \"reactstrap\";\n\nclass FixedPlugin extends Component {\n constructor(props) {\n super(props);\n this.state = {\n classes: \"dropdown show\",\n };\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick() {\n if (this.state.classes === \"dropdown\") {\n this.setState({ classes: \"dropdown show\" });\n } else {\n this.setState({ classes: \"dropdown\" });\n }\n }\n render() {\n return (\n \n \n {routes.map((prop, key) => {\n // return (\n // ( \n {/* */}\n
\n {/* \n
\n );\n }\n}\n\nexport default FixedPlugin;\n","\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { createBrowserHistory } from \"history\";\nimport { Router, Route, Switch, Redirect, BrowserRouter } from \"react-router-dom\";\n\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"assets/scss/paper-dashboard.scss?v=1.2.0\";\nimport \"assets/demo/demo.css\";\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\n\nimport AdminLayout from \"../src/layouts/Admin\";\n\nconst hist = createBrowserHistory();\n\nReactDOM.render(\n // \n
\n \n \n
\n - \n
- SIDEBAR BACKGROUND \n
- \n \n\n \n
- SIDEBAR ACTIVE COLOR \n
- \n \n\n \n
- \n
- \n
- Want more components? \n
- \n