location setup

bdamokos · Dec 29, 2024 · bb3eb8f · bb3eb8f
1 parent b8441c9
commit bb3eb8f
Show file tree

Hide file tree

Showing 5 changed files with 1,018 additions and 3 deletions.
diff --git 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
@@ -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;
 }
diff --git a/docs/setup/index.html b/docs/setup/index.html
@@ -212,6 +212,8 @@ <h2>⚙️ Advanced Settings</h2>
     <script src="js/service_setup.js" type="module"></script>
     <script src="js/setup_device.js" type="module"></script>
     <script src="js/advanced_setup.js" type="module"></script>
+    <script src="js/location_setup.js" type="module"></script>
+    <script src="js/nominatim.js" type="module"></script>
 </body>
 
 </html>