Allow uploading images to tools + misc fixes.

pyproject.toml

@@ -27,6 +27,8 @@ gunicorn = "^19.9"
 whitenoise = "^4.1"
 django-allauth = { git = "https://github.com/pennersr/django-allauth.git", commit = "f70cb3d" }
 #django-allauth = "^0.39.1"
+django-imagekit = "^4.0"
+pillow = "^5.4"
 
 [tool.poetry.dev-dependencies]
 ipdb = "^0.12"

toolhub/settings/base.py

@@ -31,6 +31,7 @@
     "qr_code",
     "memoize",
     "tagulous",
+    "imagekit",
     # Toolhub
     "borrowing.apps.BorrowingConfig",
     "toolhub",
@@ -169,3 +170,5 @@
     "markdown.extensions.toc",
     "markdown.extensions.wikilinks",
 ]
+
+MARKDOWNX_UPLOAD_CONTENT_TYPES = ("image/jpeg", "image/png")

toolhub/static/main.css

@@ -12,3 +12,17 @@ body, #main-wrapper {
 .socialaccount_provider {
     font-size: 1.5rem;
 }
+
+.card-tool-img {
+    max-height: 120px;
+    overflow: hidden;
+}
+
+.card-tool-img img {
+    width: 100%;
+    height: auto;
+}
+
+.content img {
+    max-width: 100%;
+}

toolhub/templates/flatpages/default.jinja

@@ -1,9 +1,30 @@
+{% from "macros/links.jinja" import object_link -%}
 {% extends "layouts/sub_header_base.jinja" %}
 
 {% block head_title %}{{ flatpage.title }}{% endblock %}
 
 {% block sub_header %}{{ flatpage.title }}{% endblock %}
 
+{% block sub_actions %}
+    {%- set pages = get_flatpages(starts_with=flatpage.url, user=user) %}
+    {% if pages.count() > 0 %}
+        <div class="navbar-text text-muted">
+            {{ _("Sub Pages:") }}&nbsp;
+        </div>
+    {% endif %}
+    <ul class="navbar-nav">
+    {%- for page in pages %}
+        <li class="nav-item">
+        {%- call object_link(page, "page-link", ["nav-link"]) -%}
+            {{ page.title }}
+        {%- endcall -%}
+        </li>
+    {% endfor -%}
+    </ul>
+{% endblock %}
+
 {% block content %}
+<div class="content">
 {{ markdown(flatpage.content) }}
+</div>
 {% endblock %}

toolhub/templates/home.jinja

@@ -24,7 +24,9 @@
                 <h2>{{ _("Borrowed Tools") }}</h2>
                 {% for tool in borrowed_tools[:SHORT_PAGINATE_BY] %}
                 {% call tool_details_card(tool, user, ['mb-4']) %}
-                    <p class="card-text"><small class="text-uppercase">owner:</small> {{ object_link(tool.user, "profile-link") }}</p>
+                    <p class="card-text">
+                        <small>owner: {{ object_link(tool.user, "profile-link") }}</small>
+                    </p>
                     {{ return_button(tool) }}
                 {% endcall %}
                 {% else %}
@@ -40,7 +42,11 @@
                 <h2>{{ _("Recently Added Tools") }}</h2>
                 {% for tool in new_tools[:SHORT_PAGINATE_BY] %}
                 {% call tool_details_card(tool, user, ['mb-4']) %}
-                    <p class="card-text"><small class="text-uppercase">owner:</small> {{ object_link(tool.user, "profile-link") }}</p>
+                    <p class="card-text">
+                        <small>owner: {{ object_link(tool.user, "profile-link") }}</small>
+                        <br>
+                        <small>added: {{ tool.created|date("SHORT_DATETIME_FORMAT") }}</small>
+                    </p>
                 {% endcall %}
                 {% else %}
                 <div class="card text-white bg-warning">

toolhub/templates/layouts/base.jinja

