Add edit UI

Move to keyed structure instead of list

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: dgtlmoon
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.8-buster
+FROM python:3.8-slim
 COPY requirements.txt /tmp/requirements.txt
 RUN pip3 install -r /tmp/requirements.txt
 

backend/backend.py

@@ -79,20 +79,36 @@ def _jinja2_filter_datetimestamp(timestamp, format="%Y-%m-%d %H:%M:%S"):
 def main_page():
     global messages
 
-    # Show messages but once.
-    # maybe if the change happened more than a few days ago.. add a class
+    # Sort by last_changed and add the uuid which is usually the key..
+    sorted_watches=[]
+    for uuid, watch in datastore.data['watching'].items():
+        watch['uuid']=uuid
+        sorted_watches.append(watch)
 
-    # Sort by last_changed
-    datastore.data['watching'].sort(key=lambda x: x['last_changed'], reverse=True)
-    output = render_template("watch-overview.html", watches=datastore.data['watching'], messages=messages)
+    sorted_watches.sort(key=lambda x: x['last_changed'], reverse=True)
+
+    output = render_template("watch-overview.html", watches=sorted_watches, messages=messages)
+
+    # Show messages but once.
     messages = []
     return output
 
 
+@app.route("/edit", methods=['GET'])
+def edit_page():
+    global messages
+
+    uuid = request.args.get('uuid')
+
+    output = render_template("edit.html", uuid=uuid, watch=datastore.data['watching'][uuid], messages=messages)
+    return output
+
+
 @app.route("/favicon.ico", methods=['GET'])
 def favicon():
     return send_from_directory("/app/static/images", filename="favicon.ico")
 
+
 @app.route("/static/<string:group>/<string:filename>", methods=['GET'])
 def static_content(group, filename):
     try:
@@ -112,31 +128,74 @@ def api_watch_add():
     return redirect(url_for('main_page'))
 
 
+@app.route("/api/delete", methods=['GET'])
+def api_delete():
+    global messages
+    uuid = request.args.get('uuid')
+    datastore.delete(uuid)
+    messages.append({'class': 'ok', 'message': 'Deleted.'})
+
+    return redirect(url_for('main_page'))
+
+
+@app.route("/api/update", methods=['POST'])
+def api_update():
+    global messages
+    import validators
+
+    uuid = request.args.get('uuid')
+
+    url = request.form.get('url').strip()
+    tag = request.form.get('tag').strip()
+
+    validators.url(url) #@todo switch to prop/attr/observer
+    datastore.data['watching'][uuid].update({'url': url,
+                                             'tag': tag})
+
+    #@todo switch to prop/attr/observer
+    datastore.sync_to_json()
+
+    messages.append({'class': 'ok', 'message': 'Updated.'})
+
+    return redirect(url_for('main_page'))
+
 @app.route("/api/checknow", methods=['GET'])
 def api_watch_checknow():
     global messages
 
     uuid = request.args.get('uuid')
 
-    # dict would be better, this is a simple safety catch.
-    for watch in datastore.data['watching']:
-        if watch['uuid'] == uuid:
-            # @todo cancel if already running?
-            running_update_threads[uuid] = fetch_site_status.perform_site_check(uuid=uuid,
-                                                                                datastore=datastore)
-            running_update_threads[uuid].start()
+    running_update_threads[uuid] = fetch_site_status.perform_site_check(uuid=uuid,
+                                                                        datastore=datastore)
+    running_update_threads[uuid].start()
 
     return redirect(url_for('main_page'))
 
 
+@app.route("/api/recheckall", methods=['GET'])
+def api_watch_recheckall():
+    import fetch_site_status
+
+    global running_update_threads
+    i = 0
+    for uuid, watch in datastore.data['watching']:
+        i = i + 1
+
+        running_update_threads[watch['uuid']] = fetch_site_status.perform_site_check(uuid=uuid,
+                                                                                     datastore=datastore)
+        running_update_threads[watch['uuid']].start()
+
+    return "{} rechecked of {} watches.".format(i, len(datastore.data['watching']))
+
+
 # Can be used whenever, launch threads that need launching to update the stored information
 def launch_checks():
     import fetch_site_status
     global running_update_threads
 
-    for watch in datastore.data['watching']:
+    for uuid,watch in datastore.data['watching'].items():
         if watch['last_checked'] <= time.time() - 3 * 60 * 60:
