Edwin V's questions

I have 2 models that I want to relate to be able to perform queries in mongoose.

Model Users

import mongoose from 'mongoose'
const Schema = mongoose.Schema

let csvuaSchema = new Schema({
 codigo: { type: 'String' },
 georeferencia: { type: 'String'},
 tipo: { type: 'String' }
})

let csvua = mongoose.model('csvua', csvuaSchema)

export default csvua

Model Readings

import mongoose from 'mongoose'
const Schema = mongoose.Schema

let csvlecSchema = new Schema({
 codigo: { type: 'String', ref: 'csvuas'},
 fecha_lectura: { type: 'Date' },
 lectura: { type: 'Number' }
})

let csvlec = mongoose.model('csvlec', csvlecSchema)

export default csvlec

I get the information from csv files and upload it to mongodb in bulk and I need to be able to query all the readings of a user through the user code. Can I use the user code to do a query that gets all the reads from the user or is it necessary to use the _id of the user? I don't want to use the _id that mongoose generates for the user because trying to bulk add reads would have to query the user's _id with your code and I think that's not ideal for performance.

I want to upload several images to my nodejs server that have additional information such as title and category , I tried sending the images in DataUrl but due to POST limitations it does not allow me to upload more than 2 images at a time.

To upload the images I use this reactjs component Image Upload Component which has the handleSubmitImages method to send the component state to the server via ajax.

handleSubmitImages()

handleSubmitImages(){
 let xhr = new XMLHttpRequest()
 let json = JSON.stringify({images: this.state.images})
 xhr.open("POST",'new',true)
 xhr.setRequestHeader("Content-Type","application/json")
 xhr.send(json)
}

Component Status

The state of the component is formed by an array of json objects that contain the information of the images as follows:

[ 
 { title: 'Imagen 264',
  file: [Blob], // Este es el blob del archivo
  data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA', //Imagen en base64
  category: 1 } 
]

On the server I have the wallpapers/new route to upload images using the POST method .

Route wallpapers/new

router.route("/new")
  .get(function(req,res){
    res.render('wallpaper/new',{
      user: req.user
    })
  })
  .post(function(req, res) {
    let images = req.body.images
    images.map(image => {
     // Aquí debería poder guardar la imagen en mi servidor
    })
  });

NOTE: I have read tutorials that make use of formidable and FormData() to upload several images at the same time, but in none of them do they send additional information such as the title of the image or something similar. I hope you can help me.

I am creating a system to upload images with drag and drop, the idea is that each image is added to appear in a grid, I use promises so that the image only appears when it is already loaded with the onload event, but I can not get it to appear with a smooth transition. Here is a simple example of the problem.

let cont = document.getElementById('container')
let btn = document.getElementById('addEl')
btn.addEventListener('click',function(){
  let newEl = document.createElement('div')
  newEl.classList.add('elemento')
  cont.appendChild(newEl)
  newEl.classList.add('visible')
})

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 300px;
  background-color: tomato;
}

.elemento {
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  opacity: 0;
  transition: opacity 2s ease.in;
}

