add feature full text search

pages/index.tsx

@@ -79,6 +79,14 @@ const MapSite: NextPage = (mapData: any) => {
   const [marketFilterTime, setMarketFilterTime] = useState<boolean>(false)
   const [marketFilterAction, setMarketFilterAction] = useState<boolean>(false)
   const [marketFilterTrain, setMarketFilterTrain] = useState<boolean>(false)
+  const [marketFilterFulltext, setMarketFilterFulltext] = useState<any>({
+    searchInName: true,
+    searchInDescription: true,
+    searchInStreet: true,
+    searchInDistrict: true,
+    searchInCity: true,
+    searchInOrganizer: true,
+  })
 
   const [navView, setNavView] = useState<'filter' | 'info'>('filter')
   const [sidebarMenuOpen, setSidebarMenuOpen] = useState<boolean>(false)
@@ -147,7 +155,8 @@ const MapSite: NextPage = (mapData: any) => {
       marketFilterDate,
       marketFilterAction,
       marketFilterTrain,
-      marketFilterTime
+      marketFilterTime,
+      marketFilterFulltext
     )
     // const newData 0
     setMarketsData(JSON.parse(JSON.stringify(newData)))
@@ -159,6 +168,7 @@ const MapSite: NextPage = (mapData: any) => {
     marketFilterAction,
     marketFilterTrain,
     marketFilterTime,
+    marketFilterFulltext,
   ])
 
   // when the sidebar is closed -> set markerId to null
@@ -232,6 +242,8 @@ const MapSite: NextPage = (mapData: any) => {
             setMarketFilterAction={setMarketFilterAction}
             marketFilterTrain={marketFilterTrain}
             setMarketFilterTrain={setMarketFilterTrain}
+            marketFilterFulltext={marketFilterFulltext}
+            setMarketFilterFulltext={setMarketFilterFulltext}
           />
         )}
         {navView === 'info' && <SidebarContentInfo />}

src/components/SearchCheckbox/index.tsx

