seb/searchPopper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
sebseb7
2024-09-23 09:12:52 +02:00
parent 41ebffe71c
commit cc8b5d2765
4 changed files with 128 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
search.js
View File

@@ -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: "<!DOCTYPE html>\n<html><head>" + '<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:;base64,iVBORw0KGgo="></head><body style="background-color: rgb(192,208,208)"></body></html>'
templateContent: "<!DOCTYPE html>\n<html><head>" + '<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:;base64,iVBORw0KGgo="></head><body style="background-color: #c5cbe3"><div id="react_insert"></div></body></html>'
}),
//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<per.length;i++) if (!isNaN(parseInt(per[i], 10))) {
per[i] = ' '+per[i];
}
queries.push(offset*10);
queries.push('%'+(per.join('%'))+'%');
qstr+= ' OR cName LIKE ? ';
}
qstr = qstr.substring(3);
connection.query('SELECT tartikel.kArtikel,cArtNr,cName,cSeo FROM tartikel LEFT OUTER JOIN tartikelpict ON (tartikelpict.kArtikel = tartikel.kArtikel) WHERE 1=2 '+qstr+' ORDER BY cName limit 11 OFFSET ?',queries, function (error, results) {
queries.push(offset*10);
if((text.length < 200)&&(text.length > 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){

97
src/Content.js
View File

@@ -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 (
<div style={{ width:'100%'}}>
<Stack spacing={2}>
<Card style={{ width:'100%',margin:'20px auto'}} sx={{ maxWidth: 'sm' }}>
<TextField
spellCheck={false}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon/>
</InputAdornment>
)
}}
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
/>
</Card>
<Popper
open={this.state.result.length > 0}
anchorEl={this.state.anchorEl}
placement={'bottom-start'}
style={{ width:'100%'}} sx={{ maxWidth: 'sm' }}
>
<Paper style={{ width:'100%',margin:0, padding: 20}} sx={{ maxWidth: 'sm' }}>
<Stack spacing={1}>
{this.state.result.slice(0, 10).map((line,i)=>(
<Stack key={i} direction="row" spacing={2} style={{cursor: 'pointer',userSelect:'none'}} sx={{alignItems: "center"}} onClick={() => { window.location = 'https://t.growheads.de/'+line.cSeo }}>
<Avatar src={'https://t.growheads.de/media/image/product/'+(line.kArtikel)+'/xs/'+(line.cSeo)+'.jpg'} sx={{ width: 40, height: 40 }} variant="square"/>
<Typography>{line.cName}</Typography>
</Stack>
))}
<>
<TextField
spellCheck={false}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon/>
</InputAdornment>
)
}}
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
/>
<Popper
open={this.state.result.length > 0}
anchorEl={this.state.anchorEl}
placement={'bottom-start'}
style={{ zIndex:1024,width:'100%'}} sx={{ maxWidth: 'sm' }}
onMouseDown={e => e.preventDefault()}
>
<Paper style={{ width:'100%',margin:0,marginTop:'5px', padding: 20}} elevation={20} sx={{ maxWidth: 'sm' }}>
<Stack spacing={1}>
{ (((this.state.offset!=0)||(this.state.result[10])) &&
<Grid container>
<Grid item xs={6}>
{ (this.state.offset!=0 &&
<IconButton onClick={this.navigateBefore}><NavigateBeforeIcon/></IconButton>
<NavigateBeforeIcon style={{cursor: 'pointer'}} onClick={this.navigateBefore}/>
)}
</Grid>
<Grid item xs={6}>
{ (this.state.result[10] &&
<Grid container justifyContent="flex-end"><IconButton onClick={this.navigateNext}><NavigateNextIcon/></IconButton></Grid>
<Grid container justifyContent="flex-end"><NavigateNextIcon style={{cursor: 'pointer'}} onClick={this.navigateNext}/></Grid>
)}
</Grid>
</Grid>
</Stack>
</Paper>
</Popper>
</Stack>
</div>
)}
{this.state.result.slice(0, 10).map((line,i)=>(
<Stack key={i} direction="row" spacing={2} style={{cursor: 'pointer',userSelect:'none'}} sx={{alignItems: "center"}} onClick={() => { window.location = window.location.protocol + "//" + window.location.host + '/' + line.cSeo }}>
<Avatar src={'/media/image/product/'+(line.kArtikel)+'/xs/'+(line.cSeo)+'.jpg'} imgProps={{style:{width:40,height:40,objectFit: 'contain'}}} variant="square"/>
<Typography style={{width:'100%',display:'flex',flexDirection:'row'}}>
<span style={{flexGrow:1,display:'block',overflow:'hidden'}}>{line.cName}</span>
<span style={{display:'block',paddingLeft:'1em'}}>{
(line.bLieferantenlagerbestand||line.bLagerbestand)?(new Intl.NumberFormat("de-DE", {style: "currency",currency: "EUR"}).format(line.fStandardpreisNetto * (100 + line.fMwSt) / 100)):''
}</span>
</Typography>
</Stack>
))}
</Stack>
</Paper>
</Popper>
</>
);
}
}

48
src/index.js
View File

@@ -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(
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
);
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(
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
);
});

2
src/styles.css
View File

@@ -1,4 +1,4 @@
body {
overflow-y: scroll;
padding: 20px;
padding: 0px;
}