.visible {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>
<button type="button" id="addEl">Agregar Elemento</button>

As far as possible I prefer not to use libraries.

I have 4 tables and Wallpapers, Downloads, Favorites, Votes which are defined like this. Of wallpapers I only need the id.

Download Table

+----+---------+---------+
| id | wall_id | user_id |
+----+---------+---------+
|  1 |       1 |       1 |
|  2 |      35 |    NULL |
|  3 |      35 |    NULL |
+----+---------+---------+

Favorite Tables

+----+---------+---------+
| id | user_id | wall_id |
+----+---------+---------+
|  1 |      12 |      10 |
|  2 |      12 |       2 |
+----+---------+---------+

Vote Table

+----+---------+---------+---------+
| id | user_id | wall_id | type    |
+----+---------+---------+---------+
|  1 |      12 |       1 | dislike |
|  2 |      12 |      39 | like    |
|  3 |       1 |       2 | like    |
|  4 |       2 |       2 | like    |
|  5 |       3 |       2 | like    |
|  6 |       5 |       2 | dislike |
|  7 |      12 |      10 | like    |
|  8 |      12 |       2 | like    |
+----+---------+---------+---------+

Basically what I need is a query that returns the number of Downloads, Favorites, Likes and Dislikes of a wallpaper. Try nesting with multiple LEFT OUTER JOINs like this:

SELECT w.id,COUNT(d.id) AS Downloads,
COUNT(f.id) AS Favorites,
SUM(IF(v.type = 'like',1,0)) AS Likes,
SUM(IF(v.type = 'dislike',1,0)) AS Dislikes 
FROM wallpapers AS w 
LEFT OUTER JOIN downloads AS d ON w.id = d.wall_id 
LEFT OUTER JOIN favorites AS f ON w.id = f.wall_id 
LEFT OUTER JOIN votes AS v ON w.id = v.wall_id 
WHERE w.id = 2
GROUP BY w.id;

That returns the result in the way I need but with the wrong calculations, that is, values ​​are duplicated and other strange things happen.

Results Table

+----+-----------+-----------+-------+----------+
| id | Downloads | Favorites | Likes | Dislikes |
+----+-----------+-----------+-------+----------+
|  2 |        10 |        10 |     8 |        2 |
+----+-----------+-----------+-------+----------+

I understand that it is because the LEFT OUTER JOIN cannot be nested like this since the 3 tables must have records that correspond to the id of the first table.

Any solution?

I want to make it so that users of my app can search for images by color. I have an image table that saves the colors in hexadecimal as string type.

+----+-----------------+---------------+
| id | name            | color         |
+----+-----------------+---------------+
|  1 | Orange and Blue | 0c6cab        |
|  2 | Black and White | dba27e        |
|  3 | Full Colors     | 7ba709        |
|  4 | RoG             | 970404        |
|  5 | Triangles       | 167694        |
+----+-----------------+---------------+

The search must be done with colors similar to the one selected by the user, since if it is done with the exact color, it would be difficult to find many results. Is it possible to do this with hex or do I need to save the colors as another data type?

EDITION 1

By similar colors I mean that when the user searches for a red color, for example, the query returns all the colors with a red hue that are found in the table that do not exactly match the color searched for.

I want to know what is the best way to obtain multiple records from a mysql database. Here is a simple example of my situation. I have a static method that queries a database and converts the result to an object that I have defined.

class Persona {

    public $id;
    public $nombre;

    function __construct($id,$name){
        $this->id = $id;
        $this->nombre = $name;

    }

    public static function getPersona($personid){
        $db = new ConnectionDB();
        $stmt = $db->prepare("SELECT * FROM Persona WHERE id = ?");
        $stmt->bind_param('i',$personid);
        $stmt->execute();
        $stmt->bind_result($id,$name);
        $stmt->fetch();
        return new Persona($id,$name);
    }

}

Which option would have better performance?

1. Option 1: Create a method that receives multiple id's and queries them one by one using the above method

   public static function getPersonas($ids){
       $personas = array();
       foreach($ids as $id){
           $personas[] = new getPersona($id);
       }
       return $personas;
   }
   

2. Option 2: Create a method that uses IN in the query.

   public static function getPersonas($ids){
       $db = new ConnectionDB();
       $sql = "SELECT * FROM personas WHERE id IN (" . implode(',',$ids) .")";
       $persons = array();
       if($result = $db->query($sql)){
           while($row = $result->fetch_assoc()){
               $persons[] = $row;
           }
       }
       $oPersons = array();
       foreach($persons as $p){
           $oPersons[] = new Persona($p['id'],$p['name']);
       }
       return $oPersons;
   }
   

I have a class with an asynchronous method that defines several properties of my object, what I want to achieve is to obtain these properties but only when they have already been defined by my method, something like the load event of html elements.

I leave an example with setTimeout to show that after 2 seconds the property is defined and can be accessed.

class AsyncClass {
  constructor(){
    this.img;
    this.getImg();
  }
  // Metodo Asyncrono
  getImg(){
    new Promise(loadImg => {
      let img = new Image();
      img.onload = function(){
        loadImg(this);
      }
      img.src = 'https://images7.alphacoders.com/803/803071.jpg';
    }).then(img => {
      this.img = img;
      document.getElementById('image').src = this.img.src;
    });
  }
  
}

var a = new AsyncClass();
// Aqui mi objeto aun no esta definido
console.log(a.img);
// Espero 2 segundos para poder mostrar mi objeto
setTimeout(function(){
  console.log(a.img);
},2000)

#image {
  width: 200px;
  height: 100px;
}

<img id="image"></img>

i am trying to create a javascript class for a droparea, i tried two different ways. The Droparea class allows me to access the object's properties but when the drop event occurs, e.preventDefault does not work. The Droparea2 class allows me to avoid the default behavior of the drop event, but it does not allow me to access the object's properties. Any solution? I prefer not to use any plugin.

class Droparea {
	// Contructor
	constructor(div, property1){
		this.div = div;
		this.property1 = property1;
	}

	// Metodos 
	registerEvents(){
		this.in();
		this.out();
		this.drop();
		return;
	}

	in(){
		var div = this.div;
    var property1 = this.property1;
		div.addEventListener('dragover',function(){
			div.style.background = "yellow";
      div.innerHTML = property1 + '1';
		},false);
	}

