Project Standlan

En esta sección se atenderán las dudas relacionadas con sistemas de gestión de la calidad, procedimientos, buenas prácticas, normas y todo lo relacionado con aseguramiento de la calidad

Moderator: julianmartinez16

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Thu Feb 22, 2018 9:53 pm

Sprint 3 (22 Febrero - 8 Marzo)

- integrar el código HTML y CSS. Puntos: 3.
- crear el código de TypeScript que cargue los usuarios consultados. Puntos: 5.

+ mostrar numero de caracteres de un mensaje
- crear mockup Puntos: 1.
- crear código HTML y css Puntos: 3.
- integrar código HTML y CSS a la app Puntos: 3.
- crear código de TypeScript para contar los caracteres Puntos: 5.
- Realizar pruebas de testeo. Puntos: 1.

Image
Last edited by zucerkia on Thu Mar 08, 2018 11:27 pm, edited 3 times in total.
Julian Andres Sucerquia
- 000295022 -

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Tue Feb 27, 2018 12:12 pm

¿ Que se ha hecho ?

- se creó una versión de código para el conteo de los caracteres de un textbox con TypeScript

Code: Select all

<!DOCTYPE html>
<html>

	<head>
	
			<meta charset="utf-8">
			
			<title>javascript - Obtener el valor de un input type=text de varias maneras</title>
			
			<script>
			    
				function Capturar()
			    {
					var entrada = document.forms["form1"].elements[0].value;
					var chars = entrada.length;
		 
					document.getElementById("resultado").innerHTML=" \
					Número de letras: "+chars;			
				}
			
			</script>
		 
			<style>
				form   {width:250px;height:180px;border:1px solid #ccc;padding:10px;}
			</style>
			
	</head>
 
	<body>
	
			<h1> Calcular el numero de caracteres con typeScript. </h1>
			
			<form id="form1">
			
					Nombre:<br><input type="text" name="nombre" id="nombre" class="formulario">
			
			</form>
		
			<input type="button" value="Contar palabras" onclick="Capturar()">
		
			<div id="resultado" ></div>
	</body>

</html>

¿ Que se hará ?

- se diseñará el mockup
- se creara el HTML y css

¿ Que dificultades tuvimos?

- dañe el sistema de arranque del pc y esto me causó retardos para subir las evidencias
Julian Andres Sucerquia
- 000295022 -

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Thu Mar 01, 2018 10:41 pm

¿ Que hicimos ?

- se realizó el mockup de el input de mensajes con su respectivo campo para mostrar el numero de caracteres:

Image


¿ Que se hará ?

- se realizara el html y css de el input
- se intentara integrar el html y css de la cosulta de usuarios por sala a la app

¿ Que problemos tuvimos ?

- confusiones en la asignacion de las tareas
- conflictos entre integrantes por tareas incompletas
Julian Andres Sucerquia
- 000295022 -

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Tue Mar 06, 2018 3:59 pm

¿ Que se ha hecho ?

- se realizó el css y html del contador de caracteres

css

Code: Select all

.counter{
    width: 10rem;
    padding-left: 2rem;
  }
 
html

Code: Select all

<div class="bottom_wrapper clearfix">
   
    <div class="message_input_wrapper">
            <input type="text" id="message_input" class="message_input" (keyup) ="countCharacters()" (keydown)="countCharacters()" [(ngModel)]="messageToSend" placeholder="Escribir Mensaje..." />
    </div>
    <div class="send_message" (click)="sendMessage()">
        <div class="icon"></div>
        <div class="text">
            <i class="fa fa-paper-plane-o"></i>
        </div>
    </div>
</div>
<div style="width:20px">
    <p id="characters">0 caracteres</p>
</div>
- se corrigió el codigo de conteo de caracteres

Code: Select all

countCharacters(){

        var entry = $("#message_input").val();
        var chars = entry.length;
        document.getElementById("characters").innerHTML=chars+" caracteres";	
    }
- se agregó todo a la app y se hizo test

Image





¿ Que se hará ?

+ se pedirá asesoria con un compañero con mas experiencia en angular para preguntar acerca de acceso a los datos arrojados como respuesta a una peticion
+ se implementara el modal para mostrar los usuarios
+ se cargara el modal con los usuarios


¿ Que problemas tuvimos?

+ falta de tiempo
+ tuvimos que reacer codigo y hacer mucho testeo
Julian Andres Sucerquia
- 000295022 -

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Thu Mar 08, 2018 11:37 pm

+ ¿ que se ha hecho ?

- se modificó el codigo para mostrar los usuarios por sala de chat y se creó un nuevo componente para mostrarlos
( se utilizó https://jsonplaceholder.typicode.com/users para obtener datos de pruebas puesto que no existe en
el backend una consulta que arroje los usuarios en la sala de chat)

peticion:

Code: Select all

 public getUserByRoom(roomId: any):Observable<Response> {
    return this.http.get("https://jsonplaceholder.typicode.com/users");
  }
html nuevo componente (users-by-room):

Code: Select all


<!-- content-starts-here -->
<div class="content">
  <div class="categories">
    <div class="container">
      <div class="selectregion">
      <!-- Información del usuario -->
          <div class="modal fade" id="usersModal" tabindex="-1" role="dialog" aria-labelledby="LargeUsersModalLabel"
          aria-hidden="true">
            <div class="modal-dialog modal-xs">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                  <h6 class="modal-title" id="usersModalLabel">
                    <div class="focus-image" ><i class="fa fa-user"></i></div>
                    Aqui va la información del usuario</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
          <!-- Información del usuario -->

    <!-- <listas de usuarios -->
        <div *ngFor="let user of usersByRoom">

            <div class="col-xs-4 focus-grid">
              <div class="focus-border">
                <div class="focus-layout">
                    <div class="focus-image" data-toggle="modal" data-target="#usersModal"><i class="fa fa-user"></i></div>
                    <span class="active total" style="display:block;" data-toggle="modal" data-target="#usersModal">{{user.name}}</span>
                </div>
              </div>
            </div>

        </div>
      

 <!-- <listas de usuarios -->
      <div class="clearfix"></div>
    </div>
  </div>
</div>
css nuevo componente (users-by-room):

Code: Select all

.modal-header {
    text-align: Center;
}
.modal-title {
    font-size: 30px;
}
.modal-content {
    border-radius: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    box-shadow: none;
}
.modal-content h3{
	color: #59595b;
	font-weight: 700;
	font-size: 1.2em;
	border: none;
	padding: 0 10px;
}
.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: none;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    padding: 0px;
}
.modal-lg {
    width: 580px;
    padding: 25px 35px;
    background-color: #fff;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.modal-header {
    padding: 25px;
}
.modal-body {
    padding: 30px 15px 10px;
}