@@ -0,0 +1,106 @@
+import { FC, ReactElement, useState, ReactNode } from 'react'
+import classNames from 'classnames'
+
+export interface FullTextFilter {
+  filter?: string;
+  searchInName?: boolean;
+  searchInDescription?: boolean;
+  searchInStreet?: boolean;
+  searchInDistrict?: boolean;
+  searchInCity?: boolean;
+  searchInOrganizer?: boolean;
+}
+
+export interface SearchCheckboxesType {
+  selectedFields?: string[];
+  marketFilterFulltext: FullTextFilter;
+  setMarketFilterFulltext: (data: FullTextFilter) => void;
+}
+
+export interface SearchCheckboxType {
+  field: string;
+  label: string;
+  marketFilterFulltext: FullTextFilter;
+  setMarketFilterFulltext: (data: FullTextFilter) => void;
+}
+
+const fields = [
+  "searchInName",
+  "searchInDescription",
+  "searchInOrganizer",
+  "searchInStreet",
+  "searchInDistrict",
+  "searchInCity",
+]
+
+const fieldToLabel: Map<string, string> = new Map([
+  ["searchInName", "Name"],
+  ["searchInDescription", "Beschreibung"],
+  ["searchInOrganizer", "Veranstalter"],
+  ["searchInCity", "Stadt"],
+  ["searchInDistrict", "Bezirk"],
+  ["searchInStreet", "Straße"],
+])
+
+export const SearchCheckboxes: FC<SearchCheckboxesType> = ({
+  marketFilterFulltext,
+  setMarketFilterFulltext
+}) => {
+  const pairs = [
+    fields.slice(0, 2),
+    fields.slice(2, 4),
+    fields.slice(4, 6)
+  ]
+  return (
+    <>
+      {pairs.map(pair => (
+        <div className="justify-left flex pb-2">
+          <PartialSearchCheckboxes
+            selectedFields={pair}
+            marketFilterFulltext={marketFilterFulltext}
+            setMarketFilterFulltext={setMarketFilterFulltext}
+          />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export const PartialSearchCheckboxes: FC<SearchCheckboxesType> = ({
+  selectedFields,
+  marketFilterFulltext,
+  setMarketFilterFulltext
+}) => {
+  return (
+    <>
+      {selectedFields?.map((field: string) => (
+        <SearchCheckbox
+          field={field} label={fieldToLabel.get(field) || "unbekannt"}
+          marketFilterFulltext={marketFilterFulltext}
+          setMarketFilterFulltext={setMarketFilterFulltext}
+        />
+      ))
+      }
+    </>
+  )
+}
+
+export const SearchCheckbox: FC<SearchCheckboxType> = ({
+  field,
+  label,
+  marketFilterFulltext,
+  setMarketFilterFulltext
+}) => {
+  return (
+    <>
+      <input type="checkbox" id={`${field}Cb`}
+        checked={marketFilterFulltext && marketFilterFulltext[field]}
+        onChange={(_) => setMarketFilterFulltext({
+          ...marketFilterFulltext,
+          [`${field}`]: marketFilterFulltext && !marketFilterFulltext[field]
+        })}
+      />
+      <label htmlFor={`${field}Cb`}>{label}</label>
+    </>
+  )
+}

src/components/Sidebar/SidebarContentFilter/index.tsx

@@ -5,7 +5,7 @@ import { SwitchWrapper } from '@components/SwitchWrapper'
 import { FilterDate } from '@components/FilterDate'
 import { SidebarHeader } from '@components/Sidebar/SidebarHeader'
 import { SidebarBody } from '@components/Sidebar/SidebarBody'
-import { WeatherOverlay } from '@components/WeatherOverlay'
+import { SearchCheckboxes, FullTextFilter } from '@components/SearchCheckbox'
 
 export interface SidebarContentFilterType {
   marketFilterInternational: boolean
@@ -22,6 +22,8 @@ export interface SidebarContentFilterType {
   setMarketFilterAction: (enabled: boolean) => void
   marketFilterTrain: boolean
   setMarketFilterTrain: (enabled: boolean) => void
+  marketFilterFulltext: any,
+  setMarketFilterFulltext: (data: FullTextFilter) => void
 }
 
 export const SidebarContentFilter: FC<SidebarContentFilterType> = ({
@@ -39,6 +41,8 @@ export const SidebarContentFilter: FC<SidebarContentFilterType> = ({
   setMarketFilterAction,
   marketFilterTrain,
   setMarketFilterTrain,
+  marketFilterFulltext,
+  setMarketFilterFulltext,
 }) => {
   function resetFilter() {
     setMarketFilterCosts(false)
@@ -48,6 +52,14 @@ export const SidebarContentFilter: FC<SidebarContentFilterType> = ({
     setMarketFilterTime(false)
     setMarketFilterAction(false)
     setMarketFilterTrain(false)
+    setMarketFilterFulltext({
+      searchInName: true,
+      searchInDescription: true,
+      searchInStreet: true,
+      searchInDistrict: true,
+      searchInCity: true,
+      searchInOrganizer: true,
+    })
   }
 
   return (
@@ -68,6 +80,22 @@ export const SidebarContentFilter: FC<SidebarContentFilterType> = ({
             </div>
           </ExpandablePanel>
           <hr className="my-2 border-lightblue/70" />
+          <ExpandablePanel title={'Volltextsuche'} open={true}>
+            <div className="justify-left flex pb-2">
+              <input type="text" style={{ background: 'black' }}
+                value={(marketFilterFulltext && marketFilterFulltext.filter) || ""}
+                onChange={(event) => setMarketFilterFulltext({
+                  ...marketFilterFulltext, "filter": event.currentTarget.value
+                })}
+              />
+            </div>
+            <div style={{ paddingBottom: '5px' }}>Suche in: </div>
+            <SearchCheckboxes
+              marketFilterFulltext={marketFilterFulltext}
+              setMarketFilterFulltext={setMarketFilterFulltext}
+            />
+          </ExpandablePanel>
+          <hr className="my-2 border-lightblue/70" />
           <ExpandablePanel title={'Abends offen'} open={true}>
             <SwitchWrapper
               text={
@@ -134,16 +162,18 @@ export const SidebarContentFilter: FC<SidebarContentFilterType> = ({
             marketFilterAccessible ||
             marketFilterCosts ||
             marketFilterTime ||
-            marketFilterDate) && (
-            <button
-              className="block mr-auto ml-auto sticky bottom-4 mb-8 xmas-btn px-4 bg-darkblue text-gold hover:bg-gold hover:text-lightblue p-2 text-bold rounded border-2 border-gold hover:border-gold"
-              onClick={resetFilter}
-            >
-              Filter zurücksetzen
-            </button>
-          )}
+            marketFilterDate ||
+            (marketFilterFulltext && marketFilterFulltext.filter
+              && marketFilterFulltext.filter.length > 0)) && (
+              <button
+                className="block mr-auto ml-auto sticky bottom-4 mb-8 xmas-btn px-4 bg-darkblue text-gold hover:bg-gold hover:text-lightblue p-2 text-bold rounded border-2 border-gold hover:border-gold"
+                onClick={resetFilter}
+              >
+                Filter zurücksetzen
+              </button>
+            )}
         </>
-      </SidebarBody>
+      </SidebarBody >
     </>
   )
 }

src/lib/filterMarkets.js

@@ -123,7 +123,8 @@ export function filterMarkets(
   marketFilterDate,
   marketFilterAction,
   marketFilterTrain,
-  marketFilterTime
+  marketFilterTime,
+  marketFilterFulltext,
 ) {
   data.forEach((d) => {
     d.inaktiv = false
@@ -160,6 +161,22 @@ export function filterMarkets(
       d.inaktiv = true
       return
     }
+    if (marketFilterFulltext && marketFilterFulltext.filter) {
+      const filterLower = marketFilterFulltext.filter.toLowerCase();
+      const checks = [
+        (text) => marketFilterFulltext.searchInName && (d.name.toLowerCase().indexOf(text) >= 0 || d.shortname.toLowerCase().indexOf(text) >= 0),
+        (text) => marketFilterFulltext.searchInDescription && d.rss_beschreibung && d.rss_beschreibung.toLowerCase().indexOf(text) >= 0,
+        (text) => marketFilterFulltext.searchInStreet && d.strasse && d.strasse.toLowerCase().indexOf(text) >= 0,
+        (text) => marketFilterFulltext.searchInDistrict && d.bezirk && d.bezirk.toLowerCase().indexOf(text) >= 0,
+        (text) => marketFilterFulltext.searchInCity && d.plz_ort && d.plz_ort.toLowerCase().indexOf(text) >= 0,
+        (text) => marketFilterFulltext.searchInOrganizer && d.veranstalter && d.veranstalter.toLowerCase().indexOf(text) >= 0,
+      ]
+      const found = checks.map((check) => check(filterLower)).filter(res => res);
+      if (found.length === 0) {
+        d.inaktiv = true
+      }
+      return
+    }
   })
 
   return data

styles/globals.css

@@ -120,4 +120,36 @@ body {
 div {
   scrollbar-color: #BDA33B #091725;
   scrollbar-width: thin;
+}
+
+input[type="text"] {
+  border: 1px solid gray;
+  padding: 5px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* https://stackoverflow.com/a/63192534 */
+
+input[type="checkbox"] {
+  visibility: hidden;
+}
+
+input[type="checkbox"]+label:before {
+  border: 1px solid #333;
+  content: "\00a0";
+  display: inline-block;
+  font: 16px/1em sans-serif;
+  height: 16px;
+  margin: 0 .25em 0 0;
+  padding: 0;
+  width: 16px;
+}
+
+input[type="checkbox"]:checked+label:before {
+  background: #333;
+  color: #BDA33B;
+  content: "\2713";
+  text-align: center;
 }