@@ -8,7 +8,7 @@
         <title>Toolhub - {% block head_title %}{% endblock %}</title>
         <!-- BS4 CDN for now. -->
         {% block head_css %}
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
         {% block main_css %}<link rel="stylesheet" href="{{ static('main.css') }}">{% endblock %}
         <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-LRlmVvLKVApDVGuspQFnRQJjkv0P7/YFrw84YYQtmYG4nK8c+M+NlmYDCv0rKWpG" crossorigin="anonymous">
         {% endblock %}
@@ -41,9 +41,9 @@
     </section>
     {% block body_javascript %}
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    {% endblock %}
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+        {% endblock %}
 {% endblock %}
     </body>
 </html>

toolhub/templates/layouts/sub_header_base.jinja

@@ -7,7 +7,7 @@
     <div class="container">
         {% block page_header %}
         {#- you can use page_header to place header based navigation -#}
-        <h3 class="mb-0 text-light">{% block sub_header %}Change Me{% endblock %}</h3>
+        <h3 class="mb-0 text-light mr-auto">{% block sub_header %}Change Me{% endblock %}</h3>
         {% endblock %}
         {% block sub_actions %}{% endblock %}
     </div>

toolhub/templates/macros/tool_card.jinja

@@ -12,7 +12,9 @@
 <div {{ classes }}>
     {% set photo = tool.cover_photo %}
     {% if photo %}
-        <img class="card-img-top" src="{{ photo.file.file }}" alt="{{ photo.title|default('tool photo') }}">
+        <div class="card-img-top card-tool-img">
+            <img src="{{ photo.card_thumbnail.url }}" alt="{{ photo.title|default('tool photo') }}">
+        </div>
     {% endif %}
     <div class="card-body">
         <h5 class="card-title"><a href="{{ tool_link }}">{{ tool.title }}</a> </h5>

toolhub/templates/partials/footer.jinja

@@ -11,12 +11,12 @@
                 </div>
                 <div>
                     {% block footer_container %}
-                        {%- set pages = get_flatpages() %}
+                        {%- set pages = get_flatpages(user=user) %}
                         {%- for page in pages %}
                             {%- call object_link(page, "page-link", ["text-white"]) -%}
                                 {{ page.title }}
-                                <br>
                             {%- endcall -%}
+                            <br>
                         {% endfor -%}
                     {% endblock %}
                 </div>

toolhub/views.py

@@ -15,7 +15,7 @@ def get_context_data(self, **kwargs):
         ctx = super().get_context_data()
         if ctx["user"].is_authenticated:
             ctx["borrowed_tools"] = UserTool.objects.borrowing_by_user(ctx["user"])
-            ctx["new_tools"] = UserTool.objects.visible_to_user(ctx["user"]).order_by("created")
+            ctx["new_tools"] = UserTool.objects.visible_to_user(ctx["user"]).order_by("-created")
         return ctx
 
 

tools/forms.py

@@ -1,9 +1,11 @@
+from braces.forms import UserKwargModelFormMixin
 from crispy_forms.layout import Button, Div, Field, Fieldset, Reset, Submit
 from django import forms
+from django.urls import reverse
 from django.utils.translation import ugettext_lazy as _
 
 from toolhub_auth.models import User
-from tools.models import ClearancePermission, UserTool
+from tools.models import ClearancePermission, ToolPhoto, UserTool
 from utils.forms import CrispyFormMixin
 
 
@@ -19,7 +21,9 @@ def layout_args(self, helper):
             Fieldset(
                 None,
                 Field("title"),
-                Field("description", css_class="h-100", label_class="", field_class=""),
+                # attempts
+                # css_class="h-100", label_class="", field_class="", help_text="test"
+                Field("description"),
                 Field("taxonomies"),
                 Field("visibility"),
                 Field("clearance"),
@@ -34,6 +38,24 @@ class Meta:
         fields = ("title", "description", "taxonomies", "visibility", "clearance")
         model = UserTool
 
+    def post_super_init(self):
+        super().post_super_init()
+        self.update_markdown_upload_path()
+
+    def update_markdown_upload_path(self):
+        if hasattr(self, "instance") and self.pk_field:
+            reverse_kwargs = {self.pk_field: self.instance.pk}
+        else:
+            reverse_kwargs = {}
+        attrs = self.fields["description"].widget.attrs
+        attrs.update(
+            {
+                "data-markdownx-upload-urls-path": reverse(
+                    "tools:upload_tool_photo", kwargs=reverse_kwargs
+                )
+            }
+        )
+
 
 class UserToolUpdateForm(UserToolCreateForm):
     action_button_label = _("Update tool")
@@ -116,3 +138,27 @@ def save(self):
         )
         removed_users = init_users - edited_users
         self.instance.permissions.filter(cleared_user_id__in=removed_users).delete()
+
+
+class UploadToolPhotoForm(UserKwargModelFormMixin, forms.ModelForm):
+    """
+    Optionally takes a tool to make association
+    Also set the `uploading_user`?
+    """
+
+    class Meta:
+        model = ToolPhoto
+        fields = ("file",)
+
+    def __init__(self, *args, **kwargs):
+        # move file uploaded to what the form expects
+        kwargs["files"]["file"] = kwargs["files"]["image"]
+        self.tool = kwargs.pop("tool", None)
+        return super().__init__(*args, **kwargs)
+
+    def save(self, commit=True):
+        # This will set the photo tool to null if none was passed
+        self.instance.tool = self.tool
+        self.instance.uploading_user = self.user
+        # NOTE: get title from file name temporarily
+        return super().save(commit=commit)

tools/migrations/0008_auto_20190312_0126.py

@@ -0,0 +1,24 @@
+# Generated by Django 2.1.7 on 2019-03-12 06:26
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools', '0007_auto_20181106_1734'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='toolphoto',
+            name='file',
+            field=models.ImageField(upload_to='%Y/%m/'),
+        ),
+        migrations.AlterField(
+            model_name='toolphoto',
+            name='tool',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='photos', to='tools.UserTool'),
+        ),
+    ]