categories {
    padding: 0px 0;
}
.close {
    font-size: 45px;
}
button.close {
    position: absolute;
    top: -20px;
    right: -25px;
}
.focus-image{
    text-align: center;
    padding: 15px;
    transition:0.5s all;
      -webkit-transition:0.5s all;
      -moz-transition:0.5s all;
      -o-transition:0.5s all;
      -ms-transition:0.5s all;
  }

	
	.focus-grid {
        width: 33.333%;
        padding-top: 30px;
	}
	.focus-layout {
		padding: 16px 0px 16px 0;
	}


span.total strong {
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
    font-weight: normal;
    text-align: center;
}

.container{
    padding: 0;
    margin: 0;
}

TypeScript nuevo componente (users-by-room):

Code: Select all

import { Component, OnInit } from '@angular/core';
import { RoomService } from '../room.service';
import { StorageService } from '../storage.service';

@Component({
  selector: 'app-users-by-room',
  templateUrl: './users-by-room.component.html',
  styleUrls: ['./users-by-room.component.css']
})
export class UsersByRoomComponent implements OnInit {

  roomId: any;
  usersByRoom: any;

  constructor(private roomService:RoomService, private storageService: StorageService) {
    this.roomId = storageService.getRoom().id;
    this.usersByRoom = [];
   }

  ngOnInit() {
    this.roomService.getUserByRoom(this.roomId).subscribe((response) => {
      this.usersByRoom= response.json();
      console.log(this.usersByRoom);
  });
  }

}
html del chat modificado:

