Import Grid JS, HTML, and Images

scouting_backend/analysis/static/graphic_grid_manager.js

@@ -0,0 +1,92 @@
+const relative_url = "/static/images/"
+const grid_layout = [
+    [{0: "grid_one_top_left_cone.png", 1: "grid_one_top_left_cone1.png"}, {0: "grid_one_top_cube.png", 2: "grid_one_top_cube2.png"}, {0: "grid_one_top_right_cone.png", 1: "grid_one_top_right_cone1.png"},
+     {0: "grid_two_top_left_cone.png", 1: "grid_two_top_left_cone1.png"}, {0: "grid_two_top_cube.png", 2: "grid_two_top_cube2.png"}, {0: "grid_two_top_right_cone.png", 1: "grid_two_top_right_cone1.png"},
+     {0: "grid_three_top_left_cone.png", 1: "grid_three_top_left_cone1.png"}, {0: "grid_three_top_cube.png", 2: "grid_three_top_cube2.png"}, {0: "grid_three_top_right_cone.png", 1: "grid_three_top_right_cone1.png"}],
+    [{0: "grid_one_middle_left_cone.png", 1: "grid_one_middle_left_cone1.png"}, {0: "grid_one_middle_cube.png", 2: "grid_one_middle_cube2.png"}, {0: "grid_one_middle_right_cone.png", 1: "grid_one_middle_right_cone1.png"},
+     {0: "grid_two_middle_left_cone.png", 1: "grid_two_middle_left_cone1.png"}, {0: "grid_two_middle_cube.png", 2: "grid_two_middle_cube2.png"}, {0: "grid_two_middle_right_cone.png", 1: "grid_two_middle_right_cone1.png"},
+     {0: "grid_three_middle_left_cone.png", 1: "grid_three_middle_left_cone1.png"}, {0: "grid_three_middle_cube.png", 2: "grid_three_middle_cube2.png"}, {0: "grid_three_middle_right_cone.png", 1: "grid_three_middle_right_cone1.png"}],
+    [{0: "grid_one_bottom_left_hybrid.png", 1: "grid_one_bottom_left_hybrid1.png", 2: "grid_one_bottom_left_hybrid2.png"}, {0: "grid_one_bottom_middle_hybrid.png", 1: "grid_one_bottom_middle_hybrid1.png", 2: "grid_one_bottom_middle_hybrid2.png"}, {0: "grid_one_bottom_right_hybrid.png", 1: "grid_one_bottom_right_hybrid1.png", 2: "grid_one_bottom_right_hybrid2.png"},
+     {0: "grid_two_bottom_left_hybrid.png", 1: "grid_two_bottom_left_hybrid1.png", 2: "grid_two_bottom_left_hybrid2.png"}, {0: "grid_two_bottom_middle_hybrid.png", 1: "grid_two_bottom_middle_hybrid1.png", 2: "grid_two_bottom_middle_hybrid2.png"}, {0: "grid_two_bottom_right_hybrid.png", 1: "grid_two_bottom_right_hybrid1.png", 2: "grid_two_bottom_right_hybrid2.png"},
+     {0: "grid_three_bottom_left_hybrid.png", 1: "grid_three_bottom_left_hybrid1.png", 2: "grid_three_bottom_left_hybrid2.png"}, {0: "grid_three_bottom_middle_hybrid.png", 1: "grid_three_bottom_middle_hybrid1.png", 2: "grid_three_bottom_middle_hybrid2.png"}, {0: "grid_three_bottom_right_hybrid.png", 1: "grid_three_bottom_right_hybrid1.png", 2: "grid_three_bottom_right_hybrid2.png"}]
+];
+
+function getCookie(name) {
+    if (!document.cookie) {
+        return null;
+    }
+
+    const xsrfCookies = document.cookie.split(';')
+        .map(c => c.trim())
+        .filter(c => c.startsWith(name + '='));
+
+    if (xsrfCookies.length === 0) {
+        return null;
+    }
+    return decodeURIComponent(xsrfCookies[0].split('=')[1]);
+}
+
+function get_match_data_from_server() {
+    return new Promise((resolve => {
+        fetch("", {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: {
+                'Accept': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRFToken': getCookie('csrftoken'),
+            },
+            body: {"Match Data Wanted": 2073}
+        })
+            .then(response => {
+                return response.json();
+            })
+            .then(data => {
+                resolve(data["match_data"]);
+            })
+    }));
+
+}
+
+
+async function draw_grid(context, match_data) {
+    let initial_x = 27;
+    let y = new Array(9).fill(0);
+
+    for (let row = 0; row < grid_layout.length; row++) {
+        let x = (row !== 2) ? initial_x : 0;
+        for (let element = 0; element < grid_layout[row].length; element++) {
+            await new Promise((resolve) => {
+                setTimeout(() => {
+                    let grid_image = new Image();
+                    grid_image.onload = () => {
+                        context.drawImage(grid_image, x, y[element]);
+                        x += grid_image.width;
+                        y[element] += grid_image.height;
+                    }
+                    if (match_data[row][element] > 2 || match_data[row][element] === undefined) {
+                        match_data[row][element] = 0;
+                    }
+                    grid_image.src = relative_url + grid_layout[row][element][match_data[row][element]];
+                    resolve();
+                }, 5);
+            });
+        }
+    }
+}
+
+async function main() {
+    const auto_canvas = document.getElementById('auto_grid');
+    const auto_context = auto_canvas.getContext('2d');
+    const teleop_canvas = document.getElementById('teleop_grid');
+    const teleop_context = teleop_canvas.getContext('2d');
+
+    let match_data = await get_match_data_from_server();
+
+    draw_grid(auto_context, match_data).then();
+    draw_grid(teleop_context, match_data).then();
+}
+
+main().then();
+
+

scouting_backend/analysis/templates/match_summaries.html

@@ -0,0 +1,34 @@
+{% extends "layout.html" %}
+{% load static %}
+
+{% block Title %} Match Summary {% endblock %}
+
+{% block Content %}
+    <h2 class="d-inline-block">{{ match.quantifier }} Match {{ match.match_number }} Summary</h2>
+    <div class="dropdown d-inline-block">
+        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+                aria-haspopup="true" aria-expanded="false">
+                {{ match_data_wanted }}
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number "Red_Total" %}">Red_Total</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number "Blue_Total" %}">Blue_Total</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number match.red_one %}">Red One: {{ match.red_one }}</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number match.red_two %}">Red Two: {{ match.red_two }}</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number match.red_three %}">Red Three: {{ match.red_three }}</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number match.blue_one %}">Blue One: {{ match.blue_one }}</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number match.blue_two %}">Blue Two: {{ match.blue_two }}</a>
+            <a class="dropdown-item" href="{% url 'match_summaries' match.quantifier match.match_number match.blue_three %}">Blue Three: {{ match.blue_three }}</a>
+        </div>
+    </div>
+    <hr style="height:20px; visibility:hidden;" />
+    <canvas id="auto_grid" width="1100" height="275"></canvas>
+    <h3>Auto Grid</h3>
+    <br>
+    <canvas id="teleop_grid" width="1100" height="275"></canvas>
+    <h3>Teleop Grid</h3>
+{% endblock %}
+
+{% block Scripts %}
+    <script rel="script" src="{% static 'graphic_grid_manager.js' %}"></script>
+{% endblock %}