Інтерфейс: можливість відображення Release Notes

it's squashed commits that include the following changes:
  small syntax fix
  fix typo
  update css styles
  add Markdown parser to format changelog
  fix syntax (add #endif)
  sligthly update comments
  move firmware update section to separate block
  change HTLM lang from en to uk
    ISO 639-1 Language Codes define Ukrainian as uk, so,
    it should be uk or uk-UA depends language or language-country format
  Initial support of Release notes for Flasher
  update versions for fetchReleaseNotes button in flasher
  use single jaam_v2.js file
  fix version (update flasher version to 4.2 Beta 87)
  fix anishathalye/proof-html action for case with single js file
  fix string with link to jaam_v2.js

.github/workflows/compile.yml

@@ -85,3 +85,4 @@
           with:
             name: updater.bin
             path: ${{ github.workspace }}/updater.bin
+

.github/workflows/linters.yml

@@ -9,20 +9,24 @@ on:
       - develop
 jobs:
   check_flasher:
-      runs-on: ubuntu-latest
-      steps:
-        - uses: actions/checkout@v4
-        - name: Check flasher with proof-html
-          uses: anishathalye/proof-html@v2
-          with:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Copy JS to the flasher
+        # This step is required to copy the JS file to the flasher directory to check it with proof-html
+        run: |
+          cp -f ${{ github.workspace }}/deploy/web_server/jaam_v2.js ${{ github.workspace }}/flasher/jaam_v2.js
+      - name: Check flasher with proof-html
+        uses: anishathalye/proof-html@v2
+        with:
             directory: ${{ github.workspace }}/flasher
   run_black:
-      runs-on: ubuntu-latest
-      steps:
-        - uses: actions/checkout@v4
-        - name: Run Black in the check mode
-          uses: psf/black@stable
-          with:
-            options: "--check --verbose --line-length 120 --diff --color --target-version py312"
-            src: ${{ github.workspace }}/deploy
-            version: "~= 24.0"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run Black in the check mode
+        uses: psf/black@stable
+        with:
+          options: "--check --verbose --line-length 120 --diff --color --target-version py312"
+          src: ${{ github.workspace }}/deploy
+          version: "~= 24.0"

.github/workflows/upload-pages/action.yml

@@ -30,6 +30,7 @@ runs:
       run: |
         sed -i 's/>Встановити JAAM [0-9.]*</>Встановити JAAM ${{ inputs.version }}</' ${{ github.workspace }}/flasher/index.html
         sed -i 's/"version": ".*",/"version": "${{ inputs.version }}",/' ${{ github.workspace }}/flasher/manifest.json
+        sed -i 's/fetchReleaseNotes('\''[0-9]\{1,\}\.[0-9]\{1,\}'\'')/fetchReleaseNotes('\''${{ inputs.version }}'\''/' ${{ github.workspace }}/flasher/index.html
     - name: Copy beta bin to flasher
       if: ${{ inputs.beta_binary_path != '' }}
       shell: bash
@@ -41,6 +42,7 @@ runs:
       run: |
         sed -i 's/>Встановити JAAM [0-9.]* Beta [0-9]*</>Встановити JAAM ${{ inputs.version }} Beta ${{ inputs.beta_build }}</' ${{ github.workspace }}/flasher/index.html
         sed -i 's/"version": ".*",/"version": "${{ inputs.version }}-b${{ inputs.beta_build }}",/' ${{ github.workspace }}/flasher/manifest-beta.json
+        sed -i 's/fetchReleaseNotes('\''[0-9]\{1,\}\.[0-9]\{1,\}-b[0-9]\{1,\}'\'')/fetchReleaseNotes('\''${{ inputs.version }}-b${{ inputs.beta_build }}'\''/' ${{ github.workspace }}/flasher/index.html
     - name: Copy lite bin to flasher
       if: ${{ inputs.lite_binary_path != '' }}
       shell: bash
@@ -52,6 +54,9 @@ runs:
       run: |
         sed -i 's/>Встановити JAAM [0-9.]* Lite</>Встановити JAAM ${{ inputs.version }} Lite</' ${{ github.workspace }}/flasher/index.html
         sed -i 's/"version": ".*",/"version": "${{ inputs.version }}",/' ${{ github.workspace }}/flasher/manifest-lite.json
+    - name: Copy JS to the flasher
+      run: |
+        cp -f ${{ github.workspace }}/deploy/web_server/jaam_v2.js ${{ github.workspace }}/flasher/jaam_v2.js
     - name: Setup Pages
       uses: actions/configure-pages@v4
     - name: Upload artifact

deploy/web_server/Dockerfile

@@ -3,6 +3,7 @@ ENV TZ="Europe/Kyiv"
 COPY web_server.py .
 COPY jaam_v1.css .
 COPY jaam_v1.js .
+COPY jaam_v2.js .
 RUN --mount=type=bind,source=requirements.txt,target=/tmp/requirements.txt \
     python -m pip install --no-cache-dir -r /tmp/requirements.txt
 CMD python web_server.py

deploy/web_server/jaam_v1.js

@@ -113,4 +113,4 @@ const urlParams = new URLSearchParams(window.location.search);
             $('input[name=alert_off_time]').prop('disabled', selectedOption == 0);
             $('input[name=explosion_time]').prop('disabled', selectedOption == 0);
             $('input[name=alert_blink_time]').prop('disabled', selectedOption != 2);
-        });
+        });