Code: Select all

<div class="top_menu">

    <div class="title col-xs-12 pull-left">
        <i (click)="backArrow()" class="fa fa-arrow-left" aria-hidden="true"></i>
        <span>
            <i class=" fa fa-bullseye"></i> {{room.name}}
        </span>
    </div>
    <div class="container-fluid">
        <div class="row ">
            <div class="title col-xs-2">
                <div class="btnhora" (click)="toggleUsers()">
                    <i class="fa fa-users"></i>{{room.userCount}}
                </div>
            </div>
            <div class="title col-xs-3">
                <div class="btnhora">
                    <i class="fa fa-clock-o"></i> {{room.remainingTime.hours + "h " + room.remainingTime.minutes + "m" }}
                </div>
            </div>
            <div class="title col-xs-7">
                <div class="btnhora">
                    <i class="fa fa-connectdevelop"></i> Patrocinador:
                    <img src="assets/logoKesslab.png" class="sponsor" (click)="sponsorModal()" />
                </div>
            </div>

        </div>
    </div>
</div>
<div id="panel_users" *ngIf="showUsers"><app-users-by-room></app-users-by-room></div>

<div class="hideable">


    <ul class="messages" #scrollMessages [scrollTop]="scrollMessages.scrollHeight">
        <li class="message appeared" *ngFor="let message of messages" [ngClass]="[user.username==message.from ? 'right' : 'left']">
            <div class="avatar"></div>
            <div class="text_wrapper">
                <div class="text">
                    <strong>{{message.from}}</strong>
                </div>
                <div class="text">{{message.body}}</div>
            </div>
        </li>
    </ul>

</div>

    <div class="bottom_wrapper clearfix hideable">
            <div>
                    <p class="counter" id="characters">0 caracteres</p>
            </div>
        <div class="message_input_wrapper">
                <input type="text" id="message_input" class="message_input" (keyup) ="countCharacters()" (keydown)="countCharacters()" [(ngModel)]="messageToSend" placeholder="Escribir Mensaje..." />
        </div>
        <div class="send_message" (click)="sendMessage()">
            <div class="icon"></div>
            <div class="text">
                <i class="fa fa-paper-plane-o"></i>
            </div>
        </div>
       
    </div>
    

<!-- Modal -->
<div id="endModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Standlan</h4>
            </div>
            <div class="modal-body">
                <p>Este Chat ha caducado.</p>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" data-dismiss="modal" [routerLink]="['/roomlist']">Aceptar</a>
            </div>
        </div>

    </div>
</div>

<!-- Sponsor Modal -->
<div id="sponsorModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Patrocinador de la conversación</h4>
            </div>
            <div class="modal-body">
                <img src="assets/logoKesslab.png" class="modalImage img-responsive" (click)="sponsorModal()" />
                <p>Innovamos constantemente y en cada situación vemos la oportunidad de dar a nuestros usuarios más opciones
                    que les faciliten la vida. </p>
                <a src="http://www.kesslab.com">Kesslab</a>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" data-dismiss="modal">Aceptar</a>
            </div>
        </div>

    </div>
</div>

<div id="remainingModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Standlan</h4>
            </div>
            <div class="modal-body">
                <p>A este chat le quedan 5 minutos.</p>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" data-dismiss="modal">Aceptar</a>
            </div>
        </div>

    </div>
</div>
typescript del chat modificado:

Code: Select all

import { Component, OnInit } from '@angular/core';
import { StorageService } from 'app/storage.service';
import { ChatService } from 'app/chat.service';
import { RoomService } from 'app/room.service';
import { UserService } from 'app/user.service';
import { Router } from '@angular/router';
import { RouteService } from '../route.service';

declare var $;
declare var Strophe;
declare var window;

