implement 'sync' web UI button for remote questions sync execution.

tmilar · Sep 16, 2019 · 7e1097b · 7e1097b
1 parent c6c8eaa
commit 7e1097b
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 17 deletions.
diff --git a/app.js b/app.js
@@ -28,7 +28,7 @@ app.use(logger('dev'))
 app.use(bodyParser.json())
 app.use(bodyParser.urlencoded({extended: false}))
 app.use(cookieParser())
-app.use(express.static(path.join(__dirname, 'public')))
+app.use('/public', express.static(path.join(__dirname, 'public')))
 
 // Setup routes
 app.use('/', index)

diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,54 @@
+body {
+    padding: 50px;
+    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+    color: #00B7FF;
+}
+
+.button {
+    margin: auto;
+    background: #00B7FF;
+    border-radius: 3px;
+    bottom: 70px;
+    box-shadow: 2px 7px 7px 0 rgba(0, 0, 0, .2);
+    color: rgb(48, 40, 42);
+    display: block;
+    font-weight: bold;
+    height: 70px;
+    line-height: 70px;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    width: 250px;
+    font-size: medium;
+}
+
+.button:hover {
+    background: rgb(48, 40, 42);
+    color: #00dfff;
+    cursor: pointer;
+}
+
+.button.loading {
+    background: gainsboro;
+    cursor: wait;
+}
+
+.button.loading:hover {
+    color: #353535;
+}
+
+#info {
+    height: 50px;
+    line-height: 50px;
+    margin-top: 10px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/public/js/index.js b/public/js/index.js
@@ -0,0 +1,69 @@
+/* eslint-env jquery */
+const apiUrl = document.location.href // 'https://jusimil-meli-manager.now.sh'
+
+const dateDaysAgo = (days = 7) => new Date(Date.now() - (1000 * 60 * 60 * 24 * days))
+
+const toDDMMYY = date => `${String(date.getDate()).padStart(2, '0')}-${String(date.getMonth()).padStart(2, '0')}-${date.getFullYear() % 1000}`
+
+const state = {
+  loading: false
+}
+
+const _onLoad = () => $('#sincronizar').on('click', () => {
+  if (state.loading) {
+    console.log('already loading! please wait')
+    return
+  }
+  state.loading = true
+
+  const dots = 5
+  const start = 0
+  const intervalMs = 1000
+  let i = 3
+  const loadingInterval = setInterval(() => {
+    i = i > dots ? start : ++i
+    $('#info').html(`<p>Cargando${'.'.repeat(i)}</p>`)
+  }, intervalMs)
+  const $actionButton = $('#sincronizar')
+  $actionButton.prop('disabled', 'disabled')
+  $actionButton.addClass('loading')
+
+  const _onDone = () => {
+    console.log('done')
+    clearInterval(loadingInterval)
+
+    $actionButton.removeClass('loading')
+    $actionButton.prop('disabled', false)
+    state.loading = false
+  }
+
+  const settings = {
+    async: true,
+    crossDomain: true,
+    url: `${apiUrl}question?start=${toDDMMYY(dateDaysAgo(7))}&store=true`,
+    method: 'GET',
+    headers: {
+      'Cache-Control': 'no-cache',
+      Host: apiUrl,
+      'Accept-Encoding': 'gzip, deflate',
+      Connection: 'keep-alive'
+    },
+    success: data => {
+      _onDone()
+      $('#info').html('<p>¡Sincronización exitosa!</p>')
+      console.log('success', data)
+    },
+    error: error => {
+      _onDone()
+      $('#info').html('<p>Ocurrio un error :(</p>')
+      console.error('error: ', error)
+    }
+  }
+
+  $.ajax(settings)
+})
+
+$(document).ready(() => {
+  console.log('Ready!')
+  _onLoad()
+})
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
diff --git a/views/index.hbs b/views/index.hbs
@@ -1,2 +1,4 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<div class="container">
+    <a class="button" id="sincronizar">Sincronización Manual</a>
+    <div id="info"></div>
+</div>
diff --git a/views/layout.hbs b/views/layout.hbs
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <title>{{title}}</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-  </head>
-  <body>
-    {{{body}}}
-  </body>
+    <link rel='stylesheet' href='/public/css/style.css'/>
+    <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
+    <script src="/public/js/index.js"></script>
+    <title>MeLi Manager</title>
+</head>
+<body>
+{{{body}}}
+</body>
 </html>