Home / user-93521

JoseMgz_Ux's questions

Martin Hope
JoseMgz_Ux
Asked: 2022-10-26 05:41:09 +0800 CST
  • 0

I am working on a project with ReactJs and I want to make a background with a gradient from red to white and a logo will go on top.

I am using MUI and in the sxprops I put the below but the logo appears behind the gradient (background) instead I do place it on a normal background of a single color (backgroundColor) if the logo appears in front of me.

<Grid
  item
  xs={false}
  sm={4}
  md={20}
  sx={{
      backgroundImage: 'url(https://...)',
      backgroundRepeat: 'no-repeat',
      //backgroundColor: 'linear-gradient(0deg, rgba(195,34,34,1) 0%, rgba(249,249,249,1) 100%)'//Logo detras
      background: "#D52323", //Logo delante
      backgroundSize: '100%',
      backgroundPosition: 'center',
   }}
/>            
</Grid>
javascript
Martin Hope
JoseMgz_Ux
Asked: 2022-09-03 07:14:06 +0800 CST
  • 0

Maybe it's silly for many or I don't know but I'm still not very good at CSS in responsive design themes and all that.

Well I have a canvas that, so to speak, renders me a PDF, for that part everything is fine but the canvas element is inside a div and no matter how much I want to center it I can't do it, it always stays attached to the right corner of the div.

HTML

<script type="text/javascript" src="../js/pdf.js"></script>
<script type="text/javascript" src="../js/pdf.js"></script>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/turn.min.js"></script>

<body>
            <div id="magazine">          
                    <canvas  id="the-canvas"></canvas>             
            </div>
   <script src="../js/main.js"></script>
</body>

CSS

I have tried to move it with (top, right...) or using margin but when I try to move it towards the center of the div nothing happens.

 #magazine{
        width: 1052px;
        height: 652px;  
        background-color: brown;
        margin: 5em;
        border-radius: 0.5em;
    }

#the-canvas{
    background-color: aliceblue;
    width:110%;
    height:100%;
    border: 1px solid black;
}

js if needed

       $(window).ready(function () {
        $('#magazine').turn({
            display: 'double',
            acceleration: true,
            gradients: !$.isTouch,
            elevation: 70,
            when: {
                turned: function (e, page) {
                    /*console.log('Current view: ', $(this).turn('view'));*/
                }
            }
        });
    });

    $(window).bind('keydown', function (e) {

        if (e.keyCode == 37)
            $('#magazine').turn('previous');
        else if (e.keyCode == 39)
            $('#magazine').turn('next');
    });


    PDFJS.disableWorker = true;

    var pdfDoc, pageNum, scale, canvas, ctx;

    function Init() {
        pdfDoc = null;
        pageNum = 1;
        scale = 1.5;
        canvas = document.getElementById('the-canvas');
        ctx = canvas.getContext('2d');  
    }
    //
    // Get page info from document, resize canvas accordingly, and render page
    //
    function renderPage(num) {
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            page.render(renderContext);
        });
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    }

    $(document).ready(function () {
        Init();
        PDFJS.getDocument('LIBROO2.pdf').then(function (doc) {
            pdfDoc = doc;
            renderPage(pageNum);
        });
    });

    // Go to previous page
    function goPrevious() {
        if (pageNum <= 1)
            return;
        pageNum--;
        renderPage(pageNum);
    }

    // Go to next page
    function goNext() {
        if (pageNum >= pdfDoc.numPages)
            return;
        pageNum++;
        renderPage(pageNum);
    }

EXAMPLE IMAGE enter image description here

javascript
Martin Hope
JoseMgz_Ux
Asked: 2022-07-12 07:54:27 +0800 CST
  • 1

I use .Net 6 and when I want to run my first migration I get this error:

The value cannot be null. ('connectionString' parameter)

