From cc8b5d2765efbc2efc6e79e9af6056d3c714801f Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Mon, 23 Sep 2024 09:12:52 +0200 Subject: [PATCH] upd --- search.js | 75 +++++++++++++++++++------------------- src/Content.js | 97 ++++++++++++++++++++++++++------------------------ src/index.js | 48 +++++++++++++++++++------ src/styles.css | 2 +- 4 files changed, 128 insertions(+), 94 deletions(-) diff --git a/search.js b/search.js index 9ab4bc0..4489ec9 100644 --- a/search.js +++ b/search.js @@ -27,30 +27,12 @@ const compiler = webpack({ test: /\.css$/, use: ["style-loader", "css-loader"] } - /* { - test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, - use: [ - { - loader: 'file-loader', - options: { - name: '[name].[ext]', - outputPath: 'fonts/' - } - } - ] - }*/ - /*{ - test: /\.(woff|woff2)$/i, - use: ['base64-inline-loader'], - type: 'javascript/auto' - }*/ ] }, plugins: [ new HtmlWebpackPlugin({ - templateContent: "\n" + '' + templateContent: "\n" + '
' }), - //new BundleAnalyzerPlugin({analyzerHost:'0.0.0.0'}), ...(isDev ? [new ReactRefreshWebpackPlugin(), new webpack.HotModuleReplacementPlugin(), new ESLintPlugin()] : []) ], resolve: { @@ -65,21 +47,21 @@ const compiler = webpack({ optimization: { moduleIds: "deterministic", splitChunks: { - chunks: "all", - cacheGroups: { + //chunks: "all", + /*cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" } - } + }*/ } }, output: { - filename: "[name].[contenthash].js", - chunkFilename: "[name].[contenthash].js", + filename: "searchPopper.js",//"[name].[contenthash].js", + chunkFilename: "searchPopper.js",//"[name].[contenthash].js", clean: true, - asyncChunks: true + asyncChunks: false } }); @@ -205,25 +187,46 @@ function runapp(socket){ socket.on("search", (text, offset, callback) => { try{ + + text = text.toString().trim().replace(/(\D)-/g, "$1 ").replace(/ {2,}/g, " "); - if(text.length > 2){ + let queries = []; + let qstr = ''; - let queries = []; - let qstr = ''; - - for(const per of permute(text.toString().trim().replace(/ {2,}/g, " ").split(' '))){ - queries.push('%'+(per.join('%'))+'%'); - qstr+= ' OR cName LIKE ? '; + for(const per of permute(text.split(' '))){ + for(let i=0;i 2)&&(queries.length < 129)){ + + connection.query(` + SELECT + tartikel.kArtikel, + cArtNr, + cName, + cSeo, + fLieferantenlagerbestand > 0 as bLieferantenlagerbestand, + fLagerbestand > 0 as bLagerbestand, + fStandardpreisNetto, + fMwSt + FROM tartikel + LEFT OUTER JOIN tartikelpict ON (tartikelpict.kArtikel = tartikel.kArtikel AND nNr = 1) + WHERE nIstVater = 0 and ( `+qstr+` ) ORDER BY cName limit 11 OFFSET ?`, + queries, function (error, results) + { if (callback) callback(error,results); }); - }else{ - callback(true); + callback({length:text.length,permutations:queries.length}); } } catch(e){ diff --git a/src/Content.js b/src/Content.js index 1193944..b188951 100644 --- a/src/Content.js +++ b/src/Content.js @@ -5,9 +5,7 @@ import { Popper, Avatar, Typography, - Card, InputAdornment, - IconButton, Grid } from "@mui/material"; @@ -50,6 +48,7 @@ export default class Content extends React.Component { offset:0, anchorEl:null }; + this.interval = null; } navigateNext = () => { @@ -65,60 +64,66 @@ export default class Content extends React.Component { render() { return ( -
- - - - - - ) - }} - value={this.state.searchtext} - inputRef={(input) => {input && input.focus()}} - onChange={(e) => { - this.setState({ offset:0,anchorEl:e.target,searchtext: e.target.value }); - const setState = this.setState.bind(this); - searchDebounced(e.target.value,this.props.socket,setState,0); - }} - autoComplete="off" - fullWidth - /> - - 0} - anchorEl={this.state.anchorEl} - placement={'bottom-start'} - style={{ width:'100%'}} sx={{ maxWidth: 'sm' }} - > - - - {this.state.result.slice(0, 10).map((line,i)=>( - { window.location = 'https://t.growheads.de/'+line.cSeo }}> - - {line.cName} - - ))} + <> + + + + ) + }} + value={this.state.searchtext} + inputRef={(input) => {input && input.focus()}} + onChange={(e) => { + this.setState({ offset:0,anchorEl:e.target,searchtext: e.target.value }); + const setState = this.setState.bind(this); + searchDebounced(e.target.value,this.props.socket,setState,0); + }} + autoComplete="off" + onBlur={()=>{if(this.state.result.length > 0) this.setState({result:[]})}} + onKeyDown={(e)=>{ if (e.key === 'Enter') window.location = window.location.protocol + "//" + window.location.host + '/' + encodeURIComponent(this.state.searchtext); }} + fullWidth + /> + 0} + anchorEl={this.state.anchorEl} + placement={'bottom-start'} + style={{ zIndex:1024,width:'100%'}} sx={{ maxWidth: 'sm' }} + onMouseDown={e => e.preventDefault()} + > + + + { (((this.state.offset!=0)||(this.state.result[10])) && { (this.state.offset!=0 && - + )} { (this.state.result[10] && - + )} - - - - -
+ )} + {this.state.result.slice(0, 10).map((line,i)=>( + { window.location = window.location.protocol + "//" + window.location.host + '/' + line.cSeo }}> + + + {line.cName} + { + (line.bLieferantenlagerbestand||line.bLagerbestand)?(new Intl.NumberFormat("de-DE", {style: "currency",currency: "EUR"}).format(line.fStandardpreisNetto * (100 + line.fMwSt) / 100)):'' + } + + + ))} + + + + ); } } diff --git a/src/index.js b/src/index.js index fbf1d30..e0cecb4 100644 --- a/src/index.js +++ b/src/index.js @@ -15,11 +15,11 @@ function App() { } const theme = createTheme({ - palette: { +/* palette: { background: { - default: "#c0d0d0;" + default: "#c5cbe3;" } - }, + },*/ typography: { fontFamily: "Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif", fontWeightBold: 700, @@ -43,11 +43,37 @@ const theme = createTheme({ } }); -var appDiv = document.createElement("div"); -document.body.appendChild(appDiv); -ReactDOM.createRoot(appDiv).render( - - - - -); +function waitForElm(selector) { + return new Promise(resolve => { + if (document.querySelector(selector)) { + return resolve(document.querySelector(selector)); + } + + const observer = new MutationObserver(() => { + if (document.querySelector(selector)) { + observer.disconnect(); + resolve(document.querySelector(selector)); + } + }); + + observer.observe(document.documentElement, { + childList: true, + subtree: true + }); + }); +} + +waitForElm('#react_insert').then((elm) => { + console.log('Element is ready'); + const root = ReactDOM.createRoot(elm); + root.render( + //var appDiv = document.createElement("div"); + //document.body.appendChild(appDiv); + //ReactDOM.createRoot(appDiv).render( + + + + + ); +}); + diff --git a/src/styles.css b/src/styles.css index f0f92a5..adff865 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,4 @@ body { overflow-y: scroll; - padding: 20px; + padding: 0px; }