tools/models.py

@@ -15,13 +15,15 @@
 from django.urls import reverse
 from django.utils.translation import ugettext_lazy as _
 from django_extensions.db.models import TimeStampedModel, TitleDescriptionModel
+from imagekit import ImageSpec
+from imagekit.models import ImageSpecField
+from imagekit.processors import ResizeToFill, ResizeToFit
 from markdownx.models import MarkdownxField
 from tagulous.models import TagField, TagTreeModel
 
-from utils.models import StateMachineMixin
-
 from tools.exceptions import ToolAvailabilityException, ToolClearanceException
 from tools.querysets import ToolHistoryQuerySet, UserToolQuerySet
+from utils.models import StateMachineMixin
 
 
 class ToolTaxonomy(TagTreeModel):
@@ -228,14 +230,38 @@ def __str__(self):
         return f"{self.cleared_by_user} cleared {self.cleared_user} ({self.tool})"
 
 
+class ToolCardThumbnailSpec(ImageSpec):
+    processors = [ResizeToFill(320, 160)]
+    format = "JPEG"
+    options = {"quality": 80}
+
+
+class ToolGalleryThumbnailSpec(ToolCardThumbnailSpec):
+    processors = [ResizeToFill(120, 120)]
+
+
+class ToolContentThumbnailSpec(ToolCardThumbnailSpec):
+    processors = [ResizeToFit(825, 620)]
+
+
 class ToolPhoto(TimeStampedModel):
-    tool = models.ForeignKey(UserTool, on_delete=models.CASCADE, related_name="photos")
+    tool = models.ForeignKey(
+        UserTool, on_delete=models.CASCADE, related_name="photos", blank=True, null=True
+    )
     uploading_user = models.ForeignKey(
         settings.AUTH_USER_MODEL, on_delete=models.PROTECT, related_name="uploaded_photos"
     )
-    file = models.FileField()
+    file = models.ImageField(upload_to="%Y/%m/")
     title = models.CharField(max_length=255, blank=True)
 
