1*61c4878aSAndroid Build Coastguard Worker// Copyright 2022 The Pigweed Authors 2*61c4878aSAndroid Build Coastguard Worker// 3*61c4878aSAndroid Build Coastguard Worker// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4*61c4878aSAndroid Build Coastguard Worker// use this file except in compliance with the License. You may obtain a copy of 5*61c4878aSAndroid Build Coastguard Worker// the License at 6*61c4878aSAndroid Build Coastguard Worker// 7*61c4878aSAndroid Build Coastguard Worker// https://www.apache.org/licenses/LICENSE-2.0 8*61c4878aSAndroid Build Coastguard Worker// 9*61c4878aSAndroid Build Coastguard Worker// Unless required by applicable law or agreed to in writing, software 10*61c4878aSAndroid Build Coastguard Worker// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11*61c4878aSAndroid Build Coastguard Worker// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12*61c4878aSAndroid Build Coastguard Worker// License for the specific language governing permissions and limitations under 13*61c4878aSAndroid Build Coastguard Worker// the License. 14*61c4878aSAndroid Build Coastguard Worker 15*61c4878aSAndroid Build Coastguard Workerimport type {NextPage} from 'next' 16*61c4878aSAndroid Build Coastguard Workerimport Head from 'next/head' 17*61c4878aSAndroid Build Coastguard Workerimport styles from '../styles/Home.module.scss'; 18*61c4878aSAndroid Build Coastguard Workerimport Log from "../components/log"; 19*61c4878aSAndroid Build Coastguard Workerimport Repl from "../components/repl"; 20*61c4878aSAndroid Build Coastguard Workerimport Connect from "../components/connect"; 21*61c4878aSAndroid Build Coastguard Workerimport BtnUploadDB from '../components/uploadDb'; 22*61c4878aSAndroid Build Coastguard Worker 23*61c4878aSAndroid Build Coastguard Workerimport {WebSerial, Device} from "pigweedjs"; 24*61c4878aSAndroid Build Coastguard Workerimport {useState, useEffect} from 'react'; 25*61c4878aSAndroid Build Coastguard Worker 26*61c4878aSAndroid Build Coastguard Workerconst Home: NextPage = () => { 27*61c4878aSAndroid Build Coastguard Worker const [device, setDevice] = useState<Device | undefined>(undefined); 28*61c4878aSAndroid Build Coastguard Worker const [tokenDB, setTokenDB] = useState(""); 29*61c4878aSAndroid Build Coastguard Worker useEffect(() => { 30*61c4878aSAndroid Build Coastguard Worker if (!device || !tokenDB) return; 31*61c4878aSAndroid Build Coastguard Worker // Dynamically load logging component 32*61c4878aSAndroid Build Coastguard Worker import('pigweedjs/logging') 33*61c4878aSAndroid Build Coastguard Worker .then(({createLogViewer, PigweedRPCLogSource}) => { 34*61c4878aSAndroid Build Coastguard Worker const source = new PigweedRPCLogSource(device, tokenDB); 35*61c4878aSAndroid Build Coastguard Worker createLogViewer(source, document.querySelector('.log-container')!); 36*61c4878aSAndroid Build Coastguard Worker }); 37*61c4878aSAndroid Build Coastguard Worker }, [device, tokenDB]); 38*61c4878aSAndroid Build Coastguard Worker return ( 39*61c4878aSAndroid Build Coastguard Worker <div className={styles.container}> 40*61c4878aSAndroid Build Coastguard Worker <Head> 41*61c4878aSAndroid Build Coastguard Worker <title>Pigweed Console</title> 42*61c4878aSAndroid Build Coastguard Worker <meta name="description" content="Generated by create next app" /> 43*61c4878aSAndroid Build Coastguard Worker <link rel="icon" href="/favicon.png" /> 44*61c4878aSAndroid Build Coastguard Worker </Head> 45*61c4878aSAndroid Build Coastguard Worker 46*61c4878aSAndroid Build Coastguard Worker <main className={styles.main}> 47*61c4878aSAndroid Build Coastguard Worker <div className={styles.toolbar}> 48*61c4878aSAndroid Build Coastguard Worker <span className={styles.logo}><span>Pigweed</span> Web Console</span> 49*61c4878aSAndroid Build Coastguard Worker <Connect onConnection={(device) => { 50*61c4878aSAndroid Build Coastguard Worker setDevice(device); 51*61c4878aSAndroid Build Coastguard Worker }} /> 52*61c4878aSAndroid Build Coastguard Worker <BtnUploadDB onUpload={(db) => { 53*61c4878aSAndroid Build Coastguard Worker setTokenDB(db); 54*61c4878aSAndroid Build Coastguard Worker }} /> 55*61c4878aSAndroid Build Coastguard Worker </div> 56*61c4878aSAndroid Build Coastguard Worker 57*61c4878aSAndroid Build Coastguard Worker <div className={styles.grid}> 58*61c4878aSAndroid Build Coastguard Worker <div className={'log-container ' + styles.logsContainer}> 59*61c4878aSAndroid Build Coastguard Worker </div> 60*61c4878aSAndroid Build Coastguard Worker <div> 61*61c4878aSAndroid Build Coastguard Worker <Repl device={device}></Repl> 62*61c4878aSAndroid Build Coastguard Worker </div> 63*61c4878aSAndroid Build Coastguard Worker </div> 64*61c4878aSAndroid Build Coastguard Worker </main> 65*61c4878aSAndroid Build Coastguard Worker </div> 66*61c4878aSAndroid Build Coastguard Worker ) 67*61c4878aSAndroid Build Coastguard Worker} 68*61c4878aSAndroid Build Coastguard Worker 69*61c4878aSAndroid Build Coastguard Workerexport default Home 70