deploy/web_server/jaam_v2.js

@@ -0,0 +1,25 @@
+async function fetchReleaseNotes(version) {
+    // Get the version from the input parameter if provided, otherwise from the HTML element's data attribute
+    const releaseNotesElement = document.getElementById("release-notes");
+    version = version || releaseNotesElement.getAttribute("data-version");
+
+    // Construct the API URL dynamically using the version
+    const apiUrl = `https://api.github.com/repos/J-A-A-M/ukraine_alarm_map/releases/tags/${version}`;
+
+    try {
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch release notes: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        const releaseNotes = data.body;
+
+        // Format the release notes using the https://github.com/markedjs/marked library and display them in the element
+        releaseNotesElement.innerHTML = marked.parse(releaseNotes);
+
+    } catch (error) {
+        releaseNotesElement.textContent = `Error: ${error.message}`;
+    }
+}

firmware/src/JaamFirmware.cpp

@@ -468,10 +468,10 @@ int getNightModeType() {
 bool needToPlaySound(SoundType type) {
 #if BUZZER_ENABLED
   if (isBuzzerEnabled()) {
-    
+
     // do not play any sound before websocket connection
     if (!isFirstDataFetchCompleted) return false;
-    
+
     // ignore mute on alert
     if (SoundType::ALERT_ON == type && settings.sound_on_alert && settings.ignore_mute_on_alert) return true;
 
@@ -1810,7 +1810,7 @@ void addCard(AsyncResponseStream* response, const char* title, V value, const ch
 
 void addHeader(AsyncResponseStream* response) {
   response->println("<!DOCTYPE html>");
-  response->println("<html lang='en'>");
+  response->println("<html lang='uk'>");
   response->println("<head>");
   response->println("<meta charset='UTF-8'>");
   response->println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
@@ -1858,17 +1858,25 @@ void addHeader(AsyncResponseStream* response) {
   response->println("'>");
   response->println("</div>");
   response->println("</div>");
-  response->println("<div class='row justify-content-center'>");
-  response->println("<div class='by col-md-9 mt-2'>");
 #if FW_UPDATE_ENABLED
   if (fwUpdateAvailable) {
+    response->println("<div class='row justify-content-center'>");
+    response->println("<div class='by col-md-9 mt-2'>");
     response->println("<div class='alert alert-success text-center'>");
     response->print("Доступна нова версія прошивки - <b>");
     response->print(newFwVersion);
     response->println("</b></br>Для оновлення перейдіть в розділ <b><a href='/firmware'>Прошивка</a></b></h8>");
     response->println("</div>");
+    response->print("<div class='alert alert-info text-rigth' id='release-notes' data-version='");
+    response->print(newFwVersion);
+    response->println("'>Завантажити опис оновлення?</div>");
+    response->print("<div class='text-center'><button class='btn btn-info' onclick='fetchReleaseNotes()'>Отримати опис оновлення</button></div><br>");
+    response->println("</div>");
+    response->println("</div>");
   }
 #endif
+  response->println("<div class='row justify-content-center'>");
+  response->println("<div class='by col-md-9 mt-2'>");
   response->print("Локальна IP-адреса: <b>");
   response->print(getLocalIP());
   response->println("</b>");
@@ -1929,6 +1937,14 @@ void addFooter(AsyncResponseStream* response) {
   response->println("</div>");
   response->println("<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js' integrity='sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj' crossorigin='anonymous'></script>");
   response->println("<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct' crossorigin='anonymous'></script>");
+#if FW_UPDATE_ENABLED
+  if (fwUpdateAvailable) {
+    response->println("<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>");
+    response->print("<script src='http://");
+    response->print(settings.serverhost);
+    response->println("/static/jaam_v2.js'></script>");
+}
+#endif
   response->print("<script src='http://");
   response->print(settings.serverhost);
   response->println("/static/jaam_v1.js'></script>");
@@ -2456,9 +2472,9 @@ void handleSaveBrightness(AsyncWebServerRequest *request) {
   saved = saveInt(request->getParam("brightness_service", true), &settings.brightness_service, "bs", NULL, checkServicePins) || saved;
   saved = saveFloat(request->getParam("light_sensor_factor", true), &settings.light_sensor_factor, "lsf") || saved;
   saved = saveBool(request->getParam("dim_display_on_night", true), "dim_display_on_night", &settings.dim_display_on_night, "ddon", NULL, updateDisplayBrightness) || saved;
-  
+
   if (saved) autoBrightnessUpdate();
-  
+
   char url[18];
   sprintf(url, "/brightness?svd=%d", saved);
   request->redirect(url);
@@ -2474,7 +2490,7 @@ void handleSaveColors(AsyncWebServerRequest* request) {
   saved = saveInt(request->getParam("color_missiles", true), &settings.color_missiles, "colormi") || saved;
   saved = saveInt(request->getParam("color_drones", true), &settings.color_drones, "colordr") || saved;
   saved = saveInt(request->getParam("color_home_district", true), &settings.color_home_district, "colorhd") || saved;
-  
+
   char url[14];
   sprintf(url, "/colors?svd=%d", saved);
   request->redirect(url);
@@ -2751,7 +2767,7 @@ void checkHomeDistrictAlerts() {
   bool localAlarmNow = ledStatus == 1;
   if (localAlarmNow != alarmNow) {
     alarmNow = localAlarmNow;
-    if (alarmNow && needToPlaySound(ALERT_ON)) playMelody(ALERT_ON); 
+    if (alarmNow && needToPlaySound(ALERT_ON)) playMelody(ALERT_ON);
     if (!alarmNow && needToPlaySound(ALERT_OFF)) playMelody(ALERT_OFF);
 
     alertPinCycle();
@@ -3108,22 +3124,22 @@ void mapAlarms() {
   }
   for (uint16_t i = 0; i < settings.pixelcount; i++) {
     strip[i] = processAlarms(
-      adapted_alarm_leds[i], 
-      adapted_alarm_timers[i], 
-      adapted_explosion_timers[i], 
-      adapted_missiles_timers[i], 
-      adapted_drones_timers[i], 
-      i, 
-      blinkBrightness, 
-      notificationBrightness, 
+      adapted_alarm_leds[i],
+      adapted_alarm_timers[i],
+      adapted_explosion_timers[i],
+      adapted_missiles_timers[i],
+      adapted_drones_timers[i],
+      i,
+      blinkBrightness,
+      notificationBrightness,
       false
     );
   }
   if (isBgStripEnabled()) {
     // same as for local district
     int localDistrict = calculateOffsetDistrict(settings.kyiv_district_mode, settings.home_district, offset);
     fill_solid(
-      bg_strip, 
+      bg_strip,
       settings.bg_pixelcount,
       processAlarms(
         adapted_alarm_leds[localDistrict],
@@ -3376,7 +3392,7 @@ void initSettings() {
   settings.explosion_time         = preferences.getInt("ext", settings.explosion_time);
   settings.alert_blink_time       = preferences.getInt("abt", settings.alert_blink_time);
   settings.melody_volume          = preferences.getInt("mv", settings.melody_volume);
-  
+
   preferences.end();
 
   currentFirmware = parseFirmwareVersion(VERSION);
@@ -3648,9 +3664,9 @@ void initUpdates() {
 
 void initHA() {
   if (shouldWifiReconnect) return;
-  
+
   LOG.println("Init Home assistant API");
-    
+
   if (!ha.initDevice(settings.ha_brokeraddress, settings.devicename, currentFwVersion, settings.devicedescription, chipID)) {
     LOG.println("Home Assistant is not available!");
     return;

flasher/index.html

@@ -104,9 +104,17 @@ <h2 class='text-center'>JAAM Flasher</h2>
                         <li><b>JAAM Beta</b> - тестова версія прошивки. Містить функції, що перебувають у розробці.</li>
                         <li><b>JAAM Lite</b> - "скорочена" версія прошивки. Видалено підтримку дисплею, Home Assistant, сенсорів освітлення та клімату, динаміка (buzzer), не підтримує оновлення через веб-інтерфейс</li>
                     </ul>
-                    
+
                 </div>
             </div>
+            <!-- Отримання Release Notes -->
+            <div class='by col-md-9 mt-2'>
+                <div class="alert alert-info text-rigth" id="release-notes">Завантаження опису версії...</div>
+                    <div class="text-center">
+                        <button class="btn btn-info" onclick="fetchReleaseNotes('4.1')">Отримати опис JAAM 4.1</button>
+                        <button class="btn btn-info" onclick="fetchReleaseNotes('4.2-b87')">Отримати опис JAAM 4.2 Beta 87</button>
+                    </div>
+            </div>
             <div class='by col-md-9 mt-2'>
                 <div class='alert alert-info'>
                     <p>Якщо ви не обрали порт через те, що не бачили ваш пристрій у списку, спробуйте наступні
@@ -173,6 +181,8 @@ <h2 class='text-center'>JAAM Flasher</h2>
     <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js'></script>
     <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
     <script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="jaam_v2.js"></script>
 </body>
 
 </html>