Improve frontend graphics

Author: tylermenezes

.dockerignore

@@ -27,6 +27,11 @@ RUN ARCH= && dpkgArch="$(dpkg --print-architecture)" \
   && curl -fsSLO --compressed "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-$ARCH.tar.xz" \
   && tar -xJf "node-v$NODE_VERSION-linux-$ARCH.tar.xz" -C /usr/local --strip-components=1 --no-same-owner
 
+# Set up Cron
+RUN apt-get -y install cron
+COPY tasks /etc/cron.d/tasks
+RUN chmod 0644 /etc/cron.d/tasks && crontab /etc/cron.d/tasks
+
 # Copy the app files
 COPY ./api /app
 COPY ./frontend /frontend
@@ -49,4 +54,5 @@ RUN rm -rf /usr/local/bin/node \
 
 WORKDIR /app
 EXPOSE 8000
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+ENTRYPOINT ["/docker-entrypoint.sh"]

Dockerfile

@@ -5,3 +5,9 @@ main:
 
 run:
 	@cd api && uvicorn main:app --host 0.0.0.0 --port 8000
+
+docker:
+	@cd api && python3 tasks.py && rm -rf remote/templates && rm -rf build && cd .. && docker build -t codeday-posters .
+
+run-docker:
+	@docker run -it -p "8000:8000" codeday-posters

Makefile

@@ -9,9 +9,10 @@
 )
 
 class PosterGenerator:
-  def __init__(self, data, promo):
+  def __init__(self, data, promo=None, promoFor=None):
     self.supported_formats = ['svg', 'pdf', 'png']
     self.promo = promo
+    self.promoFor = promoFor
 
     self.data = data
     for key in data:
@@ -28,7 +29,7 @@ def __init__(self, data, promo):
 
   def get_cache(self, file_format, template_name='', full=True):
     basedir = os.path.dirname(os.path.realpath(__file__)) if full else ''
-    return '{}/generated/{}/{}/{}'.format(basedir, self.current_event['id'], file_format, template_name.replace('svg', file_format))
+    return '{}/generated/{}/{}/{}_{}_{}'.format(basedir, self.current_event['id'], file_format, self.promo, self.promoFor, template_name.replace('svg', file_format))
 
   def make_poster(self, template_name, file_format):
     file_format = file_format.lower()

api/generator.py

@@ -4,17 +4,17 @@
 from jinja2 import Environment, FileSystemLoader, select_autoescape
 
 from starlette.middleware.cors import CORSMiddleware
-from starlette.responses import HTMLResponse, FileResponse
+from starlette.responses import HTMLResponse, FileResponse, JSONResponse
 from starlette.staticfiles import StaticFiles
 
 from generator import PosterGenerator
-from cron import sync_templates, cleanup
+from tasks import sync_templates, cleanup
 
 sync_templates()
 cleanup()
 
 env = Environment(
-  loader= FileSystemLoader('./posterTemplates'),
+  loader= FileSystemLoader('./remote/templates/template'),
   autoescape=select_autoescape(['svg'])
 )
 
@@ -39,21 +39,21 @@ def file_get_contents(filename):
 def root():
   return HTMLResponse(file_get_contents("./build/index.html"))
 
-@app.get('/cron')
-def cron():
+@app.get('/sync')
+def sync():
   sync_templates()
   cleanup()
   return HTMLResponse('ok')
 
 @app.get("/render/{id}/{template}/{file_format}")
-def generate(id, template, file_format='svg', promo=None):
+def generate(id, template, file_format='svg', promo=None, promoFor=None):
   eventRequest = requests.get('https://clear.codeday.org/api/region/{}'.format(id))
   try:
     eventJson = json.loads(eventRequest.text)
   except:
     return "No event found with id {}".format(id),404
 
-  return PosterGenerator(eventJson, promo).make_poster('{}.svg'.format(template),file_format)
+  return PosterGenerator(eventJson, promo, promoFor).make_poster('{}.svg'.format(template),file_format)
 
 @app.get('/render_all/{id}')
 def generate_all(id, promo=None):
@@ -66,6 +66,6 @@ def generate_all(id, promo=None):
 
   return FileResponse(shutil.make_archive('zip/{}'.format(id), 'zip', 'generated/{}'.format(eventJson.current_event['id'])), filename='{}.zip'.format(id))
 
-@app.get('/api/listTemplates/', response_class=HTMLResponse)
+@app.get('/api/list-templates', response_class=HTMLResponse)
 def listTemplates():
-  return json.dumps([t.replace('.svg', '') for t in env.list_templates()])
+  return JSONResponse([t.replace('.svg', '') for t in env.list_templates()])

api/main.py

@@ -22,10 +22,16 @@ def sync_templates():
 
 def cleanup():
   for dir in ('generated', 'zip'):
-    for subdir in os.listdir(dir):
-      path = os.path.realpath(os.path.join(dir, subdir))
-      if (os.path.basename(path) != '.gitkeep'):
-        if (os.path.isdir(path)):
-          shutil.rmtree(path)
-        else:
-          os.remove(path)
+    if (os.path.exists(dir)):
+      for subdir in os.listdir(dir):
+        path = os.path.realpath(os.path.join(dir, subdir))
+        if (os.path.basename(path) != '.gitkeep'):
+          if (os.path.isdir(path)):
+            shutil.rmtree(path)
+          else:
+            os.remove(path)
+
+if __name__ == "__main__":
+  print("Running tasks...")
+  sync_templates()
+  cleanup()

api/cron.py api/tasks.pyapi/cron.py renamed to api/tasks.py

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+cron -f &
+uvicorn main:app --host 0.0.0.0 --port 8000

docker-entrypoint.sh

@@ -16,7 +16,7 @@ const EventDropdown = props => {
     return <Loading />;
   } else {
     return (
-      <div style={{zIndex: 100}}>
+      <div style={{zIndex: 1000, position: 'relative'}}>
         <Select
           value={inputValue}
           options={props.regions.map(item => ({value: item.webname, label: item.name}))}

frontend/package-lock.json

@@ -34,7 +34,22 @@ img {
   -ms-transform: scale(1.15); /* IE 9 */
   -webkit-transform: scale(1.15); /* Safari and Chrome */
   position: relative;
-  z-index: 9999;
+  z-index: 600;
+}
+
+.downloadLink {
+  width: 50%;
+  display: inline-block;
+  text-align: center;
+  background-color: #eee;
+  border-right: 1px solid #fff;
+  position: relative;
+  top: -0.3em;
+  padding: 0.2em;
+  color: #000;
+  text-decoration: none;
+  box-sizing: border-box;
+  text-transform: uppercase;
 }
 
 .posterGallery {
@@ -43,4 +58,27 @@ img {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  position: absolute;
+}
+
+.promoInfo {
+  border-color: #ccc;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  min-height: 38px;
+  outline: currentcolor none 0px !important;
+  position: relative;
+  transition: all 100ms ease 0s;
+  box-sizing: border-box;
+  padding: 8px;
+  color: #808080;
+}
+
+.promoInfo input {
+  border: none;
+  border-bottom: 1px solid #000;
+  color: #000;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
 }