+    # Thumbnails
+    card_thumbnail = ImageSpecField(source="file", spec=ToolCardThumbnailSpec)
+    gallery_thumbnail = ImageSpecField(source="file", spec=ToolGalleryThumbnailSpec)
+    content_thumbnail = ImageSpecField(source="file", spec=ToolContentThumbnailSpec)
+
     class Meta:
         ordering = ("-created",)
         get_latest_by = "created"
+
+    def __str__(self):
+        return f"{self.tool} - {self.title}"

tools/templates/tools/usertool_detail.jinja

@@ -16,14 +16,14 @@
 {% endblock %}
 
 {% block sub_actions %}
-<small class="text-muted">{{ url('tool_short', pk=tool.pk) }}</small>
+<small class="text-muted mr-2">{{ url('tool_short', pk=tool.pk) }}</small>
 <div class="btn-toolbar" role="toolbar" aria-label="{{ _('Tool actions') }}">
     {# TODO: only show this group to owner for now #}
     <div class="btn-group mr-2">
         <a href="{{ url('tools:edit', pk=tool.pk) }}" class="btn btn-warning">{{ _('Edit') }}</a>
         <a href="{{ url('tools:delete', pk=tool.pk) }}" class="btn btn-danger">{{ _('Delete') }}</a>
     </div>
-    <div class="btn-group mr-2">
+    <div class="btn-group">
         <a class="btn btn-info disabled" disabled aria-disabled="true">{{ _('Print Label') }}</a>
         <a href="{{ url('tools:label', pk=tool.pk) }}?orientation=landscape" target="_blank" class="btn btn-info" title="{{ _('Landscape') }}">
             <i class="far fa-rectangle-landscape"></i>
@@ -57,6 +57,13 @@
                 </div>
             </div>
         </div>
+        <div class="photos row my-3">
+            {% for photo in tool.photos.all() %}
+            <a href="{{ photo.file.url }}" target="_blank" class="d-block col-md-2 col-sm-4 col-4 overflow-hidden">
+                <img src="{{ photo.gallery_thumbnail.url }}" alt="{{ photo.title }}" class="d-block w-100 mw-100 rounded border border-secondary"/>
+            </a>
+            {% endfor %}
+        </div>
         <div class="row my-3">
             <div class="col flex-grow-0">
                 {% if tool.user_can_borrow(user) and not tool.is_in_use() %}
@@ -67,7 +74,7 @@
                 {% endif %}
             </div>
         </div>
-        <section class="my-3">
+        <section class="content my-3">
             {{ markdown(tool.description) }}
         </section>
     </div>
@@ -103,9 +110,9 @@
                     <p class="list-group-item list-group-item-action list-group-item-primary"><a  href={{ url('tools:cleared', pk=tool.pk) }}>{{_('View all cleared People')}}</a></p>
                 {% endif %}
             {% endfor %}
-                {% if tool.user_can_grant_clearance(user) %}
-                    <a href="{{ url('tools:clear', pk=tool.pk) }}" class="list-group-item list-group-item-action list-group-item-success">{{ _('Modify Clearances') }}</a>
-                {% endif %}
+            {% if tool.user_can_grant_clearance(user) %}
+                <a href="{{ url('tools:clear', pk=tool.pk) }}" class="list-group-item list-group-item-action list-group-item-success">{{ _('Modify Clearances') }}</a>
+            {% endif %}
             </div>
         {% endif %}
         </div>

tools/templates/tools/usertool_filter.jinja

@@ -24,13 +24,11 @@
         {{ crispy(filter.form) }}
     </div>
     <div class="col-md-9">
-        <div class="row">
+        <div class="card-columns">
         {% for tool in tools %}
-        <div class="col-sm-6 col-md-4 mb-4">
         {% call tool_details_card(tool, user) %}
             <p class="card-text"><small class="text-uppercase">owner:</small> {{ object_link(tool.user, "profile-link") }}</p>
         {% endcall %}
-        </div>
         {% else %}
         <div class="col-sm-12">
             <div class="card text-white bg-warning">