@Component({
    selector: 'app-chat',
    templateUrl: './chat.component.html',
    styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
    public roomId;
    public room;
    public messageToSend;
    public messages;
    public user;
    public usersByRoom;
    public showUsers:boolean = false;

    constructor(private storageService: StorageService, private chatService: ChatService, private routeService: RouteService,
        private roomService: RoomService, private router: Router) {
        this.messageToSend = "";
        this.room = storageService.getRoom();
        this.user = UserService.currentUser;
        this.room.remainingTime = {
            hours: 23,
            minutes: 59
        }
        this.roomId = this.room.id.toLowerCase();
        this.usersByRoom = [];
        this.messages = [];

        this.room.userCount = 0;
        this.roomService.getJoinedUserCountAndCreator(this.room.id).subscribe((response) => {
            let jsonResponse = response.json();
            this.room.userCount = jsonResponse.count;
        }, (error) => {
            console.log(error);
        });
    }

    ngOnInit() {        
       
    }

    /*
    * Metodo que se inicia luego de iniciar la vista para darle el tamaño a la ventana de mensajes
    */
    ngAfterViewInit() {
        let messageContainer = $(".messages")[0];
        window.setTimeout(() => {
            messageContainer.style.height = (window.innerHeight - 155) + "px";
            $(window).on("resize", () => {
                messageContainer.style.height = (window.innerHeight - 155) + "px";
                messageContainer.scrollTop = messageContainer.scrollHeight;
            });
        }, 0);
        this.remainingTimeInit();
        this.chatService.getRoomMessageObserver(this.roomId, 80).subscribe(
            (message) => {
                this.messages.push(message);
            }
        );
    }

    /*
     * Metodo para enviar mensajes en la sala de chat
     */
    public sendMessage() {
        if (this.messageToSend == "") {
            return;
        }
        this.chatService.sendMessage(this.roomId, this.messageToSend);
        this.messageToSend = "";
        $(".message_input").focus();
        document.getElementById("characters").innerHTML="0 caracteres";	


    }

    /*
    * Metodo que inicializa el contador de tiempo restante del chat
    */
    remainingTimeInit() {
        let isActive = this.calculateRemainingTime();
        let _self = this;
        if (isActive) {
            let interval = setInterval(() => {
                _self.room.remainingTime.minutes--;
                if (_self.room.remainingTime.minutes == -1) {
                    _self.room.remainingTime.hours--;
                    _self.room.remainingTime.minutes = 59;
                }

                if (_self.room.remainingTime.minutes == 5 && _self.room.remainingTime.hours == 0) {
                    $('#remainingModal').modal({
                        backdrop: 'static',
                        keyboard: false
                    });
                } else {
                    if (_self.room.remainingTime.minutes == 0 && _self.room.remainingTime.hours == 0) {
                        clearInterval(interval);
                        $('#endModal').modal({
                            backdrop: 'static',
                            keyboard: false
                        });
                    }
                }
            }, 60000);
        }
    }
    /*
    *   Metodo para calcular el tiempo restante de la sala de chat a la que se ingresa
    */
    calculateRemainingTime() {
        let _self = this;
        let now = new Date();
        var actualTime = new Date(now.toUTCString())
        let endDate = new Date(this.room.creationDate);
        endDate.setDate(endDate.getDate() + 1);
        let differenceBetween = endDate.getTime() - actualTime.getTime();

        if (differenceBetween <= 0) {
            $('#endModal').modal({
                backdrop: 'static',
                keyboard: false
            });
            return false
        }

        let hours = Math.floor((differenceBetween % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((differenceBetween % (1000 * 60 * 60)) / (1000 * 60));

        _self.room.remainingTime.hours = hours;
        _self.room.remainingTime.minutes = minutes;

        return true
    }
    /*
    *   Metodo para ir a la vista anterior
    */
    backArrow() {
        this.routeService.goBack('/chat');
    }
    /*
    *   Metodo para abrir el modal del patrocinador
    */
    sponsorModal() {
        $('#sponsorModal').modal('show');
    }
    /*
    *   Metodo para abrir el modal de los usuarios que hay en el chat
    */
    usersModal(){
        console.log('click');

    
        for(let i in this.usersByRoom){
            console.log(i);
        }
        
    }
    
    countCharacters(){

        var entry = $("#message_input").val();
        var chars = entry.length;
        document.getElementById("characters").innerHTML=chars+" caracteres";	

       console.log(chars);

    }

    toggleUsers(){
        $('#panel_users').slideToggle('slow');
        this.showUsers = !this.showUsers;

        if(this.showUsers==true){
            $('.hideable').hide('slow');
        }
        else{
            $('.hideable').show('slow');

        }
    }

- se hicieron pruebas

Image

+ ¿ Que vamos a hacer ?

- planear el nuevo sprint (sprint 4)
- arreglar codigo css de los usuarios por chat

+ ¿ que problemas tuvimos?

- el css de los usuarios por chat no funcionó correctamente
- falta de tiempo
Julian Andres Sucerquia
- 000295022 -

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Fri Mar 09, 2018 10:19 am

Sprint 4 (8 marzo - 22 marzo)

- modificar y arreglar el css del componente users-by-room Puntos: 3

+ Permitir un máximo de caracteres por mensaje

- modificar el html del contador de caracteres Puntos: 2

+ permitir reconocer emojis en el chat

- crear el html y css para el contendor de emojis Puntos: 4
- crear el codigo para reconocer emojis Puntos: 7
- integrar todo a la app Puntos: 5
- realizar pruebas Puntos: 1

Image
Last edited by zucerkia on Thu Apr 12, 2018 10:17 am, edited 2 times in total.
Julian Andres Sucerquia
- 000295022 -

User avatar
JuanRomeroL
Posts: 17
Joined: Mon Jan 22, 2018 11:41 am

Avance del proyecto

Post by JuanRomeroL » Mon Mar 12, 2018 5:45 pm

+. ¿ que se ha hecho ?

- Se ha hecho un prototipo que reconoce emojics. Hasta el momento reconoce 5 emojics diferentes.
Lo que hace el usuario es introducir un carácter especial, y automáticamente lo mapea a un emojic.

El código es el siguiente.

Code: Select all


<html>

      <LINK rel = StyleSheet HREF="styles.css" TYPE="text/css"> 

      <script>
            window.onload = publicar;

            function publicar()
            {
              
                  var texto = document.getElementById('texto-origen').value;  
                  var elemento_destino = document.getElementById('elemento-destino');
                  
                  var emojis = 
                  [
                        {codigo:':1',  class: 'emoji lengua'},
                        {codigo:':2',  class: 'emoji XD'},
                        {codigo:':3', class: 'emoji smile'},
                        {codigo:':4', class: 'emoji risa'},
                        {codigo:':5', class: 'emoji cinco'},
                        {codigo:':6', class: "emoji 6"},
                        {codigo:':7', class: "emoji 7"},
                        {codigo:':8', class: "emoji 8"},
                        {codigo:':9', class: "emoji 9"},
                        {codigo:':0', class: "emoji 10"},
                        {codigo:'!a', class: "emoji 11"},
                        {codigo:'!b', class: "emoji 12"},
                        {codigo:'!c', class: "emoji 13"},
                        {codigo:'!d', class: "emoji 14"},
                        {codigo:'!e', class: "emoji 15"},
                        {codigo:'!f', class: "emoji 16"}
                  ];   
                         
                  for (i = 0; i < emojis.length; i++) 
                  { 
                        var emoji = emojis[i];
                        var image = '<div class="' + emoji.class + '"></div>'   
                        texto = replaceAll(texto,"" + emoji.codigo, image);      
                  }

                  elemento_destino.innerHTML = texto;
            }


            function findById(source, id) 
            {
                  return source.filter(function( obj ) 
                  {
                      return +obj.id === +id;
                  })[ 0 ];
            }

            function replaceAll(str, find, replace) 
            {  
                  try
                  {
                    return str.replace(new RegExp(find, 'g'), replace);
                  }

                  catch(ex)
                  {
                    return str;
                  }
            }

      </script>

      <strong> Reconocimiento de emojis </strong><br/>

      <textarea id="texto-origen" class="tarea" onkeyup="publicar()" onkeydown="publicar()"></textarea>

      <div id="elemento-destino"></div>

</html>

Hoja de estilos en cascada.

Code: Select all


pxtextarea
{
  width:300px;
  margin-top:25px;
  height:50px;
}

#elemento-destino
{
  font-size:2em;
  padding-top:5px;
}

.emoji
{  
      display: inline-block;
      vertical-align:middle;
      width: 60px;
      height: 60px;
      background: url("emojis.jpg"); 
}

.emoji.lengua
{  
      background-position: 0px 0px;
}

.emoji.XD
{
      background-position: 0px 180px;
}

.emoji.smile
{
      background-position: 60px 0px;
}

.emoji.risa
{  
      background-position: 120px 0px;
}

.emoji.cinco
{  
      background-position: 180px 0px;
}


.emoji.6
{
      background-position: 0px 0px;
}

.emoji.7
{  
      background-position: 0px 0px;
}

.emoji.8
{  
      background-position: 0px 0px;
}

.emoji.9
{  
      background-position: 0px 0px;
}

.emoji.10
{  
      background-position: 0px 0px;
}

.emoji.11
{  
      background-position: 0px 0px;
}

.emoji.12
{  
      background-position: 0px 0px;
}

.emoji.13
{  
      background-position: 0px 0px;
}

.emoji.14
{  
      background-position: 0px 0px;
}

.emoji.15
{  
      background-position: 0px 0px;
}

.emoji.16
{  
      background-position: 0px 0px;
}

Enlace de imagen: https://s-media-cache-ak0.pinimg.com/23 ... 6e9e2d.jpg

Ejemplo:

Image

+. ¿ Que vamos a hacer ?

Primero: Terminar las demás tareas en este componente.


+ permitir reconocer emojis en el chat

- crear el html y css para el contendor de emojis Puntos: 4
- integrar todo a la app Puntos: 5
- realizar pruebas Puntos: 1


Segundo: Continuar realizando lo que abarca el sprint

- modificar y arreglar el css del componente users-by-room Puntos: 3

+ Permitir un máximo de caracteres por mensaje

- modificar el html del contador de caracteres Puntos: 2


+. ¿ que problemas tuvimos?

- Falta de tiempo para integración, pero cada integrante ha tenido mayor tiempo para realizar lo que le corresponde.
- Poco dominio de las tecnologías. A veces en internet no se encuentra la información para resolver un problema especifico, se debe gastar tiempo leyendo y documentandose.
Juan Pablo Romero Londoño
Estudiante Ingeniería de Sistemas 8 semestre :geek:
Universidad Pontificia Bolivariana
ID: 000287960

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Thu Mar 15, 2018 10:25 pm

+ ¿Que se ha hecho ?

- se adaptó el código para permitir solo 200 caracteres en un mensaje

Image

Code: Select all

countCharacters(){

        var entry = $("#message_input").val();
        var chars = entry.length;
        document.getElementById("characters").innerHTML=chars+" / 200";	

       console.log(chars);

    }

Code: Select all

<div>
                    <p class="counter" id="characters">0 / 200</p>
            </div>
        <div class="message_input_wrapper">
                <input type="text" id="message_input" class="message_input" maxlength="200" (keyup) ="countCharacters()" (keydown)="countCharacters()" [(ngModel)]="messageToSend" placeholder="Escribir Mensaje..." />
        </div>
+¿Que se hará?

- se arreglará la parte visual de la vista de los usuarios en el chat
- se hara el html y css de el contenedor de los emojis

+¿ Que problemas tuvimos?

- falta de tiempo
Julian Andres Sucerquia
- 000295022 -

User avatar
zucerkia
Posts: 36
Joined: Mon Jan 22, 2018 11:38 am

Re: Project Standlan

Post by zucerkia » Tue Mar 20, 2018 4:10 pm

+ ¿ Que se ha hecho?

- se ha modificado el codigo para reconocer emojis

Image

Code: Select all

.emoji
{  
      display: inline-block;
      vertical-align:middle;
      width: 29.5px;
      height: 29.5px;
      background: url("emojis3.jpg"); 
}

.emoji.tongue
{  
      background-position: 0px 0px;
}

.emoji.perspiration
{
      background-position: 88.5px 0px;
}

.emoji.cryWithLaughter
{
      background-position: 59px 0px;
}

.emoji.XD
{  
      background-position: 29.5px 0px;
}

.emoji.happy
{  
      background-position: 0px 88.5px;
}


.emoji.serene
{
      background-position: 88.5px 88.5px;
}

.emoji.crazy
{  
      background-position: 59px 88.5px;
}

.emoji.blush
{  
      background-position: 29.5px 88.5px;
}

.emoji.angel
{  
      background-position: 0px 59px;
}

.emoji.happy2
{  
      background-position: 29.5px 59px;
}

.emoji.kiss
{  
      background-position: 88.5px 29.5px;
}

.emoji.wink
{  
      background-position: 59px 29.5px;
}

Code: Select all

<html>

      <LINK rel = StyleSheet HREF="styles.css" TYPE="text/css"> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

      <script>
            window.onload = function(){
                  var texto;
                  publicar();
            } 

            //texto = document.getElementById('texto-origen').value;  

            var elemento_destino;
            var emojis = 
            [
                  {codigo:':tongue:',  class: 'emoji tongue'},
                  {codigo:':perspiration:',  class: 'emoji perspiration'},
                  {codigo:':cryWithLaughter:', class: 'emoji cryWithLaughter'},
                  {codigo:':XD:', class: 'emoji XD'},
                  {codigo:':happy:', class: 'emoji happy'},
                  {codigo:':serene:', class: "emoji serene"},
                  {codigo:':crazy:', class: "emoji crazy"},
                  {codigo:':blush:', class: "emoji blush"},
                  {codigo:':angel:', class: "emoji angel"},
                  {codigo:':happy2:', class: "emoji happy2"},
                  {codigo:':kiss:', class: "emoji kiss"},
                  {codigo:':wink:', class: "emoji wink"}
                        
                  ];   


            function publicar()
            {
              
                  texto = document.getElementById('texto-origen').value;  
                  elemento_destino = document.getElementById('elemento-destino');
                  
                  
                         
                  for (i = 0; i < emojis.length; i++) 
                  { 
                        var emoji = emojis[i];
                        var image = '<div class="' + emoji.class + '"></div>'   
                        texto = replaceAll(texto,"" + emoji.codigo, image);      
                  }

                  elemento_destino.innerHTML = texto;
            }


            function findById(source, id) 
            {
                  return source.filter(function( obj ) 
                  {
                      return +obj.id === +id;
                  })[ 0 ];
            }

            function replaceAll(str, find, replace) 
            {  
                  try
                  {
                    return str.replace(new RegExp(find, 'g'), replace);
                  }

                  catch(ex)
                  {
                    return str;
                  }
            }

            function loadEmoji(){




                  for (i = 0; i < emojis.length; i++) 
                  { 
                        var emoji = emojis[i];
                        var image = '<td class="' + emoji.class + '" id="'+ emoji.codigo+'" onclick="add(this)"></td>'
                        $('.emojisPool').append(image);
   
                  }
            }

            function add(val){

                  document.getElementById('texto-origen').value += val.id;
                  publicar();
            }



      </script>

      <strong> Reconocimiento de emojis </strong><br/>

      <input type="text" id="texto-origen" class="tarea" onkeyup="publicar()" onkeydown="publicar()"><span class='loadEmoji' onclick="loadEmoji()">emoji</span>

      <div id="elemento-destino"></div>

      <table >
            <tr class="emojisPool">
                  

            </tr>
      </table>

</html>

+ ¿ Que se va a hacer ?

- arreglar el css de la vista de los users en el chat
- realizar html y css de el contenedor de emojis

+ ¿ Que problemas tuvimos?

- gran dificultad en integrar el codigo para reconocer emojis a la app, algunas cosas no funcionan igual en la app
- falta de tiempo
Julian Andres Sucerquia
- 000295022 -

User avatar
Emilio Martinez
Posts: 14
Joined: Thu Jul 21, 2016 8:23 am
Location: Medelín

Re: Project Standlan

Post by Emilio Martinez » Mon Apr 02, 2018 11:08 pm

Sprint 5 (2 abril - 16 abril)

Modificar el CSS del con ponente users by room 3 puntos

Crear el html y CSS para el contenedor de e ojos 4 puntos

Integrar el código a la spp 5 puntos

Realizar pruebas 1 punto

- reconocer emojis en el input 7 puntos
Emilio Martinez Rivera.

Post Reply