deadtom
/
OwnchatBot


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Active goals</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <style>
        body {
            background-color: transparent;
            color: white;
            width: 600px;
            text-align: left;
            font-weight: bold;
        }
        body { position: absolute; bottom: 0; left: 0; }
    </style>
    <script>
      function checkForGoalUpdates() {
          fetch('/updateGoals')
              .then(response => response.json())
              .then(data => {
                  const newGoals = data.goals;
                  const currentGoals = Array.from(document.querySelectorAll('tbody tr')).map(tr => {
                      const goalData = {
                          name: tr.children[0].textContent.trim(),
                          current: parseInt(tr.children[2].textContent.split('/')[0].trim()),
                          target: parseInt(tr.children[2].textContent.split('/')[1].trim())
                      };
                      return goalData;
                  });

                  if (JSON.stringify(newGoals) !== JSON.stringify(currentGoals)) {
                      window.location.reload();  // Refresh if goals have changed
                  }
              })
              .catch(error => console.error('Error fetching updated goals:', error));
      }

      setInterval(checkForGoalUpdates, 15 * 1000); // Check every 15 seconds
    </script>
</head>
<body>
    {% if goals %}
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th style="width: 50%"></th>
                    <th>Progress</th>
                </tr>
            </thead>
            <tbody>
            {% for goal in goals %}
                <tr>
                    <td style="text-align: left;">{{ goal[3] }}</td>
                    {% set progress = goal[1] / goal[2] * 100 %}
                    <td>
                        <div class="bar-light-grey bar-tiny bar-round" style="position: relative;">
                            <div class="bar-round bar-blue" style="text-align: center; width:{{ progress }}%;">{{ '%0.0f' | format(progress | float) }}%
                            </div>
                            {% set milestones = rewards[goal[0]]["milestones"] %}
                            {% for milestone_key, milestone in milestones.items() %}
                                {% if milestones[milestone_key][0] and milestones[milestone_key][1] %}
                                    {% if milestones[milestone_key][1] < goal[2] %}
                                        {% set milestone_progress = milestones[milestone_key][1] / goal[2] * 100 %}
                                        <div class="milestone-marker" style="position: absolute; left: {{ milestone_progress }}%; transform: translateX(-50%);">
                                            <img src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
                                        </div>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </td>
                    {% if goal[1] == goal[2] %}
                    <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }} <img src="/static/img/tada.png" style="width: 24px; height: 24px;"></td>
                    {% else %}
                    <td style="text-align: right;">{{ goal[1] }} / {{ goal[2] }}</td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No active goals at the moment.</p>
    {% endif %}
</body>
</html>