- Make the search page mostly work

Author: alexlambson

kirovy/serializers/cnc_map_serializers.py

@@ -151,12 +151,24 @@ class CncMapBaseSerializer(CncNetUserOwnedModelSerializer):
         default=None,
     )
 
+    # TODO: These serializer method fields really ought to be sub serializers
+    # TODO: Make sure queries are optimized in the views for listing maps.
+    latest_map_file_hash = serializers.SerializerMethodField()
+    game_slug = serializers.SerializerMethodField()
+    created_date = serializers.DateTimeField("%Y-%m-%d", source="created")
+
     class Meta:
         model = cnc_map.CncMap
         # We return the ID instead of the whole object.
         exclude = ["cnc_game", "categories", "parent"]
         fields = "__all__"
 
+    def get_latest_map_file_hash(self, obj: cnc_map.CncMap) -> str:
+        return obj.cncmapfile_set.order_by("-version").first().hash_sha1
+
+    def get_game_slug(self, obj: cnc_map.CncMap) -> str:
+        return obj.cnc_game.slug
+
     def create(self, validated_data: t.DictStrAny) -> cnc_map.CncMap:
         cnc_map_instance = cnc_map.CncMap(**validated_data)
         cnc_map_instance.save()

kirovy/templates/legacy_search.html

@@ -7,24 +7,56 @@
 {% block wrapped_content %}
 <div class="form-wrapper limit-w-1000">
     <h2>Search Options</h2>
-    <form action="/search" method="post" enctype="multipart/form-data">
+    <form action="/search" method="get" enctype="multipart/form-data">
         <div>
             <div>
                 <label for="game-slug">Game</label>
-                <select id="game-slug" name="game">
-                    <option value="td" selected="selected">Command &amp; Conquer (Tiberian Dawn)</option>
-                    <option value="ra" selected="selected">Red Alert 1</option>
-                    <option value="d2" selected="selected">Dune 2000</option>
-                    <option value="ts" selected="selected">Tiberian Sun</option>
-                    <option value="yr" selected="selected">Yuri's Revenge</option>
+                <select id="game-slug" name="game_slug" required="required">
+                    <option disabled selected="selected" value=""> -- Select a game -- </option>
+                    <option value="td">Command &amp; Conquer (Tiberian Dawn)</option>
+                    <option value="ra">Red Alert 1</option>
+                    <option value="d2">Dune 2000</option>
+                    <option value="ts">Tiberian Sun</option>
+                    <option value="yr">Yuri's Revenge</option>
                 </select>
             </div>
             <div>
-                <label for="map-name-or-description">Search text</label>
-                <input type="text" id="map-name-or-description" name="map-name-or-description">
+                <label for="search">Search text</label>
+                <input type="text" id="search" name="search" required="required">
             </div>
         </div>
         <button class="full-width-flex-row btn" type="submit">Search</button>
     </form>
 </div>
+<div id="search-results">
+    <div class="callout-note limit-w-1000" {% if results == '' or results|length == 0 %}style="display: none"{% endif %}>
+        You can download the map files and place in your game directory,
+        or you can use the <span class="inline-code">/downloadmap {MAP_HASH}</span> in a CnCNet multiplayer lobby.
+    </div>
+    <div class="callout-note limit-w-1000" {% if results is None or results|length > 0 %}style="display: none"{% endif %}>
+        No maps found. Try altering your search.
+    </div>
+    <div class="flex-grid">
+    {% for cnc_map in results %}
+        <div class="map-result">
+        {% autoescape on %}
+            <div>
+                {{ cnc_map.created_date }}
+            </div>
+            <div>
+                {{ cnc_map.latest_map_file_hash }}
+            </div>
+            <div style="flex-grow: 2; text-align: right">
+                {{ cnc_map.map_name }}
+            </div>
+            <div style="flex-grow: 0">
+                <a href="/{{ cnc_map.game_slug }}/{{ cnc_map.latest_map_file_hash }}">
+                    <i class="bi bi-floppy btn-smol"></i>
+                </a>
+            </div>
+        {% endautoescape %}
+        </div>
+    {% endfor %}
+    </div>
+</div>
 {% endblock %}

kirovy/views/base_views.py

