style tweaks, update source page

app/common/static/styles/_colours.scss

@@ -4,7 +4,7 @@ $colour-near-black: #011627;
 $colour-near-white: #fdfffc;
 $colour-light-blue: #2e8ac4;
 $colour-red: #e71d36;
-$colour-orange: #f69e12;
+$colour-orange: #ef9912;
 
 $background-colour: $colour-near-white;
 $text-colour: $colour-near-black;
@@ -52,3 +52,6 @@ $pagination-border-hover-colour: $colour-light-blue;
 $pagination-current-background-colour: $colour-orange;
 $pagination-current-text-colour: $colour-near-white;
 $pagination-current-border-colour: $colour-orange;
+
+$infobox-background-colour: $colour-near-white;
+$infobox-text-colour: $colour-near-black;

app/common/static/styles/_helpers.scss

@@ -14,6 +14,10 @@ strong {
     margin-bottom: 20px !important;
 }
 
+.padding-top {
+    padding-top: 20px;
+}
+
 .errors {
     background-color: $box-error-background-colour;
     border-radius: 2px;

app/common/static/styles/_template.scss

@@ -63,7 +63,7 @@ main {
 
     a {
         color: $main-link-colour;
-        text-decoration: underline;
+        text-decoration: none;
         &:hover {
             color: $main-link-hover-colour;
         }
@@ -131,6 +131,11 @@ main {
         }
     }
 
+    .infobox {
+        background-color: $infobox-background-colour;
+        color: $infobox-text-colour;
+    }
+
 }
 
 footer {

app/common/templates/infobox.html

@@ -0,0 +1,11 @@
+{% if message %}
+<div class="row">
+  <div class="col s12">
+    <div class="card infobox">
+      <div class="card-content">
+        <i class="fas fa-info-circle"></i> {{ message }}
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}

app/common/templates/pagination.html

@@ -1,7 +1,11 @@
 {% if paginator.num_pages > 1 %}
-<div class="pagination">
-  {% for i in paginator.page_range %}
-    <a class="pagenum{% if i == page_obj.number %} currentpage{% endif %}" href="?page={{ i }}">{{ i }}</a>
-  {% endfor %}
+<div class="row">
+  <div class="col s12">
+    <div class="pagination">
+      {% for i in paginator.page_range %}
+        <a class="pagenum{% if i == page_obj.number %} currentpage{% endif %}" href="?page={{ i }}">{{ i }}</a>
+      {% endfor %}
+    </div>
+  </div>
 </div>
 {% endif %}

app/sync/templates/sync/source-update.html

@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+
+{% block headtitle %}Update source - {{ source.name }}{% endblock %}
+
+{% block content %}
+<div class="row no-margin-bottom">
+  <div class="col s12">
+    <h1>Update source <strong>{{ source.name }}</strong></h1>
+    <p>
+      You can use this form to update your source. A source is what's polled on regular
+      basis to find new media to download, such as a channel or playlist. Any changes
+      to a source will only apply to new media and will not update media previously
+      downloaded.
+    </p>
+  </div>
+</div>
+<div class="row">
+  <form method="post" action="{% url 'sync:update-source' pk=source.pk %}" class="col s12 simpleform">
+    {% csrf_token %}
+    {% include 'simpleform.html' with form=form %}
+    <div class="row no-margin-bottom padding-top">
+      <div class="col s12">
+        <button class="btn" type="submit" name="action">Update source <i class="fas fa-pen-square"></i></button>
+      </div>
+    </div>
+  </form>
+</div>
+{% endblock %}

app/sync/templates/sync/source.html

@@ -6,7 +6,7 @@
 <div class="row">
   <div class="col s12">
     <h1 class="truncate">Source <strong>{{ source.name }}</strong></h1>
-    <p class="truncate"><strong><a href="{{ source.url }}" target="_blank">{{ source.url }}</a></strong></p>
+    <p class="truncate"><strong><a href="{{ source.url }}" target="_blank"><i class="fas fa-link"></i> {{ source.url }}</a></strong></p>
     <p class="truncate">Saving to: <strong>{{ source.directory_path }}</strong></p>
   </div>
 </div>
@@ -75,12 +75,12 @@
     </table>
   </div>
 </div>
-<div class="row no-margin-bottom">
+<div class="row no-margin-bottom padding-top">
   <div class="col s12 l6 margin-bottom">
-    <a href="" class="btn"><i class="fas fa-pen-square"></i> Edit source</a>
+    <a href="{% url 'sync:update-source' pk=source.pk %}" class="btn">Edit source <i class="fas fa-pen-square"></i></a>
   </div>
   <div class="col s12 l6 margin-bottom">
-    <a href="" class="btn delete-button"><i class="fas fa-trash-alt"></i> Delete source</a>
+    <a href="" class="btn delete-button">Delete source <i class="fas fa-trash-alt"></i></a>
   </div>
 </div>
 {% endblock %}

app/sync/templates/sync/sources.html

@@ -3,12 +3,13 @@
 {% block headtitle %}Sources{% endblock %}
 
 {% block content %}
+{% include 'infobox.html' with message=message %}
 <div class="row no-margin-bottom">
   <div class="col s12 l6 margin-bottom">
-    <a href="{% url 'sync:validate-source' source_type='youtube-channel' %}" class="btn"><i class="fab fa-youtube"></i> Add a YouTube channel</a>
+    <a href="{% url 'sync:validate-source' source_type='youtube-channel' %}" class="btn">Add a YouTube channel <i class="fab fa-youtube"></i></a>
   </div>
   <div class="col s12 l6 margin-bottom">
-    <a href="{% url 'sync:validate-source' source_type='youtube-playlist' %}" class="btn"><i class="fab fa-youtube"></i> Add a YouTube playlist</a>
+    <a href="{% url 'sync:validate-source' source_type='youtube-playlist' %}" class="btn">Add a YouTube playlist <i class="fab fa-youtube"></i></a>
   </div>
 </div>
 <div class="row no-margin-bottom">
@@ -27,11 +28,5 @@
     </div>
   </div>
 </div>
-{% if sources %}
-<div class="row">
-  <div class="col s12">
-    {% include 'pagination.html' with pagination=sources.paginator %}
-  </div>
-</div>
-{% endif %}
+{% include 'pagination.html' with pagination=sources.paginator %}
 {% endblock %}

app/sync/urls.py

@@ -1,6 +1,6 @@
 from django.urls import path
 from .views import (DashboardView, SourcesView, ValidateSourceView, AddSourceView,
-                    SourceView, MediaView, TasksView, LogsView)
+                    SourceView, UpdateSourceView, MediaView, TasksView, LogsView)
 
 
 app_name = 'sync'