	out(){
		var div = this.div;
    var property1 = this.property1;
		div.addEventListener('dragleave',function(e){
			e.stopPropagation();
			e.preventDefault();
			div.style.background = "blue";
      div.innerHTML = property1 + '2';
		},false);
	}

	drop(){
		var div = this.div;
    var property1 = this.property1;
		div.addEventListener('drop',function(e){
			e.stopPropagation();
			e.preventDefault();
			div.style.background = "red";
      div.innerHTML = property1 + '3';
		},false);
	}
}

class Droparea2 {
	// Contructor
	constructor(div, property1){
		this.div = div;
		this.property1 = property1;
	}

	// Metodos 
	registerEvents(){
    this.div.addEventListener('dragover',this.in,false);
    this.div.addEventListener('dragleave',this.out,false);
    this.div.addEventListener('drop',this.drop,false);
	}

	in(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.style.background = 'yellow';
	}

	out(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.style.background = 'blue';
    e.target.innerHTML = this.property1;
	}

	drop(e){
    e.stopPropagation();
    e.preventDefault();
    e.target.style.background = 'red';
	}
}
var div = document.querySelector('.droparea');
var drop = new Droparea(div,'Something');
var div2 = document.querySelector('.droparea2');
var drop2 = new Droparea2(div2,'Something');
drop.registerEvents();
drop2.registerEvents();

.droparea {
  background: gray;
  height: 200px;
}

.droparea2 {
  background: darkgray;
  height: 200px;
}

<div class="droparea">Arrastra tu elemento aqui. 1</div>
<div class="droparea2">Arrastra tu elemento aqui. 2</div>

my question is how to define private methods in javascript classes so that they cannot be accessed directly.

class User {
  constructor(name, password, email) {
		this.name     = name;
		this.password = password;
		this.email    = email;
  }

  privado(){
  	console.log("Accediste a un metodo privado")
  }
}

var u = new User("usuario","123","[email protected]");
u.privado();

I tried defining variables outside the constructor but it doesn't work.

My problem is that I can't use jquery in my js files, even though it's already embedded in html and even works with bootstrap. I tried including JQuery before and after the JS but it didn't work.

class User {
  contructor(name,pass){
    this.name = name;
    this.pass = pass;
  }
  
  dis(){
    //$('.navbar').fadeOut();
  }
}


var u = new User();
u.dis();
$('.navbar').fadeOut();

<!DOCTYPE html>
<html lang="es">
  <head>
    <base href="http://localhost/FreedomWallpapers/" target="_blank">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>
    
    <!-- Bootstrap core CSS -->
    <link href="views/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="views/app/css/hometemplate.css" rel="stylesheet">
    
  </head>
<header>
  <nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded" >
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Freedom Wallpapers</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio<span class="sr-only"></span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Categorias</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Perfil</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <button class="btn btn-outline-success my-2 my-sm-0 mx-auto" type="button" data-toggle="modal" data-target="#loginFormModal">Login</button>
        <!-- Modal -->
        <div class="modal fade" id="loginFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Iniciar Sesion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="container">
                  <form>
                    <div class="form-group row">
                      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                      <div class="col-sm-10">
                        <input type="email" class="form-control" id="logEmail" placeholder="Email">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                      <div class="col-sm-10">
                        <input type="password" class="form-control" id="logPassword" placeholder="Password">
                      </div>
                    </div>
                    <div class="form-group row">
                      <div class="col-sm-12">
                        <div class="form-check">
                          <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Recordarme
                          </label>
                        </div>
                      </div>
                    </div>
                    <button type="button" class="btn btn-outline-success float-right" id="loginButton">Ingresar</button>
                    <button type="button" class="btn btn-outline-warning float-right mr-2" id="registerButton">Registrarse</button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>
      </form>
    </div>
  </nav>
</header>
<script src="views/app/js/login.js" charset="utf-8"></script>

  <body>
    <section class="homeSection">
      <div class="container">
        <div class="welcomeText">
          <h2>Freedom Wallpapers</h2>
          <h5>El mejor sitio para descargar wallpapers.</h5>
        </div>
      </div>
    </section>
    <section class="randomSection bg-inverse">
      <div class="container">
        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="views/libs/bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

I want to know if there is any way to make a button that allows to download images that are saved in another server from a URL. That is, like right click - save image as but with a button. I searched for solutions with PHP or JavaScript but haven't found anything yet.

The HTML5 attribute downloaddoes not work in all browsers. Is there an alternative with JavaScript?

I want to use an API for a Wallpapers page but I ran into the ajax cross domain restriction. Please investigate the error and it can be fixed by using JSONP from JQuery to grab the information returned by the API. This is my request.