@@ -48,7 +48,7 @@ class KirovyListCreateView(_g.ListCreateAPIView):
     """
 
     permission_classes = [permissions.CanUpload | permissions.ReadOnly]
-    pagination_class: t.Type[KirovyDefaultPagination] = KirovyDefaultPagination
+    pagination_class: t.Optional[t.Type[KirovyDefaultPagination]] = KirovyDefaultPagination
     _paginator: t.Optional[KirovyDefaultPagination]
     request: KirovyRequest  # Added for type hinting. Populated by DRF ``.setup()``
 

kirovy/views/cnc_map_views.py

@@ -18,6 +18,7 @@
     CncMap,
     CncMapFile,
 )
+from kirovy.objects.ui_objects import ResultResponseData, ListResponseData, BaseResponseData
 from kirovy.request import KirovyRequest
 from kirovy.response import KirovyResponse
 from kirovy.serializers import cnc_map_serializers
@@ -54,7 +55,7 @@ class MapListFilters(filters.FilterSet):
     cnc_game = filters.ModelMultipleChoiceFilter(
         field_name="cnc_game__id", to_field_name="id", queryset=CncGame.objects.filter(is_visible=True)
     )
-    # categories = filters.ModelMultipleChoiceFilter(queryset=MapCategory.objects.filter())
+    game_slug = filters.CharFilter(field_name="cnc_game__slug")
 
     class Meta:
         model = CncMap
@@ -154,17 +155,23 @@ def get_queryset(self):
             # Prefetch the categories because they're displayed like tags.
             # TODO: Since the category list is going to be somewhat small,
             #  maybe the UI should just cache them and I return IDs instead of objects?
-            .prefetch_related("categories")
+            .prefetch_related("categories", "cncmapfile_set")
         )
         return base_query
 
     filter_backends = [
+        filters.DjangoFilterBackend,  # filter first to reduce the count of rows that we full text search on.
         SearchFilter,
         OrderingFilter,
-        filters.DjangoFilterBackend,
     ]
     filterset_class = MapListFilters
 
+    search_param = "search"
+    """attr: The query param to use in the URL
+
+     Searches the fields defined in :attr:`~kirovy.views.cnc_map_views.MapListCreateView`
+     """
+
     search_fields = [
         "@map_name",
         "^description",
@@ -288,3 +295,11 @@ class MapLegacySearchUI(MapListCreateView):
     permission_classes = [AllowAny]
     renderer_classes = [TemplateHTMLRenderer]
     template_name = "legacy_search.html"
+    pagination_class = None
+
+    # TODO: Require filters.
+    def get(self, request, *args, **kwargs) -> KirovyResponse[ListResponseData | None]:
+        if not request.query_params.get("game_slug"):
+            return KirovyResponse[None](status=status.HTTP_200_OK)
+        response = super().get(request, *args, **kwargs)
+        return response

static/bc-assets/bc-main.css

@@ -1,3 +1,5 @@
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
+
 body {
     --bs-body-color: #f1f1f1;
     --bs-body-bg: #141619;
@@ -111,6 +113,7 @@ form > label {
     padding: 1.5rem;
     border-radius: 4px;
     border: 1px solid #00fe89;
+    box-sizing: border-box;
 }
 
 .form-wrapper > h2 {
@@ -167,17 +170,21 @@ form > div > div:last-of-type {
 
 .btn {
     padding: 1rem 0;
-    color: #33ffa1;
-    background: rgba(0, 255, 208, 0);
     border-color: #33ffa1;
     border-radius: 5px;
+
+}
+
+.btn, .btn-smol {
+    color: #33ffa1;
+    background: rgba(0, 255, 208, 0);
     font-weight: bold;
     font-size: 1.5rem;
     transition: all ease .35s;
     backdrop-filter: blur(15px);
 }
 
-.btn:hover {
+.btn:hover, .btn-smol:hover {
     background: rgba(0,255,208,.1450980392);
     cursor: pointer;
 }
@@ -191,3 +198,39 @@ html {
     visibility: visible;
     opacity: 1;
 }
+
+.callout-note {
+    border: solid #1f6febb3;
+    background-color: rgba(31, 111, 235, 0.12);
+    border-width: 0 0 0 .5rem;
+    padding: 1.5rem 1rem;
+    margin: 3rem auto;
+    box-sizing: border-box;
+}
+
+
+.flex-grid {
+    display: flex block;
+    flex-direction: column;
+}
+
+.flex-grid > div {
+    flex-direction: row;
+    display: flex;
+}
+
+.flex-grid > div > div {
+    flex-grow: 0;
+    text-align: left;
+    padding: .5rem 1.5rem;
+}
+
+.flex-grid > div > div:first-child {
+    padding-left: 0;
+}
+
+.flex-grid > div > div:last-child {
+    text-align: right;
+    flex-grow: 1;
+    padding-right: 0;
+}