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