Add power

Author: anze3db

surfline/urls.py

@@ -192,6 +192,7 @@ async def fetch_waves(self):
                     "primary_swell_size": swells[0]["height"],
                     "primary_swell_period": swells[0]["period"],
                     "primary_swell_direction": swells[0]["direction"],
+                    "power": d["power"],
                 }
             )
         return res

templates/surfline.html

@@ -31,38 +31,56 @@
 <div>
     <table>
         {% for wind, wave in wind_and_waves %}
-            <tr>
-                {% if wind.break %}
+            {% if wind.break %}
+                <tr>
                     <td colspan="7">{{ wind.date | date:"l, M j" }}</td>
-                {% else %}
-                    <td style="padding:  0px 0px;
-                               width: 12px;
-                               transform: rotate(-90deg);
-                               font-size: 10px">{{ wind.date | date:"H:i" }}</td>
-                    <td style="padding: 10px 8px;
-                               font-size: 12px;
-                               text-align: center;
-                               background-color: #58B0E1;
-                               color: white">{{ wave.min|floatformat:"1" }}-{{ wave.max| floatformat:"1" }}m</td>
-                    <td style="padding: 10px 8px; line-height: 12px;">
-                        <strong>{{ wave.primary_swell_size | floatformat:"1" }}</strong>m
-                    </td>
-                    <td style="padding: 10px 8px; font-size: 12px;">
-                        <strong>{{ wave.primary_swell_period }}</strong>s
+                </tr>
+                <tr>
+                    <td></td>
+                    <td style="text-align: center;">Swell(m)</td>
+                    <td style="text-align: center;">Primary Swell</td>
+                    <td style="text-align: center;" colspan="2">Wind</td>
+                </tr>
+            {% else %}
+                <tr>
+                    <td style="padding:  0px 0px; width: 12px; font-size: 10px">{{ wind.date | date:"G:i" }}</td>
+                    <td style="">
+                        <div style="text-align: center;">{{ wave.min|floatformat:"1" }}-{{ wave.max| floatformat:"1" }}m</div>
                     </td>
-                    <td style="padding: 10px 8px; text-align: center; line-height: 18px;">
-                        <div style="transform: rotate(calc({{ wave.primary_swell_direction | floatformat:"0" }}deg - 270deg))">➤</div>
-                        <span style="font-size:10px;">{{ wave.primary_swell_direction | floatformat:"0" }}°</span>
+                    <td style="padding: 10px 8px;
+                               line-height: 36px;
+                               display: flex;
+                               justify-content: space-evenly">
+                        <div>
+                            <strong class="margin: 0px 10px">{{ wave.primary_swell_size | floatformat:"1" }}</strong><span style="font-size:12px">m</span>
+                        </div>
+                        <div>
+                            <strong>{{ wave.primary_swell_period }}</strong><span style="font-size: 12px;">s</span>
+                        </div>
+                        <div>
+                            <strong>{{ wave.power|floatformat:"0" }}</strong><span style="font-size: 12px;">kJ</span>
+                        </div>
+                        <div style="text-align: center; line-height: 18px; display: inline-block;">
+                            <div style="transform: rotate(calc({{ wave.primary_swell_direction | floatformat:"0" }}deg - 270deg))">➤</div>
+                            <span style="font-size:10px;">{{ wave.primary_swell_direction | floatformat:"0" }}°</span>
+                        </div>
                     </td>
                     <td style="padding: 10px 8px;">
-                        <div style="float: left; font-size: 12px; font-weight: bold;">{{ wind.speed|floatformat:"0" }}</div>
-                        <div style="padding: 0px 0px 0px 4px;
-                                    float: left;
-                                    font-size:8px;
-                                    line-height: 8px">
-                            {{ wind.gust|floatformat:"0" }}
-                            <br>
-                            kph
+                        <div style="display: flex; justify-content: flex-end;">
+                            <div style="float: left;
+                                        font-size: 16px;
+                                        font-weight: bold;
+                                        display: inline-block">{{ wind.speed|floatformat:"0" }}</div>
+                            <div style="padding: 0px 0px 0px 4px;
+                                        float: left;
+                                        font-size:8px;
+                                        line-height: 8px;
+                                        text-align: right;
+                                        display: inline-block">
+                                {{ wind.gust|floatformat:"0" }}
+                                <br>
+                                kph
+                            </div>
                         </div>
                     </td>
                     <td style="padding: 10px 8px;
@@ -74,8 +92,8 @@
                         <span style="font-size: 10px">{{ wind.direction_type | title }}</span>
                     </td>
                     <!-- D8833B -->
-                {% endif %}
-            </tr>
+                </tr>
+            {% endif %}
         {% endfor %}
     </table>
 </div>