Add USB as socket to charging stations, some styling tweaks

UI/BigComponents/FilterView.ts

@@ -155,8 +155,8 @@ export default class FilterView extends VariableUiElement {
             const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2");
 
             const toggle = new Toggle(
-                new Combine([icon, option.question.Clone()]).SetClass("flex"),
-                new Combine([iconUnselected, option.question.Clone()]).SetClass("flex")
+                new Combine([icon, option.question.Clone().SetClass("block")]).SetClass("flex"),
+                new Combine([iconUnselected, option.question.Clone().SetClass("block")]).SetClass("flex")
             )
                 .ToggleOnClick()
                 .SetClass("block m-1")
@@ -178,7 +178,7 @@ export default class FilterView extends VariableUiElement {
         const radio = new RadioButton(
             options.map(
                 (option, i) =>
-                    new FixedInputElement(option.question.Clone(), i)
+                    new FixedInputElement(option.question.Clone().SetClass("block"), i)
             ),
             {
                 dontStyle: true

assets/layers/charging_station/README.md

@@ -0,0 +1,19 @@
+The charging station theme
+==========================
+
+As you might have noticed, the charging station theme is complicated and large.
+
+There are a ton of repititive questions. Luckily, we can generate those.
+
+If you want to add a missing socket type, then:
+
+- Add all the properties in 'types.csv'
+- Add an icon. (Note: icons are way better as pictures as they are perceived more abstractly)
+- Update license_info.json with the copyright info of the new icon. Note that we strive to have Creative-commons icons only (though there are exceptions)
+
+AT this point, most of the work should be done; feel free to send a PR. If you would like to test it locally first (which is recommended) and have a working dev environment, then run:
+
+- Run 'ts-node csvToJson.ts' which will generate a new charging_station.json based on the protojson
+- Run`npm run query:licenses` to get an interactive program to add the license of your artwork, followed by `npm run generate:licenses` 
+- Run `npm run generate:layeroverview` to generate the layer files
+- Run `npm run start` to run the instance

assets/layers/charging_station/csvToJson.ts

@@ -17,7 +17,8 @@ function loadCsv(file): {
     countryBlackList?: string[],
     commonVoltages?: number[],
     commonCurrents?: number[],
-    commonOutputs?: string[]
+    commonOutputs?: string[],
+    associatedVehicleTypes?:string[]
 }[] {
     const entries: string[] = Utils.NoNull(readFileSync(file, "utf8").split("\n").map(str => str.trim()))
     const header = entries.shift().split(",")
@@ -29,7 +30,7 @@ function loadCsv(file): {
         }
 
         const v = {}
-        const colonSeperated = ["commonVoltages", "commonOutputs", "commonCurrents", "countryWhiteList","countryBlackList"]
+        const colonSeperated = ["commonVoltages", "commonOutputs", "commonCurrents", "countryWhiteList","countryBlackList","associatedVehicleTypes"]
         const descriptionTranslations = new Map<string, string>()
         for (let j = 0; j < header.length; j++) {
             const key = header[j];
@@ -67,8 +68,8 @@ function run(file, protojson) {
     for (let i = 0; i < entries.length; i++){
         const e = entries[i];
         const txt = {
-            en: `<img style='width:3rem; margin-left: 1rem; margin-right: 1rem' src='./assets/layers/charging_station/${e.image}'/> ${e.description.get("en")}`,
-            nl: `<img style='width:3rem; margin-left: 1rem; margin-right: 1rem' src='./assets/layers/charging_station/${e.image}'/> ${e.description.get("nl")}`
+            en: `<div class='flex'><img style='width:3rem; margin-left: 1rem; margin-right: 0.5rem' src='./assets/layers/charging_station/${e.image}'/> <span>${e.description.get("en")}</span></div>`,
+            nl: `<div class='flex'><img style='width:3rem; margin-left: 1rem; margin-right: 0.5rem' src='./assets/layers/charging_station/${e.image}'/> <span>${e.description.get("nl")}</span></div`
         }
         const json = {
             if: `${e.key}=1`,
@@ -80,12 +81,23 @@ function run(file, protojson) {
             throw "Error for type "+e.key+": don't defined both a whitelist and a blacklist"
         }
         if (e.countryWhiteList.length > 0) {
+            // This is a 'hideInAnswer', thus _reverse_ logic!
             const countries = e.countryWhiteList.map(country => "_country!=" + country) //HideInAnswer if it is in the wrong country
             json["hideInAnswer"] = {or: countries}
         }else if (e.countryBlackList .length > 0) {
             const countries = e.countryBlackList.map(country => "_country=" + country) //HideInAnswer if it is in the wrong country
             json["hideInAnswer"] = {or: countries}
         }
+        
+        if(e.associatedVehicleTypes?.length > 0 && e.associatedVehicleTypes.indexOf("*") < 0){
+            // This plug only occurs if some vehicle specific vehicle type is present.
+            // IF all of the needed vehicle types are explicitly NO, then we hide this type as well
+            let hideInAnswer : any = {and: [].concat(...e.associatedVehicleTypes.map(neededVehicle => [neededVehicle+"~*", neededVehicle+"!=yes"]))}
+            if(json["hideInAnswer"] !== undefined){
+                hideInAnswer = {or: [json["hideInAnswer"], hideInAnswer]}
+            }
+            json["hideInAnswer"] = hideInAnswer
+        }
 
         overview_question_answers.push(json)
 
@@ -300,7 +312,8 @@ function run(file, protojson) {
     }
     proto["units"].push(...extraUnits)
     
-    mergeTranslations("charging_station.json",proto)
+   // mergeTranslations("charging_station.json",proto)
+    
     writeFileSync("charging_station.json", JSON.stringify(proto, undefined, "    "))
 }
 
@@ -330,7 +343,6 @@ async function queryTagInfo(file, type, clean: ((s: string) => string)) {
         const countsArray = Array.from(counts.keys())
         countsArray.sort()
         console.log(`${e.key}:${type} = ${countsArray.join(";")}`)
-        // console.log(`${countsArray.join(";")}`)
     }
 }
 
@@ -362,6 +374,7 @@ function mergeTranslations(origPath, newConfig: LayerConfigJson){
 }
 
 try {
+    console.log("Generating the charging_station.json file")
     run("types.csv", "charging_station.protojson")
     /*/
     queryTagInfo("types.csv","voltage", s => s.trim())

assets/layers/charging_station/license_info.json

@@ -108,5 +108,15 @@
     "sources": [
       "https://upload.wikimedia.org/wikipedia/commons/2/20/UnderCon_icon.svg"
     ]
+  },
+  {
+    "path": "usb_port.svg",
+    "license": "CC-BY",
+    "authors": [
+      "Ryan Dardis"
+    ],
+    "sources": [
+      "https://thenounproject.com/term/usb-port/94768/"
+    ]
   }
 ]

assets/layers/charging_station/types.csv

@@ -1,14 +1,15 @@
-key,image,description:en,countryWhiteList,countryBlackList,commonVoltages,commonCurrents,commonOutputs,description:nl
-socket:schuko,CEE7_4F.svg,<b>Schuko wall plug</b> without ground pin (CEE7/4 type F),be;fr;ma;tn;pl;cs;sk;mo,,230,16,3.6 kW,<b>Schuko stekker</b> zonder aardingspin (CEE7/4 type F)
-socket:typee,TypeE.svg,<b>European wall plug</b> with ground pin (CEE7/4 type E),,,230,16,3 kW;22 kW;,<b>Europese stekker</b> met aardingspin (CEE7/4 type E)
-socket:chademo,Chademo_type4.svg,<b>Chademo</b>,,,500,120,50 kW,
-socket:type1_cable,Type1_J1772.svg,<b>Type 1 with cable</b> (J1772),,,200;240,32,3.7 kW;7 kW,<b>Type 1 met kabel</b> (J1772)
-socket:type1,Type1_J1772.svg,<b>Type 1 <i>without</i> cable</b> (J1772),,,200;240,32,3.7 kW;6.6 kW;7 kW;7.2 kW,<b>Type 1 <i>zonder</i> kabel</b> (J1772)
-socket:type1_combo,Type1-ccs.svg,<b>Type 1 CCS</b> (aka Type 1 Combo),,,400;1000,50;125,50 kW;62.5 kW;150 kW;350 kW;,
-socket:tesla_supercharger,Tesla-hpwc-model-s.svg,<b>Tesla Supercharger</b>,,,480,125;350,120 kW;150 kW;250 kW,
-socket:type2,Type2_socket.svg,<b>Type 2</b> (mennekes),,,230;400,16;32,11 kW;22 kW,
-socket:type2_combo,Type2_CCS.svg,<b>Type 2 CCS</b> (mennekes),,,500;920,125;350,50 kW,
-socket:type2_cable,Type2_tethered.svg,<b>Type 2 with cable</b> (mennekes),,,230;400,16;32,11 kW;22 kW,<b>Type 2 met kabel</b> (J1772)
-socket:tesla_supercharger_ccs,Type2_CCS.svg,<b>Tesla Supercharger CCS</b> (a branded type2_css),,,500;920,125;350,50 kW,
-socket:tesla_destination,Tesla-hpwc-model-s.svg,<b>Tesla Supercharger (destination)</b>,us,,480,125;350,120 kW;150 kW;250 kW,
-socket:tesla_destination,Type2_tethered.svg,<b>Tesla supercharger (destination</b> (A Type 2 with cable branded as tesla),,us,230;400,16;32,11 kW;22 kW,
+key,image,description:en,countryWhiteList,countryBlackList,commonVoltages,commonCurrents,commonOutputs,description:nl,associatedVehicleTypes
+socket:schuko,CEE7_4F.svg,<b>Schuko wall plug</b> without ground pin (CEE7/4 type F),be;fr;ma;tn;pl;cs;sk;mo,,230,16,3.6 kW,<b>Schuko stekker</b> zonder aardingspin (CEE7/4 type F),*
+socket:typee,TypeE.svg,<b>European wall plug</b> with ground pin (CEE7/4 type E),,,230,16,3 kW;22 kW;,<b>Europese stekker</b> met aardingspin (CEE7/4 type E),*
+socket:chademo,Chademo_type4.svg,<b>Chademo</b>,,,500,120,50 kW,<b>Chademo</b>,car;motorcar;hgv;bus
+socket:type1_cable,Type1_J1772.svg,<b>Type 1 with cable</b> (J1772),,,200;240,32,3.7 kW;7 kW,<b>Type 1 met kabel</b> (J1772),car;motorcar;hgv;bus
+socket:type1,Type1_J1772.svg,<b>Type 1 <i>without</i> cable</b> (J1772),,,200;240,32,3.7 kW;6.6 kW;7 kW;7.2 kW,<b>Type 1 <i>zonder</i> kabel</b> (J1772),car;motorcar;hgv;bus
+socket:type1_combo,Type1-ccs.svg,<b>Type 1 CCS</b> (aka Type 1 Combo),,,400;1000,50;125,50 kW;62.5 kW;150 kW;350 kW;,<b>Type 1 CCS</b> (ook gekend als Type 1 Combo),car;motorcar;hgv;bus
+socket:tesla_supercharger,Tesla-hpwc-model-s.svg,<b>Tesla Supercharger</b>,,,480,125;350,120 kW;150 kW;250 kW,<b>Tesla Supercharger</b>,car;motorcar;hgv;bus
+socket:type2,Type2_socket.svg,<b>Type 2</b> (mennekes),,,230;400,16;32,11 kW;22 kW,<b>Type 2</b> (mennekes),car;motorcar;hgv;bus
+socket:type2_combo,Type2_CCS.svg,<b>Type 2 CCS</b> (mennekes),,,500;920,125;350,50 kW,<b>Type 2 CCS</b> (mennekes),car;motorcar;hgv;bus
+socket:type2_cable,Type2_tethered.svg,<b>Type 2 with cable</b> (mennekes),,,230;400,16;32,11 kW;22 kW,<b>Type 2 met kabel</b> (J1772),car;motorcar;hgv;bus
+socket:tesla_supercharger_ccs,Type2_CCS.svg,<b>Tesla Supercharger CCS</b> (a branded type2_css),,,500;920,125;350,50 kW,<b>Tesla Supercharger CCS</b> (een type2 CCS met Tesla-logo),car;motorcar;hgv;bus
+socket:tesla_destination,Tesla-hpwc-model-s.svg,<b>Tesla Supercharger (destination)</b>,us,,480,125;350,120 kW;150 kW;250 kW,<b>Tesla Supercharger (destination)</b>,car;motorcar;hgv;bus
+socket:tesla_destination,Type2_tethered.svg,<b>Tesla supercharger (destination</b> (A Type 2 with cable branded as tesla),,us,230;400,16;32,11 kW;22 kW,<b>Tesla supercharger (destination</b> (Een Type 2 met kabel en Tesla-logo),car;motorcar;hgv;bus
+socket:USB-A,usb_port.svg,<b>USB</b> to charge phones and small electronics,,,5,1;2,5W;10W,<b>USB</b> om GSMs en kleine electronica op te laden,*

assets/layers/charging_station/usb_port.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 164 151.74825"
+   enable-background="new 0 0 330.229 227.989"
+   xml:space="preserve"
+   id="svg32"
+   sodipodi:docname="noun_usb port_94768.svg"
+   width="164"
+   height="151.74825"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
+     id="metadata38"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs36" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     id="namedview34"
+     showgrid="false"
+     inkscape:zoom="1.6562203"
+     inkscape:cx="65.373425"
+     inkscape:cy="46.568307"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg32" /><g
+     id="g4"
+     transform="translate(-84.147,-70.403)"><path
+       d="m 235.402,78.403 c 2.47,0 4.745,2.021 4.745,4.49 v 42.02 c 0,2.47 -2.354,4.49 -4.823,4.49 H 96.971 c -2.47,0 -4.824,-2.021 -4.824,-4.49 v -42.02 c 0,-2.47 2.354,-4.49 4.824,-4.49 h 138.176 m 0.177,-8 H 96.971 c -7.015,0 -12.824,5.475 -12.824,12.49 v 42.02 c 0,7.015 5.809,12.49 12.824,12.49 h 138.353 c 7.016,0 12.823,-5.475 12.823,-12.49 v -42.02 c 0,-7.015 -5.807,-12.49 -12.823,-12.49 z"
+       id="path2"
+       inkscape:connector-curvature="0" /></g><g
+     id="g26"
+     transform="translate(-84.147,-70.403)"><g
+       id="g8"><path
+         d="m 129.147,112.403 c 0,0.55 -0.45,1 -1,1 h -12 c -0.55,0 -1,-0.45 -1,-1 v -10 c 0,-0.55 0.45,-1 1,-1 h 12 c 0.55,0 1,0.45 1,1 z"
+         id="path6"
+         inkscape:connector-curvature="0" /></g><g
+       id="g12"><path
+         d="m 159.147,112.403 c 0,0.55 -0.45,1 -1,1 h -12 c -0.55,0 -1,-0.45 -1,-1 v -10 c 0,-0.55 0.45,-1 1,-1 h 12 c 0.55,0 1,0.45 1,1 z"
+         id="path10"
+         inkscape:connector-curvature="0" /></g><g
+       id="g16"><path
+         d="m 185.147,112.403 c 0,0.55 -0.45,1 -1,1 h -12 c -0.55,0 -1,-0.45 -1,-1 v -10 c 0,-0.55 0.45,-1 1,-1 h 12 c 0.55,0 1,0.45 1,1 z"
+         id="path14"
+         inkscape:connector-curvature="0" /></g><g
+       id="g20"><path
+         d="m 215.147,112.403 c 0,0.55 -0.45,1 -1,1 h -12 c -0.55,0 -1,-0.45 -1,-1 v -10 c 0,-0.55 0.45,-1 1,-1 h 12 c 0.55,0 1,0.45 1,1 z"
+         id="path18"
+         inkscape:connector-curvature="0" /></g><g
+       id="g24"><path
+         d="m 233.147,104.403 c 0,1.65 -1.35,3 -3,3 h -129 c -1.65,0 -3,-1.35 -3,-3 v -16 c 0,-1.65 1.35,-3 3,-3 h 129 c 1.65,0 3,1.35 3,3 z"
+         id="path22"
+         inkscape:connector-curvature="0" /></g></g><path
+     id="path1334"
+     d="m 145.86777,120.95936 -15.39372,-8.88977 v 6.34152 H 51.79247 l 15.3202,-16.18591 c 1.3038,-1.04508 3.0097,-1.77819 4.76452,-1.81881 7.09895,0 11.31463,-0.002 12.8664,-0.005 1.05185,2.99679 3.87728,5.15986 7.23616,5.15986 4.24921,0 7.69763,-3.44811 7.69763,-7.69887 0,-4.2526 -3.4481,-7.69947 -7.69763,-7.69947 -3.35888,0 -6.18431,2.16183 -7.23616,5.15616 l -12.71565,-0.003 c -3.44626,0 -7.05742,1.89079 -9.35585,4.10739 0.0627,-0.0659 0.12798,-0.13598 -0.003,8.5e-4 -0.0486,0.0547 -16.2542,17.171 -16.2542,17.171 -1.30104,1.04353 -3.00602,1.77204 -4.7596,1.81388 h -8.90084 c -1.17983,-5.88006 -6.37229,-10.31016 -12.6009,-10.31016 -7.10142,0 -12.85779,5.75637 -12.85779,12.85563 0,7.10141 5.75637,12.8581 12.85779,12.8581 6.22984,0 11.4223,-4.43381 12.60213,-10.31879 h 8.74486 c 0.0224,0 0.045,8.5e-4 0.0677,0 H 60.9103 c 1.7502,0.0446 3.45302,0.77404 4.75283,1.81881 0,0 16.2019,17.115 16.25205,17.17038 0.12983,0.13752 0.0652,0.0659 8.5e-4,8.5e-4 2.29843,2.21629 5.91113,4.10585 9.358,4.10585 l 12.25418,-0.003 v 5.16139 h 15.39773 v -15.39539 h -15.39773 v 5.15463 c 0,0 -3.22752,-0.006 -12.40431,-0.006 -1.75512,-0.0403 -3.46287,-0.7725 -4.76606,-1.81757 l -15.32358,-16.189 h 59.44012 v 6.35168 z"
+     inkscape:connector-curvature="0"
+     style="stroke-width:0.30764675" /></svg>