Android Radio Konfigurator: Unterschied zwischen den Versionen
Aus Wiki rund um Android-Navis für BMW E38/E39/E46/E53
Andre (Diskussion | Beiträge) |
Andre (Diskussion | Beiträge) |
||
| Zeile 17: | Zeile 17: | ||
#nvk .nvk-card{border:1px solid rgba(128,128,128,.45);border-left:5px solid #36c;border-radius:4px;padding:9px 12px;margin:8px 0} | #nvk .nvk-card{border:1px solid rgba(128,128,128,.45);border-left:5px solid #36c;border-radius:4px;padding:9px 12px;margin:8px 0} | ||
#nvk .nvk-card.opt{border-left-color:#14866d} | #nvk .nvk-card.opt{border-left-color:#14866d} | ||
#nvk .nvk-card.rad{border-left-color:# | #nvk .nvk-card.rad{border-left-color:#fff;background:rgba(255,255,255,.08)} | ||
#nvk .nvk-card b{display:block} | #nvk .nvk-card b{display:block} | ||
#nvk .nvk-links{margin-top:4px;font-weight:600} | #nvk .nvk-links{margin-top:4px;font-weight:600} | ||
| Zeile 26: | Zeile 26: | ||
#nvk .nvk-card .nvk-img{max-width:230px;max-height:150px} | #nvk .nvk-card .nvk-img{max-width:230px;max-height:150px} | ||
#nvk input[type=text],#nvk input[type=email],#nvk textarea{width:100%;padding:9px 8px;font:inherit;color:#202122;background:#fff;border:1px solid #a2a9b1;border-radius:4px} | #nvk input[type=text],#nvk input[type=email],#nvk textarea{width:100%;padding:9px 8px;font:inherit;color:#202122;background:#fff;border:1px solid #a2a9b1;border-radius:4px} | ||
#nvk .nvk-img.wide{max-width:min(100%,460px);max-height:none} | |||
#nvk #nvk-form{margin-top:22px} | #nvk #nvk-form{margin-top:22px} | ||
</style> | </style> | ||
| Zeile 37: | Zeile 38: | ||
<div class="nvk-f"><label for="nvk-name">Name *</label><input id="nvk-name" type="text" autocomplete="name"></div> | <div class="nvk-f"><label for="nvk-name">Name *</label><input id="nvk-name" type="text" autocomplete="name"></div> | ||
<div class="nvk-f"><label for="nvk-mail">E-Mail *</label><input id="nvk-mail" type="email" autocomplete="email"></div> | <div class="nvk-f"><label for="nvk-mail">E-Mail *</label><input id="nvk-mail" type="email" autocomplete="email"></div> | ||
<div class="nvk-f"><label for="nvk-size">Gewünschte Displaygröße (optional)</label><select id="nvk-size"><option value="">Keine Angabe / Beratung gewünscht</option><option>7"</option><option>8.8"</option><option>9"</option><option>10.25"</option><option>12.3"</option><option>14.9"</option><option>Andere Größe (bitte im Kommentar nennen)</option></select><div class="nvk-help">Diagonale in Zoll. Nicht jede Größe gibt es für jede Baureihe, das prüfen wir für Dich.</div></div> | |||
<div class="nvk-f"><label for="nvk-vin">VIN oder FGN (optional)</label><input id="nvk-vin" type="text" maxlength="17" placeholder="AB12345 oder 17-stellige FGN"></div> | <div class="nvk-f"><label for="nvk-vin">VIN oder FGN (optional)</label><input id="nvk-vin" type="text" maxlength="17" placeholder="AB12345 oder 17-stellige FGN"></div> | ||
</div> | </div> | ||
| Zeile 73: | Zeile 75: | ||
noexl6: IM + "7/7b/No_EXL006.jpg/180px-No_EXL006.jpg", | noexl6: IM + "7/7b/No_EXL006.jpg/180px-No_EXL006.jpg", | ||
halter: IM + "3/3b/Halter_Alu.webp/92px-Halter_Alu.webp.png", | halter: IM + "3/3b/Halter_Alu.webp/92px-Halter_Alu.webp.png", | ||
deepobd: "https://xtrons.ibus-app.de/images/d/d4/DeepOBD_Interface_1.png", | |||
n43: IM + "e/e4/Navi4_3.jpg/240px-Navi4_3.jpg", | |||
n169: IM + "8/8a/Navi16_9.jpg/240px-Navi16_9.jpg", | |||
radio: IM + "9/96/E39_Radio.jpg/240px-E39_Radio.jpg", | |||
idrive: "https://xtrons.ibus-app.de/images/0/02/MASK-CCC-CIC-NBT-EVO-iDrive.jpg", | |||
iris: "https://xtrons.ibus-app.de/images/b/be/BusinessKas_IRISG.jpg", | |||
funktr: IM + "7/7e/E46_Funktionstraeger.png/240px-E46_Funktionstraeger.png" | funktr: IM + "7/7e/E46_Funktionstraeger.png/240px-E46_Funktionstraeger.png" | ||
}; | }; | ||
| Zeile 123: | Zeile 131: | ||
var FIELDS = [ | var FIELDS = [ | ||
{ id: "vehicle", label: "Fahrzeug", values: VEHICLES.map(function (x) { return { v: x.v, t: "BMW " + x.t }; }) }, | { id: "vehicle", label: "Fahrzeug", values: VEHICLES.map(function (x) { return { v: x.v, t: "BMW " + x.t }; }) }, | ||
{ id: "factory", label: "Verbaut ab Werk", values: [ | { id: "factory", label: "Verbaut ab Werk", pre: { when: { gen: ["b", "c"] }, html: "[b]So erkennst Du Dein System:[/b][br][imgw=" + P.idrive + "]" }, values: [ | ||
{ v: "iris", t: "Radio mit IRIS", only: { vehicle: ["3er-e46", "5er-e39", "7er-e38", "x5-e53"] } }, | { v: "iris", t: "Radio mit IRIS", only: { vehicle: ["3er-e46", "5er-e39", "7er-e38", "x5-e53"] }, info: "[img=" + P.iris + "]" }, | ||
{ v: "mid", t: "Radio mit MID", only: { gen: ["alt"] } }, | { v: "mid", t: "Radio mit MID", only: { gen: ["alt"] }, info: "[img=" + P.radio + "]" }, | ||
{ v: "n43", t: "4:3 Navi", only: { vehicle: ["5er-e39", "7er-e38"] } }, | { v: "n43", t: "4:3 Navi", only: { vehicle: ["5er-e39", "7er-e38"] }, info: "[img=" + P.n43 + "]" }, | ||
{ v: "n169", t: "16:9 Navi", only: { gen: ["alt"] } }, | { v: "n169", t: "16:9 Navi", only: { gen: ["alt"] }, info: "[img=" + P.n169 + "]" }, | ||
{ v: "pfeil", t: "Pfeilnavi", only: { vehicle: ["3er-e46"] } }, | { v: "pfeil", t: "Pfeilnavi", only: { vehicle: ["3er-e46"] }, info: "[img=" + P.pfeil + "]" }, | ||
{ v: "mask", t: "M-ASK", only: { gen: ["b"] } }, | { v: "mask", t: "M-ASK", only: { gen: ["b"] } }, | ||
{ v: "ccc", t: "CCC", only: { gen: ["b"] } }, | { v: "ccc", t: "CCC", only: { gen: ["b"] } }, | ||
| Zeile 201: | Zeile 209: | ||
bclic: { t: "I-BUS App - BC Lizenz", d: "Schaltet u. a. die BC-Daten der App frei.", skipIf: "bcdsp", | bclic: { t: "I-BUS App - BC Lizenz", d: "Schaltet u. a. die BC-Daten der App frei.", skipIf: "bcdsp", | ||
u: SHOP + "i-bus-app/lizenzen/167/i-bus-app-bc-lizenz" }, | u: SHOP + "i-bus-app/lizenzen/167/i-bus-app-bc-lizenz" }, | ||
deepobd: { t: "Deep OBD OBD-II Bluetooth-Adapter", d: "Live-Werte auslesen, Fehler lesen und löschen.", | deepobd: { t: "Deep OBD OBD-II Bluetooth-Adapter", d: "Live-Werte auslesen, Fehler lesen und löschen.", img: [P.deepobd], | ||
u: SHOP + "i-bus-app/zubehoer/interfaces-module/258/deep-obd-obd-ii-bluetooth-adapter?c=54", | u: SHOP + "i-bus-app/zubehoer/interfaces-module/258/deep-obd-obd-ii-bluetooth-adapter?c=54", | ||
w: "https://xtrons.ibus-app.de/index.php?title=DeepOBD_-_Adapter_und_App_einrichten", wt: "Wiki: DeepOBD einrichten" }, | w: "https://xtrons.ibus-app.de/index.php?title=DeepOBD_-_Adapter_und_App_einrichten", wt: "Wiki: DeepOBD einrichten" }, | ||
| Zeile 212: | Zeile 220: | ||
u: SHOP + "i-bus-app/lizenzen/358/k-can-app-lizenz-betaversion" }, | u: SHOP + "i-bus-app/lizenzen/358/k-can-app-lizenz-betaversion" }, | ||
tpms: { t: "TPMS - Reifendruckkontrolle", d: "", u: SHOP + "radiozubehoer/tpms/" }, | tpms: { t: "TPMS - Reifendruckkontrolle", d: "", u: SHOP + "radiozubehoer/tpms/" }, | ||
dab1: { t: "DAB+ Empfänger inkl. Antenne (Single)", d: "", u: SHOP + "radiozubehoer/dab/291/dab-empfaenger-inkl.-antenne-usbdab04" }, | dab1: { t: "DAB+ Empfänger inkl. Antenne (Single)", d: "", w: "https://xtrons.ibus-app.de/index.php?title=Installation_der_DAB%2B_Antenne", wt: "Installation der DAB+ Antenne", u: SHOP + "radiozubehoer/dab/291/dab-empfaenger-inkl.-antenne-usbdab04" }, | ||
dab2: { t: "Dual DAB+ Empfänger-Stick inkl. 2 Antennen", d: "", u: SHOP + "radiozubehoer/dab/391/dual-dab-empfaenger-stick-inkl.-2-antennen-acusbdab05t?c=75" }, | dab2: { t: "Dual DAB+ Empfänger-Stick inkl. 2 Antennen", d: "", w: "https://xtrons.ibus-app.de/index.php?title=Installation_der_DAB%2B_Antenne", wt: "Installation der DAB+ Antenne", u: SHOP + "radiozubehoer/dab/391/dual-dab-empfaenger-stick-inkl.-2-antennen-acusbdab05t?c=75" }, | ||
rcam: { t: "Rückfahrkamera", d: "", u: SHOP + "radiozubehoer/kameras/", ut: "Kameras im Shop ansehen →" }, | rcam: { t: "Rückfahrkamera", d: "", u: SHOP + "radiozubehoer/kameras/", ut: "Kameras im Shop ansehen →" }, | ||
fcam: { t: "Front-Kamera", d: "", u: SHOP + "radiozubehoer/kameras/", ut: "Kameras im Shop ansehen →" }, | fcam: { t: "Front-Kamera", d: "", u: SHOP + "radiozubehoer/kameras/", ut: "Kameras im Shop ansehen →" }, | ||
| Zeile 269: | Zeile 277: | ||
function full(u) { return u.indexOf("/thumb/") === -1 ? u : u.replace("/thumb/", "/").replace(/\/[^\/]+$/, ""); } | function full(u) { return u.indexOf("/thumb/") === -1 ? u : u.replace("/thumb/", "/").replace(/\/[^\/]+$/, ""); } | ||
function fmt(t) { | function fmt(t) { | ||
return t.replace(/\[img=([^\x5D]+)\]/g, function (m, u) { | return t.replace(/\[imgw=([^\x5D]+)\]/g, function (m, u) { | ||
return "\u003Ca href=\"" + full(u) + "\" target=\"_blank\" rel=\"noopener\"\u003E\u003Cimg class=\"nvk-img wide\" src=\"" + u + "\" alt=\"\"\u003E\u003C/a\u003E"; | |||
}).replace(/\[img=([^\x5D]+)\]/g, function (m, u) { | |||
return "\u003Ca href=\"" + full(u) + "\" target=\"_blank\" rel=\"noopener\"\u003E\u003Cimg class=\"nvk-img\" src=\"" + u + "\" alt=\"\"\u003E\u003C/a\u003E"; | return "\u003Ca href=\"" + full(u) + "\" target=\"_blank\" rel=\"noopener\"\u003E\u003Cimg class=\"nvk-img\" src=\"" + u + "\" alt=\"\"\u003E\u003C/a\u003E"; | ||
}).replace(/\[b\]/g, "\u003Cb\u003E").replace(/\[\/b\]/g, "\u003C/b\u003E").replace(/\[br\]/g, "\u003Cbr\u003E") | }).replace(/\[b\]/g, "\u003Cb\u003E").replace(/\[\/b\]/g, "\u003C/b\u003E").replace(/\[br\]/g, "\u003Cbr\u003E") | ||
| Zeile 338: | Zeile 348: | ||
el.value = sel[f.id] || ""; | el.value = sel[f.id] || ""; | ||
var cur = allowed.filter(function (v) { return v.v === sel[f.id]; })[0]; | var cur = allowed.filter(function (v) { return v.v === sel[f.id]; })[0]; | ||
$("nvk-i-" + f.id).innerHTML = cur ? (cur.info ? fmt(cur.info) : "") : ""; | var pre = f.pre ? (match(f.pre.when, s, false) ? fmt(f.pre.html) : "") : ""; | ||
$("nvk-i-" + f.id).innerHTML = pre + (cur ? (cur.info ? fmt(cur.info) : "") : ""); | |||
}); | }); | ||
} | } | ||
| Zeile 402: | Zeile 413: | ||
} | } | ||
$("nvk-form").style.display = ""; | $("nvk-form").style.display = ""; | ||
var veh = vehicleOf(sel.vehicle); | |||
var ru = veh.noCat ? SHOP + "bmw-radios/" : SHOP + "bmw-radios/" + veh.v + "/"; | |||
heading("Passende Radios"); | |||
outEl.appendChild(card({ t: "BMW Radios für " + veh.t, d: "Alle Radios, die für Deinen BMW " + veh.t + " im Shop erhältlich sind.", | |||
u: ru, ut: "Zu den passenden Radios →", w: SHOP + "bmw-radios/", wt: "Alle BMW Radios" }, "rad")); | |||
var needs = [], hints = [], seen = {}; | var needs = [], hints = [], seen = {}; | ||
RULES.forEach(function (r) { | RULES.forEach(function (r) { | ||
| Zeile 428: | Zeile 444: | ||
hints.forEach(function (t) { var d = document.createElement("div"); d.className = "nvk-note"; d.innerHTML = fmt(t); outEl.appendChild(d); }); | hints.forEach(function (t) { var d = document.createElement("div"); d.className = "nvk-note"; d.innerHTML = fmt(t); outEl.appendChild(d); }); | ||
} | } | ||
var L = ["KONFIGURATION"]; | var L = ["KONFIGURATION"]; | ||
FIELDS.forEach(function (f) { | FIELDS.forEach(function (f) { | ||
| Zeile 459: | Zeile 470: | ||
if (!$("nvk-dsgvo").checked) return status("Bitte der Verarbeitung Deiner Daten zustimmen.", false); | if (!$("nvk-dsgvo").checked) return status("Bitte der Verarbeitung Deiner Daten zustimmen.", false); | ||
if ($("nvk-hp").value) return; | if ($("nvk-hp").value) return; | ||
var text = "Name: " + name + "\nE-Mail: " + mail + "\nVIN: " + (vin || "-") + "\n\nKommentar:\n" + msg + "\n\n" + | var sz = $("nvk-size").value; | ||
var sum2 = summary + (sz ? "\n\nGewünschte Displaygröße: " + sz : ""); | |||
var text = "Name: " + name + "\nE-Mail: " + mail + "\nVIN: " + (vin || "-") + "\n\nKommentar:\n" + msg + "\n\n" + sum2; | |||
if (SEND_URL) { | if (SEND_URL) { | ||
var p = new URLSearchParams(); | var p = new URLSearchParams(); | ||
p.append("name", name); p.append("mail", mail); p.append("vin", vin); p.append("msg", msg); p.append("summary", | p.append("name", name); p.append("mail", mail); p.append("vin", vin); p.append("msg", msg); p.append("summary", sum2); | ||
p.append("hp", $("nvk-hp").value); p.append("ca", capA); p.append("cb", capB); p.append("cv", $("nvk-cap").value); | p.append("hp", $("nvk-hp").value); p.append("ca", capA); p.append("cb", capB); p.append("cv", $("nvk-cap").value); | ||
fetch(SEND_URL, { method: "POST", body: p }).then(function (r) { | fetch(SEND_URL, { method: "POST", body: p }).then(function (r) { | ||
| Zeile 480: | Zeile 493: | ||
</script> | </script> | ||
</div> | </div> | ||
</html> | </html> | ||
