From 2ce8e06be96c50d3a242e06ff3945e103727118d Mon Sep 17 00:00:00 2001
From: Fernando <tbyuyfcjjll@gmail.com>
Date: Fri, 10 May 2019 15:08:22 -0500
Subject: [PATCH] =?UTF-8?q?Boton=20que=20indica=20si=20el=20navegador=20ac?=
 =?UTF-8?q?tual=20est=C3=A1=20suscrito=20a=20las=20notificaciones=20de=20e?=
 =?UTF-8?q?l=20anime.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Anime/panel-descarga/boton-nuevos-eps.vue | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 src/components/Anime/panel-descarga/boton-nuevos-eps.vue

diff --git a/src/components/Anime/panel-descarga/boton-nuevos-eps.vue b/src/components/Anime/panel-descarga/boton-nuevos-eps.vue
new file mode 100644
index 0000000..c73d6c0
--- /dev/null
+++ b/src/components/Anime/panel-descarga/boton-nuevos-eps.vue
@@ -0,0 +1,104 @@
+<template lang="pug">
+    span#indicador(
+        :style="estilos"
+        @mouseenter="cambiarIcono()" @mouseleave="cambiarIcono()" @click="cambiarSubs()"
+    )
+        i.material-icons {{ botonActivo }}
+    //
+</template>
+
+<script lang="coffee">
+    import YAML from "yaml"
+
+    colorPrim = "#009961"
+    colorSec = "#ea486a"
+
+    export default
+        name: "boton-nuevos-eps"
+        data: ->
+            botonActivo: "" # check - clear
+            animacion: ""
+            animacionActiva: false
+            color: ""
+            suscrito: false
+        props:
+            opcion:
+                type: Number
+                required: true
+        computed:
+            estilos: -> "background-color: #{@color}; #{@animacion}"
+        methods:
+            cambiarIcono: ->
+                unless @animacionActiva
+                    @color =
+                        if @color is colorSec then colorPrim else colorSec
+                    @botonActivo =
+                        if @botonActivo is "clear" then "check" else "clear"
+            cambiarSubs: ->
+                vm = this
+                escala = 1
+                vm.botonActivo = ""
+                vm.animacionActiva = true
+                vm.animacion = "transform: scale(#{0.3}, #{0.3})"
+                animacion = setInterval (() ->
+                    vm.animacion = "transform: scale(#{escala}, #{escala})"
+                    escala = if escala is 1 then 0.3 else 1
+                ), 500
+
+                ruta = if @suscrito then "/n/desubscribir/" else "/n/subscribir/"
+
+                res = await fetch ruta,
+                    method: "POST"
+                    headers:
+                        "Content-Type": "application/x-www-form-urlencoded"
+                    body: "opcion_ID=#{vm.opcion}&navegador_hash=#{vm.$store.state.navegador_hash}"
+                respuesta = YAML.parse (await res.text())
+
+                clearInterval animacion
+                vm.animacion = ""
+                vm.animacionActiva = false
+
+                if respuesta.exito
+                    vm.color = if vm.suscrito then colorSec else colorPrim
+                    vm.botonActivo = if vm.suscrito then "clear" else "check"
+                    if vm.suscrito
+                        vm.$store.commit "eliminarSuscripcion", vm.opcion.toString()
+                    else
+                        vm.$store.commit "agregarSuscripcion", vm.opcion.toString()
+                    vm.suscrito = !vm.suscrito
+                else
+                    alert "Hubo un error. Intentalo más tarde."
+                    vm.color = if vm.suscrito then colorPrim else colorSec
+                    vm.botonActivo = if vm.suscrito then "check" else "clear"
+
+        created: ->
+            suscrito = @$store.state.suscripciones[@opcion]?
+            @suscrito = suscrito
+            @color = if suscrito then colorPrim else colorSec
+            @botonActivo = if suscrito then "checked" else "clear"
+
+
+    #
+
+</script>
+
+<style scoped lang="sass">
+    @import "../../../assets/sass/variables"
+
+    #indicador
+        display: inline-block
+        width: 30px
+        height: 30px
+        background-color: $colorSecundario
+        cursor: pointer
+        margin: 0 10px
+        border-radius: 15px
+        transition: transform 500ms ease-in-out, background-color 500ms ease-out
+        i
+            color: white
+            display: inline-block
+            font-size: 24px
+            padding: 3px
+
+    //
+</style>
\ No newline at end of file