$.ajax({
        url: endpoint,
        type: 'GET',
        dataType: 'jsonp',
        data: { 'auth': apikey ,
                'method':'search',
                'term': keyword},
        success: function(data){
            console.log(data);
        }
    })

I also tried this way

$.getJSON(urlsearch+"?callback=?",function(result){
        console.log(result);
    })

It doesn't work either way. I already checked that the API works correctly, This is the error that appears in firebug.

I read that maybe the server does not support JSONP or CORS and that a solution could be to create a script in PHP that obtains the information and transfers it to javascript. But I'm not sure it's the best way to do it. Does anyone know any solution?

Thanks in advance.

I'm trying to create a simple application that allows me to list the files on an FTP server but I haven't been able to do it. If anyone has a simple way to do this I would be very grateful.

My question is what the => characters are used for in C#, I have seen it in a method to access the device's light sensor. This is the method

private void _lightSensor_ReadingChanged(LightSensor sender, LightSensorReadingChangedEventArgs args)
    {
        _dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
        {
            Lux = args.Reading.IlluminanceInLux;
        });

        Debug.WriteLine("Lux: {0}", Lux);
    }

Thanks.

I have a question, is it correct to initialize a property fullin ViewModelthe following way?

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<Driver> _drivers = new ObservableCollection<Driver>();
    public ObservableCollection<Driver> Drivers
    {
        get { return _drivers; }
        set { _drivers = value;
            RaisePropertyChanged();
        }
    }

}

Is it correct? Is it a bad practice? Or should it be done in another way? My question arises because I was trying to fill that collection with a method that initialized the field but the changes were not reflected in the XAMLone that is bound to the property Drivers, only instantiating the field _driversin this way made it work. Thanks.

I have a UWP app that uses various TextBoxto collect user information:

<Grid>
    <TextBox Text="{Binding Codigo}"></TextBox>
    <TextBox Text="{Binding Producto}"></TextBox>
    <TextBox Text="{Binding Cantidad}"></TextBox>
</Grid>

My question, what is the best way to validate that the user does not enter incorrect data, that is, make them TextBoxonly allow numbers to be entered or some kind of character mask?

Must be done from code or can be done from XAML

My problem is that I'm trying to bind between a ComboBoxproperty type and a stringviewModel, but I can't do it

<ComboBox HorizontalAlignment="Stretch"
          SelectedItem="{Binding Path=OResultado, Mode=TwoWay}">
    <ComboBoxItem Content="Anomalia"/>
    <ComboBoxItem Content="Retiro"/>
    <ComboBoxItem Content="Retiro con Anomalia"/>
    <ComboBoxItem Content="Conforme"/>
</ComboBox>

I tried with SelectedItemand SelectedValue, SelectedIndexbut it returns only the index of the ComboBoxItemselected one. I tried to do a Converterbut I couldn't get it to return the expected result.

What I want to do is that when the user selects an item from ComboBox the item's value Contentis assigned to the type property string OResultadoof my viewModel.

I want to bind data from an SQLite table to a listView but I want to do it from my viewModel, how can I do it? Thanks.

I am creating a universal app with a HamburgerMenu

<Grid>
    <SplitView x:Name="hMenu" IsPaneOpen="{Binding ElementName=hMenuBtn, Path=IsChecked}">
        <SplitView.Pane>
            <RelativePanel>

            </RelativePanel>
        </SplitView.Pane>  
    </SplitView>
    <StackPanel Orientation="Horizontal" Height="48" 
                VerticalAlignment="Top" HorizontalAlignment="Stretch"
                Background="{ThemeResource SystemControlBackgroundAccentBrush}">
        <ToggleButton x:Name="hMenuBtn" VerticalAlignment="Stretch" Width="48"
                      HorizontalAlignment="Stretch">
        </ToggleButton>
        <TextBlock Foreground="White" Text="Control De Materiales"
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                   FontSize="20" Margin="10 20 0 0"/>
    </StackPanel>
</Grid>

It works correctly, but pressing the ToogleButtonel Paneopens abruptly without showing any transition.

I've tried to add it via TransitionCollection, but I can't get it to work.

I'm having a problem trying to create a form within a Hub in a UWP app.

<Hub>
   <HubSection>
     <Datatemplate>
       <Grid>
         <TextBox x:Name="txtSerial"/>
       </Grid>
     </Datatemplate>
   </HubSection>
 </Hub>

The problem is that I can't access the control textboxwith the name to get its value. I have read in some pages that the event loadedof the control and a field in the class could be used to make it accessible, but this would be very complicated for me since I want to create several forms with several fields each. If anyone can help me, thanks in advance.