-            running_update_threads[watch['uuid']] = fetch_site_status.perform_site_check(uuid=watch['uuid'],
+            running_update_threads[watch['uuid']] = fetch_site_status.perform_site_check(uuid=uuid,
                                                                                          datastore=datastore)
             running_update_threads[watch['uuid']].start()
 

backend/fetch_site_status.py

@@ -3,6 +3,10 @@ import time
 import requests
 import hashlib
 import os
+import re
+import html2text
+from urlextract import URLExtract
+
 
 # Hmm Polymorphism datastore, thread, etc
 class perform_site_check(Thread):
@@ -53,23 +57,39 @@ class perform_site_check(Thread):
         extra_headers = self.datastore.get_val(self.uuid, 'headers')
         headers.update(extra_headers)
 
-        print (headers)
-
-
         print("Checking", self.url)
-        import html2text
+
         self.ensure_output_path()
 
         try:
             r = requests.get(self.url, headers=headers, timeout=15, verify=False)
             stripped_text_from_html = html2text.html2text(r.content.decode('utf-8'))
 
+            # @todo This should be a config option.
+            # Many websites include junk in the links, trackers, etc.. Since we are really a service all about text changes..
+
+            extractor = URLExtract()
+            urls = extractor.find_urls(stripped_text_from_html)
+            # Remove the urls, longest first so that we dont end up chewing up bigger links with parts of smaller ones.
+            if urls:
+                urls.sort(key=len, reverse=True)
+
+                for url in urls:
+                    # Sometimes URLExtract will consider something like 'foobar.com' as a link when that was just text.
+                    if "://" in url:
+                        #print ("Stripping link", url)
+                        stripped_text_from_html = stripped_text_from_html.replace(url, '')
+
+
 
         # Usually from networkIO/requests level
         except (requests.exceptions.ConnectionError,requests.exceptions.ReadTimeout) as e:
             self.datastore.update_watch(self.uuid, 'last_error', str(e))
             print(str(e))
 
+        except requests.exceptions.MissingSchema:
+            print ("Skipping {} due to missing schema/bad url".format(self.uuid))
+
         # Usually from html2text level
         except UnicodeDecodeError as e:
             self.datastore.update_watch(self.uuid, 'last_error', str(e))

backend/static/css/styles.css

@@ -3,95 +3,157 @@
  * Most of these are inherited from Base, but I want to change a few.
  */
 body {
-    color: #333;
-    background: #262626;
+  color: #333;
+  background: #262626;
 }
 
+.pure-table-even {
+  background: #fff;
+}
 /* Some styles from https://css-tricks.com/ */
 
 a {
-    text-decoration: none;
-    color: #1b98f8;
+  text-decoration: none;
+  color: #1b98f8;
 }
 a.github-link {
-    color: #fff;
+  color: #fff;
+}
+
+
+.pure-menu-horizontal {
+  background: #fff;
+  padding: 5px;
+  display: flex;
+  justify-content: space-between;
 }
 
 section.content {
 
-    padding-top: 5em;
-    padding-bottom: 5em;
-flex-direction: column;
+  padding-top: 5em;
+  padding-bottom: 5em;
+  flex-direction: column;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .pure-table.watch-table td {
-  font-size: 90%;
+  font-size: 80%;
+}
+
+/* table related */
+.watch-table {
+  width: 100%;
+}
+
+.box {
+  max-width: 80%;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
 }
 
 .watch-table .error {
-color: #aa0000;
+  color: #a00;
 }
 
-.home-menu {
-background: #fff;
-padding: 5px;
-    display: flex;
-    justify-content: space-between;
+.watch-table td {
+  white-space: nowrap;
 }
 
-.pure-table-even  {
-/* missing */
-background: #fff;
+.watch-table td.title-col {
+  word-break: break-all;
+  white-space: normal;
 }
-body:after {
-    content: "";
-    background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%)
+.watch-table th {
+  white-space: nowrap;
 }
 
-body:after,body:before {
-    display: block;
-    height: 600px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: -1;
-}
-    body::after {
-      opacity: 0.91;
-    }
-    body::before {
-      content: "";
-      background-image:
-        url(/static/images/gradient-border.png);
-    }
-body:before {
-    background-size: cover
-}
-
-body:after,body:before {
-    -webkit-clip-path: polygon(100% 0,0 0,0 77.5%,1% 77.4%,2% 77.1%,3% 76.6%,4% 75.9%,5% 75.05%,6% 74.05%,7% 72.95%,8% 71.75%,9% 70.55%,10% 69.3%,11% 68.05%,12% 66.9%,13% 65.8%,14% 64.8%,15% 64%,16% 63.35%,17% 62.85%,18% 62.6%,19% 62.5%,20% 62.65%,21% 63%,22% 63.5%,23% 64.2%,24% 65.1%,25% 66.1%,26% 67.2%,27% 68.4%,28% 69.65%,29% 70.9%,30% 72.15%,31% 73.3%,32% 74.35%,33% 75.3%,34% 76.1%,35% 76.75%,36% 77.2%,37% 77.45%,38% 77.5%,39% 77.3%,40% 76.95%,41% 76.4%,42% 75.65%,43% 74.75%,44% 73.75%,45% 72.6%,46% 71.4%,47% 70.15%,48% 68.9%,49% 67.7%,50% 66.55%,51% 65.5%,52% 64.55%,53% 63.75%,54% 63.15%,55% 62.75%,56% 62.55%,57% 62.5%,58% 62.7%,59% 63.1%,60% 63.7%,61% 64.45%,62% 65.4%,63% 66.45%,64% 67.6%,65% 68.8%,66% 70.05%,67% 71.3%,68% 72.5%,69% 73.6%,70% 74.65%,71% 75.55%,72% 76.35%,73% 76.9%,74% 77.3%,75% 77.5%,76% 77.45%,77% 77.25%,78% 76.8%,79% 76.2%,80% 75.4%,81% 74.45%,82% 73.4%,83% 72.25%,84% 71.05%,85% 69.8%,86% 68.55%,87% 67.35%,88% 66.2%,89% 65.2%,90% 64.3%,91% 63.55%,92% 63%,93% 62.65%,94% 62.5%,95% 62.55%,96% 62.8%,97% 63.3%,98% 63.9%,99% 64.75%,100% 65.7%);
-    clip-path: polygon(100% 0,0 0,0 77.5%,1% 77.4%,2% 77.1%,3% 76.6%,4% 75.9%,5% 75.05%,6% 74.05%,7% 72.95%,8% 71.75%,9% 70.55%,10% 69.3%,11% 68.05%,12% 66.9%,13% 65.8%,14% 64.8%,15% 64%,16% 63.35%,17% 62.85%,18% 62.6%,19% 62.5%,20% 62.65%,21% 63%,22% 63.5%,23% 64.2%,24% 65.1%,25% 66.1%,26% 67.2%,27% 68.4%,28% 69.65%,29% 70.9%,30% 72.15%,31% 73.3%,32% 74.35%,33% 75.3%,34% 76.1%,35% 76.75%,36% 77.2%,37% 77.45%,38% 77.5%,39% 77.3%,40% 76.95%,41% 76.4%,42% 75.65%,43% 74.75%,44% 73.75%,45% 72.6%,46% 71.4%,47% 70.15%,48% 68.9%,49% 67.7%,50% 66.55%,51% 65.5%,52% 64.55%,53% 63.75%,54% 63.15%,55% 62.75%,56% 62.55%,57% 62.5%,58% 62.7%,59% 63.1%,60% 63.7%,61% 64.45%,62% 65.4%,63% 66.45%,64% 67.6%,65% 68.8%,66% 70.05%,67% 71.3%,68% 72.5%,69% 73.6%,70% 74.65%,71% 75.55%,72% 76.35%,73% 76.9%,74% 77.3%,75% 77.5%,76% 77.45%,77% 77.25%,78% 76.8%,79% 76.2%,80% 75.4%,81% 74.45%,82% 73.4%,83% 72.25%,84% 71.05%,85% 69.8%,86% 68.55%,87% 67.35%,88% 66.2%,89% 65.2%,90% 64.3%,91% 63.55%,92% 63%,93% 62.65%,94% 62.5%,95% 62.55%,96% 62.8%,97% 63.3%,98% 63.9%,99% 64.75%,100% 65.7%)
-}
-
-
-
-
-.button-small {
-    font-size: 85%;
-}
-
-a[target="_blank"]::after {
+.watch-table .title-col a[target="_blank"]::after {
   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
   margin: 0 3px 0 5px;
 }
 
+/* hotovo */
+
+
+body:after {
+  content: "";
+  background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%)
+}
+
+body:after, body:before {
+  display: block;
+  height: 600px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+}
+body::after {
+  opacity: 0.91;
+}
+body::before {
+  content: "";
+  background-image: url(/static/images/gradient-border.png);
+}
+body:before {
+  background-size: cover
+}
+
+body:after, body:before {
+  -webkit-clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%);
+  clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%)
+}
+
+
+.button-small {
+  font-size: 85%;
+}
+
+
 .fetch-error {
-padding-top: 1em;
-font-size: 60%;
-    max-width: 400px;
-    display: block;
-    }
+  padding-top: 1em;
+  font-size: 60%;
+  max-width: 400px;
+  display: block;
+}
+
+.edit-form {
+   background: #fff;
+   padding: 2em;
+   border-radius: 5px;
+}
+.button-secondary {
+    color: white;
+    border-radius: 4px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.button-success {
+    background: rgb(28, 184, 65);
+    /* this is a green */
+}
+
+.button-error {
+    background: rgb(202, 60, 60);
+    /* this is a maroon */
+}
+
+.button-warning {
+    background: rgb(223, 117, 20);
+    /* this is an orange */
+}
+
+.button-secondary {
+    background: rgb(66, 184, 221);
+    /* this is a light blue */
+}
+
+
+.button-cancel {
+    background: rgb(200, 200, 200);
+    /* this is a green */
+}

backend/store.py

@@ -1,5 +1,5 @@
 import json
-import uuid
+import uuid as uuid_builder
 import validators
 
 
@@ -9,6 +9,10 @@ import validators
 class ChangeDetectionStore:
 
     def __init__(self):
+        self.data = {
+            'watching': {}
+        }
+
 
         # Base definition for all watchers
         self.generic_definition = {
@@ -17,60 +21,44 @@ class ChangeDetectionStore:
             'last_checked': 0,
             'last_changed': 0,
             'title': None,
-            'uuid': str(uuid.uuid4()),
+            'uuid': str(uuid_builder.uuid4()),
             'headers' : {}, # Extra headers to send
             'history' : {} # Dict of timestamp and output stripped filename
         }
 
         try:
             with open('/datastore/url-watches.json') as json_file:
-                self.data = json.load(json_file)
-                # Reinitialise each `watching` with our generic_definition in the case that we add a new var in the future.
-                i = 0
-                while i < len(self.data['watching']):
-                    _blank = self.generic_definition.copy()
-                    _blank.update(self.data['watching'][i])
-                    self.data['watching'][i] = _blank
 
-                    print("Watching:", self.data['watching'][i]['url'])
-                    i += 1
+                self.data.update(json.load(json_file))
+
+                # Reinitialise each `watching` with our generic_definition in the case that we add a new var in the future.
+                # @todo pretty sure theres a python we todo this with an abstracted(?) object!
+                i = 0
+                for uuid, watch in self.data['watching'].items():
+                    _blank = self.generic_definition.copy()
+                    _blank.update(watch)
+                    self.data['watching'].update({uuid: _blank})
+                    print("Watching:", uuid, _blank['url'])
 
         # First time ran, doesnt exist.
         except (FileNotFoundError, json.decoder.JSONDecodeError):
-            print("Resetting JSON store")
+            print("Creating JSON store")
 
-            self.data = {}
-            self.data['watching'] = []
-            self._init_blank_data()
-            self.sync_to_json()
-
-    def _init_blank_data(self):
-
-        # Test site
-        _blank = self.generic_definition.copy()
-        _blank.update({
-            'url': 'https://changedetection.io',
-            'tag': 'general',
-            'uuid': str(uuid.uuid4())
-        })
-        self.data['watching'].append(_blank)
-
-        # Test site
-        _blank = self.generic_definition.copy()
-        _blank.update({
-            'url': 'http://www.quotationspage.com/random.php',
-            'tag': 'test',
-            'uuid': str(uuid.uuid4())
-        })
-        self.data['watching'].append(_blank)
+            self.add_watch(url='https://changedetection.io', tag='general')
+            self.add_watch(url='http://www.quotationspage.com/random.php', tag='test')
 
     def update_watch(self, uuid, val, var):
+
+        self.data['watching'][uuid].update({val: var})
+        self.sync_to_json()
+
+
+
+    def delete(self, uuid):
         # Probably their should be dict...
-        for watch in self.data['watching']:
-            if watch['uuid'] == uuid:
-                watch[val] = var
-                # print("Updated..", val)
-                self.sync_to_json()
+        del(self.data['watching'][uuid])
+        self.sync_to_json()
+
 
     def url_exists(self, url):
 
@@ -83,13 +71,11 @@ class ChangeDetectionStore:
 
     def get_val(self, uuid, val):
         # Probably their should be dict...
-        for watch in self.data['watching']:
-            if watch['uuid'] == uuid:
-                return watch.get(val)
-
-        return None
+        return self.data['watching'][uuid].get(val)
 
     def add_watch(self, url, tag):
+
+        # @todo deal with exception
         validators.url(url)
 
         # @todo use a common generic version of this
@@ -98,12 +84,12 @@ class ChangeDetectionStore:
         _blank.update({
             'url': url,
             'tag': tag,
-            'uuid': str(uuid.uuid4())
+            'uuid': str(uuid_builder.uuid4())
         })
-        self.data['watching'].append(_blank)
+
+        self.data['watching'].update({_blank['uuid']: _blank})
 
         self.sync_to_json()
-        # @todo throw custom exception
 
     def sync_to_json(self):
         with open('/datastore/url-watches.json', 'w') as json_file:

backend/templates/base.html

@@ -15,9 +15,14 @@
         <a class="pure-menu-heading" href=""><strong>Change</strong>Detection.io</a>
 
         <ul class="pure-menu-list">
-            <li class="pure-menu-item pure-menu-selected"><a class="github-link " href="https://github.com/dgtlmoon/changedetection.io"
-                                                             data-hotkey="g d" aria-label="Homepage "
-                                                             data-ga-click="Header, go to dashboard, icon:logo">
+
+            <li class="pure-menu-item">
+                <a href="/import"  class="pure-menu-link">IMPORT</a>
+            </li>
+            <li class="pure-menu-item">
+                <a href="/settings"  class="pure-menu-link">SETTINGS</a>
+            </li>
+            <li class="pure-menu-item"><a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
                 <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1"
                      width="32" aria-hidden="true">
                     <path fill-rule="evenodd"

backend/templates/edit.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="edit-form">
+
+
+    <form class="pure-form pure-form-aligned" action="/api/update?uuid={{uuid}}" method="POST">
+        <fieldset>
+            <div class="pure-control-group">
+                <label for="url">URL</label>
+                <input type="url" id="url" required="" placeholder="https://..." name="url" value="{{ watch.url}}"
+                       size="50"/>
+                <span class="pure-form-message-inline">This is a required field.</span>
+            </div>
+            <div class="pure-control-group">
+                <label for="tag">Tag</label>
+                <input type="text" placeholder="tag" size="10" id="tag" name="tag" value="{{ watch.tag}}"/>
+            </div>
+
+            <div class="pure-controls">
+                <button type="submit" class="pure-button pure-button-primary">Submit</button>
+            </div>
+
+            <div class="pure-controls">
+
+
+                <a href="/" class="pure-button button-small button-cancel">Cancel</a>
+                <a href="/api/delete?uuid={{uuid}}"
+                   class="pure-button button-small button-error ">Delete</a>
+
+            </div>
+
+
+        </fieldset>
+    </form>
+
+
+</div>
+
+{% endblock %}

backend/templates/watch-overview.html

@@ -3,50 +3,56 @@
 {% block content %}
 <div class="box">
 
-<form class="pure-form" action="/api/add" method="POST">
-    <fieldset>
-        <legend>Add new change detection watch</legend>
-        <input type="url" placeholder="https://..." name="url"/>
-        <input type="text" placeholder="tag" size="10" name="tag"/>
-        <button type="submit" class="pure-button pure-button-primary">Save</button>
-    </fieldset>
-    <!-- add extra stuff, like do a http POST and send headers -->
-    <!-- user/pass r = requests.get('https://api.github.com/user', auth=('user', 'pass')) -->
-</form>
+    <form class="pure-form" action="/api/add" method="POST">
+        <fieldset>
+            <legend>Add new change detection watch</legend>
+            <input type="url" placeholder="https://..." name="url"/>
+            <input type="text" placeholder="tag" size="10" name="tag"/>
+            <button type="submit" class="pure-button pure-button-primary">Save</button>
+        </fieldset>
+        <!-- add extra stuff, like do a http POST and send headers -->
+        <!-- user/pass r = requests.get('https://api.github.com/user', auth=('user', 'pass')) -->
+    </form>
 
-<!-- make a nice list of tags here to click on -->
+    <!-- make a nice list of tags here to click on -->
     <i>Note: Times are in UTC for now - todo - JS front end format<br/></i>
-<table class="pure-table pure-table-striped watch-table">
-    <thead>
-        <tr>
-            <th>#</th>
-            <th></th>
-            <th>Last Checked</th>
-            <th>Last Changed</th>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
+    <div id="watch-table-wrapper">
+        <table class="pure-table pure-table-striped watch-table">
+            <thead>
+            <tr>
+                <th>#</th>
+                <th></th>
+                <th>Last Checked</th>
+                <th>Last Changed</th>
+                <th></th>
+            </tr>
+            </thead>
+            <tbody>
 
 
-  {% for watch in watches %}
-        <tr id="{{ watch.uuid }}" class="{{ loop.cycle('pure-table-odd', 'pure-table-even') }} {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}">
-            <td>{{ loop.index }}</td>
-            <td>{% if watch.title is not none %}{{ watch.title }}{% else %}{{ watch.url }}{% endif %}<a class="external" target=_blank href="{{ watch.url }}"></a>
-{% if watch.last_error is defined and watch.last_error != False %}
-                <div class="fetch-error">{{ watch.last_error }}</div>
-                {% endif %}
-            </td>
-            <td>{{watch|format_last_checked_time}}
+            {% for watch in watches %}
+            <tr id="{{ watch.uuid }}"
+                class="{{ loop.cycle('pure-table-odd', 'pure-table-even') }} {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}">
+                <td>{{ loop.index }}</td>
+                <td class="title-col">{% if watch.title is not none %}{{ watch.title }}{% else %}{{ watch.url }}{% endif
+                    %}<a class="external" target=_blank href="{{ watch.url }}"></a>
+                    {% if watch.last_error is defined and watch.last_error != False %}
+                    <div class="fetch-error">{{ watch.last_error }}</div>
+                    {% endif %}
+                </td>
+                <td>{{watch|format_last_checked_time}}
 
-            </td>
-            <td>{{watch.last_changed|format_timestamp_timeago}}</td>
-            <td><a href="/api/checknow?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Recheck</a> <button type="submit" class="pure-button  button-small pure-button-primary">Delete</button></td>
-        </tr>
-  {% endfor %}
+                </td>
+                <td>{{watch.last_changed|format_timestamp_timeago}}</td>
+                <td><a href="/api/checknow?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Recheck</a>
+                    <a href="/edit?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Edit</a>
+                </td>
+            </tr>
+            {% endfor %}
 
 
-    </tbody>
-</table>
+            </tbody>
+        </table>
+    </div>
 </div>
 {% endblock %}

docker-compose-development.yml

@@ -11,6 +11,8 @@ services:
     volumes:
       - ./backend:/app
       - ./datastore:/datastore
+    environment:
+      - PYTHONUNBUFFERED=1 #https://stackoverflow.com/questions/58701233/docker-logs-erroneously-appears-empty-until-container-stops
 
     ports:
       - "127.0.0.1:5000:5000"

docker-compose.yml

@@ -2,13 +2,18 @@ version: "2"
 services:
 
   backend:
-    build: ./backend/production-docker
+    build: .
     image: dgtlmoon/changedetection.io:0.1
+
     container_name: changedetection.io
     volumes:
       - ./backend:/app
       - ./datastore:/datastore
 
+# autoreload not working :(
+    environment:
+      - FLASK_ENV=development
+      - PYTHONUNBUFFERED=1 #https://stackoverflow.com/questions/58701233/docker-logs-erroneously-appears-empty-until-container-stops
     ports:
       - "127.0.0.1:5000:5000"
 

requirements.txt

@@ -15,6 +15,6 @@ bleach==3.2.1
 html5lib==0.9999999       # via bleach
 timeago
 html2text
-
+urlextract
 # @notes
 # - Dont install socketio, it interferes with flask_socketio