@@ -8,19 +8,23 @@ app_name = 'sync'
 
 urlpatterns = [
 
+    # Dashboard URLs
+
     path('',
          DashboardView.as_view(),
          name='dashboard'),
-        
+    
+    # Source URLs
+
     path('sources',
          SourcesView.as_view(),
          name='sources'),
 
-    path('source/validate/<slug:source_type>',
+    path('source-validate/<slug:source_type>',
          ValidateSourceView.as_view(),
          name='validate-source'),
 
-    path('source/add',
+    path('source-add',
          AddSourceView.as_view(),
          name='add-source'),
 
@@ -28,14 +32,24 @@ urlpatterns = [
          SourceView.as_view(),
          name='source'),
 
+    path('source-update/<uuid:pk>',
+         UpdateSourceView.as_view(),
+         name='update-source'),
+
+    # Media URLs
+
     path('media',
          MediaView.as_view(),
          name='media'),
 
+    # Task URLs
+
     path('tasks',
          TasksView.as_view(),
          name='tasks'),
 
+    # Log URLs
+
     path('logs',
          LogsView.as_view(),
          name='logs'),

app/sync/views.py

@@ -1,7 +1,7 @@
 from django.conf import settings
 from django.http import Http404
 from django.views.generic import TemplateView, ListView, DetailView
-from django.views.generic.edit import FormView, CreateView
+from django.views.generic.edit import FormView, CreateView, UpdateView
 from django.urls import reverse_lazy
 from django.forms import ValidationError
 from django.utils.text import slugify
@@ -32,7 +32,7 @@ class SourcesView(ListView):
     context_object_name = 'sources'
     paginate_by = settings.SOURCES_PER_PAGE
     messages = {
-        'source-added': _('Your new source has been added'),
+        'source-created': _('Your new source has been added'),
         'source-deleted': _('Your selected source has been deleted.'),
         'source-updated': _('Your selected source has been updated.'),
     }
@@ -108,7 +108,7 @@ class ValidateSourceView(FormView):
         Source.SOURCE_TYPE_YOUTUBE_PLAYLIST: {
             'scheme': 'https',
             'domain': 'www.youtube.com',
-            'path_regex': '^\/playlist$',
+            'path_regex': '^\/(playlist|watch)$',
             'qs_args': ['list'],
             'extract_key': ('qs_args', 'list'),
             'example': 'https://www.youtube.com/playlist?list=PLAYLISTID'
@@ -233,6 +233,19 @@ class SourceView(DetailView):
     model = Source
 
 
+class UpdateSourceView(UpdateView):
+
+    template_name = 'sync/source-update.html'
+    model = Source
+    fields = ('source_type', 'key', 'name', 'directory', 'delete_old_media',
+              'days_to_keep', 'source_profile', 'prefer_60fps', 'prefer_hdr',
+              'output_format', 'fallback')
+
+    def get_success_url(self):
+        url = reverse_lazy('sync:sources')
+        return append_uri_params(url, {'message': 'source-updated'})
+
+
 class MediaView(TemplateView):
     '''
         A bare list of media added with their states.