My appsettings.json

    {
  "Logging": {
    "ConnectionStrings": {
      "DefaultConnection": "Data Source=MSI;Initial Catalog=tiendalibro;Integrated Security=True"
    },
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  
  "AllowedHosts": "*"
}

And the following is my method in Program.cs

builder.Services.AddDbContext<ContextoLibreria>(options => options.UseSqlServer("DefaultConnection"));
c#
Martin Hope
JoseMgz_Ux
Asked: 2022-03-27 07:00:02 +0800 CST
  • 1

I am somewhat new to React and something is happening to me that I imagine is simple for someone experienced. I am filling a table with an api and then I download that table in a pdf file and each table on a different page.

I make more than one call to an api, so the information I bring is mapped into a component and then I render it, what is happening to me is that it is rendering 1 component for each call, that is, if I make 100 calls to the api, I it renders 100 components and I don't want that. What do I want? That I render only 1 component in the DOM but when I download that file it does come with all the tables (Components) of all the calls I made.

import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { Table, Button } from 'reactstrap';
import { PDFExport } from '@progress/kendo-react-pdf';

const styles = {
  title: {
    textAlign: 'center',
    fontSize: '20px',
    fontWeight: 'bold',
  },
  subtitle: {
    textAlign: 'center',
    background: '#67B71F',
    color: 'white',
    fontSize: '15px',
  },

  td: {
    fontSize: '15px',
  },
  th: {
    fontSize: '15px',
    fontWeight: 'bold',
  },
  button: {
    fontWeight: 'bold',
  },
};
const options = {
  headers: {
    Authorization: process.env.REACT_APP_GETTOKENPDF,
  },
};

const BlankPage = () => {
  const pdfExportComponent = useRef(null);
  const [InfoData, setInfoData] = useState([]);

  useEffect(() => {
    const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;
    axios
      .get(`${apiURL}`, options)

      .then(({ data }) => {
        setInfoData(data.data);
      })
      .catch((error) => {
        console.log('Alerta error: ', error.data);
      });
  }, []);

  const Registers = () => (
    <>
      {InfoData.map((res) => (
        <div className="card text-left " key={res.idMerchant}>
          <PDFExport forcePageBreak=".page-break">
            <Table className="table table-bordered">
              {/* <caption style={styles.title}>INFORMACION DE REGISTRO</caption> */}
              <tbody>
                <tr>
                  <td style={styles.th} colSpan="1">
                    Nombre de la Cuenta:
                  </td>
                  <td style={styles.td}>{res.merchantName}</td>
                  <td style={styles.th}>ID:</td>
                  <td style={styles.td}>{res.idMerchant}</td>
                </tr>
                <tr>
                  <td style={styles.th}>Usuario que registro la cuenta:</td>
                  <td style={styles.td}>{res.officerUpdate}</td>
                  <td style={styles.th}>Fecha:</td>
                  <td style={styles.td}>{res.activationDate}</td>
                </tr>
                <tr>
                  <td style={styles.th}>Tipo de cuenta:</td>
                  <td style={styles.td}>{res.merchantType}</td>
                </tr>
                <tr>
                  <td style={styles.td} colSpan="4">
                    Los terminos y condiciones son aceptados por defecto al
                    momento del registro de la cuenta.
                    <a href="https://www.paguelofacil.com/terminos-y-condiciones">
                      <br />
                      https://www.paguelofacil.com/terminos-y-condiciones
                    </a>
                  </td>
                </tr>               
                </tr>
              </tbody>
            </Table>
          </PDFExport>
        </div>
      ))}
    </>
  );

  return (
    <>
      <PDFExport
        forcePageBreak=".page-break"
        fileName="Archivo.pdf"
        scale={0.9}
        paperSize="a4"
        keepTogether="Table"
        ref={pdfExportComponent}
      >
        <Registers />
      </PDFExport>
      <br />
      <Button
        className="k-button"
        onClick={() => {
          if (pdfExportComponent.current) {
            pdfExportComponent.current.save();
          }
        }}
      >
        Exportar en PDF
      </Button>
    </>
  );
};

export default BlankPage;

javascript
Martin Hope
JoseMgz_Ux
Asked: 2020-07-17 10:42:28 +0800 CST
  • 0

I am making an application for an inventory of item loans (keyboards, mouse...) I ask for Carrera, name to whom I lend, item, date, received in case they return and status (Loaned or delivered), ok help me out video to make the database with FIREBASE.

The authentication works great but what interests me the most is the database. The application when I give it a registration tells me "Successful registration" but does not save anything.

I would really appreciate the help, please.

(various variables declared)

private DatabaseReference Clases;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_prestamo);

    Clases = FirebaseDatabase.getInstance().getReference("Clases");

    Estudiante = (EditText)findViewById(R.id.edtEstd);
    Articulo = (EditText)findViewById(R.id.edtArt);
    Recibido = (EditText)findViewById(R.id.edtRecibido);
    Fecha = (EditText)findViewById(R.id.edtFecha);
    Estado = (Spinner)findViewById(R.id.spnEstado);
    btRegistrarP = (Button)findViewById(R.id.btRegistroP);
    ayuda = (ImageButton)findViewById(R.id.btnAyuda);


}
public void RegistrarPrestamo(){
    String estud = Estudiante.getText().toString();
    String artic = Articulo.getText().toString();
    String fech = Fecha .getText().toString();
    String estado = Estado.getSelectedItem().toString();
    String recib = Recibido.getText().toString();

    if(!TextUtils.isEmpty(estud)){
        String id = Clases.push().getKey();
        Clases lai= new Clases(id,estud, artic,fech,estado,recib);
        Clases.child(id).setValue(lai);

        Toast.makeText(this, "Registro exitoso", Toast.LENGTH_SHORT).show();
    }else{
        Toast.makeText(this, "Introduzca un Estudiante", Toast.LENGTH_SHORT).show();
    }
}
public void Ayuda(){
    Toast.makeText(this, "LLene este cuadrante en caso de estar recibiendo un Artículo", Toast.LENGTH_LONG).show();
}

public void onClick(View view) {

    switch (view.getId()) {
        case R.id.btRegistroP:
            RegistrarPrestamo();
            break;

        case R.id.btnAyuda:
            Ayuda();
    }
}
android