From bb3eb8fcd5882e80f514bd97d202151c7b0f532b Mon Sep 17 00:00:00 2001 From: bdamokos <163609735+bdamokos@users.noreply.github.com> Date: Sun, 29 Dec 2024 21:39:51 +0100 Subject: [PATCH] location setup --- .env.example | 6 +- docs/setup/css/style.css | 217 +++++++++++ docs/setup/index.html | 2 + docs/setup/js/location_setup.js | 622 ++++++++++++++++++++++++++++++++ docs/setup/js/nominatim.js | 174 +++++++++ 5 files changed, 1018 insertions(+), 3 deletions(-) create mode 100644 docs/setup/js/location_setup.js create mode 100644 docs/setup/js/nominatim.js diff --git a/.env.example b/.env.example index 9252cfd..ba6279d 100644 --- a/.env.example +++ b/.env.example @@ -19,12 +19,12 @@ Lines = #Weather setup - use either coordinates or city name and country. Coordinates_LAT = Coordinates_LNG = -# City name +# City name // NOT RECOMMENDED - use coordinates instead City = -# Two letter country code +# Two letter country code // NOT RECOMMENDED - use coordinates instead Country = -# Display settings (IF you don't know what to use, try: epd2in13g_V2 for 4-color displays, epd2in13_V4 for black and white displays) +# Display settings (If you don't know what to use, try: epd2in13g_V2 for 4-color displays, epd2in13_V4 for black and white displays) display_model = epd2in13g_V2 # Screen rotation - by default we rotate the screen 90 degrees to reach a landscape orientation. If your screen is upside down, try 270. screen_rotation = 90 diff --git a/docs/setup/css/style.css b/docs/setup/css/style.css index 3d3b22c..083f087 100644 --- a/docs/setup/css/style.css +++ b/docs/setup/css/style.css @@ -1191,4 +1191,221 @@ input:checked + .slider:before { #advanced-settings-form button[type="submit"]:hover { background-color: #0056b3; +} + +/* Location Setup Styles */ +.location-setup-container { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +.location-form { + background: #f5f5f5; + border-radius: 8px; + padding: 20px; + margin-top: 20px; +} + +.coordinates-section, +.city-section { + margin-bottom: 20px; + padding: 15px; + background: white; + border-radius: 6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.location-button { + display: flex; + align-items: center; + gap: 8px; + background-color: #4CAF50; + color: white; + border: none; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + margin-top: 10px; +} + +.location-button svg { + width: 20px; + height: 20px; + fill: currentColor; +} + +.location-button:hover { + background-color: #45a049; +} + +/* Form Group Styles */ +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + margin-bottom: 5px; + font-weight: 500; +} + +.form-group input { + width: 100%; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; +} + +.form-group small { + display: block; + color: #666; + font-size: 12px; + margin-top: 4px; +} + +/* Button Group Styles */ +.button-group { + margin-top: 20px; + display: flex; + gap: 10px; + justify-content: flex-end; +} + +.button-group button { + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: 500; +} + +.button-group button.primary { + background-color: #007bff; + color: white; +} + +.button-group button.primary:hover { + background-color: #0056b3; +} + +/* Status Messages */ +.status-message { + margin: 10px 0; + padding: 10px; + border-radius: 4px; +} + +.status-success { + background-color: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; +} + +.status-error { + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +.status-warning { + background-color: #fff3cd; + color: #856404; + border: 1px solid #ffeeba; +} + +.status-info { + background-color: #cce5ff; + color: #004085; + border: 1px solid #b8daff; +} + +.location-accuracy { + margin-top: 10px; + padding: 8px; + border-radius: 4px; + background-color: #e8f5e9; + color: #2e7d32; + font-size: 0.9em; + display: none; +} + +.location-accuracy.active { + display: block; + animation: fadeIn 0.3s ease-in; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* Location Verification Styles */ +.verification-info, +.cross-verification { + margin-top: 10px; + padding: 10px; + border-radius: 4px; + font-size: 0.9em; + animation: fadeIn 0.3s ease-in; +} + +.verification-info .status-info, +.verification-info .status-success, +.verification-info .status-error, +.cross-verification .status-success, +.cross-verification .status-warning, +.cross-verification .status-error { + padding: 10px; + border-radius: 4px; + margin: 5px 0; +} + +.verification-info .status-info { + background-color: #e3f2fd; + color: #1565c0; + border: 1px solid #bbdefb; +} + +.verification-info .status-success, +.cross-verification .status-success { + background-color: #e8f5e9; + color: #2e7d32; + border: 1px solid #c8e6c9; +} + +.verification-info .status-error, +.cross-verification .status-error { + background-color: #ffebee; + color: #c62828; + border: 1px solid #ffcdd2; +} + +.cross-verification .status-warning { + background-color: #fff3e0; + color: #ef6c00; + border: 1px solid #ffe0b2; +} + +.cross-verification { + margin: 20px 0; + font-size: 0.95em; +} + +.cross-verification .status-warning { + line-height: 1.5; +} + +/* Add bullet point styling */ +.cross-verification .status-warning br { + margin-bottom: 5px; +} + +.cross-verification .status-warning { + padding-left: 15px; +} + +.cross-verification .status-warning br + • { + margin-left: -15px; } \ No newline at end of file diff --git a/docs/setup/index.html b/docs/setup/index.html index 1f933e4..ff630a3 100644 --- a/docs/setup/index.html +++ b/docs/setup/index.html @@ -212,6 +212,8 @@