Agustin G.'s questions

EDIT: The question was initially to avoid an error in the console, it was already avoided by configuring Next.JS thanks to Pablo's comment. Now I am looking for another answer, that is how to make my code work, without using setTimeout, that is why I change the title of it.

I am getting places near a point with the Google maps API.

At one point I am getting an error (indicated below) but the code continues its execution and finally returns the expected result. (That's right, everything works fine for me, only that error appears in the node console, and I would like to know what I am doing wrong so that it appears, to avoid it.)

API resolved without sending a response for /api/google/places/33.807501/-78.70039, this may result in stalled requests.

The code starts with the last line of trywhen I do fetchNearbyPlaces();, then that function is executed, which is recursive.

fetchNearbyPlacesinitially it does not receive any parameters, so I make the normal call. If the result of this call returns a next_page_token, it indicates that I can return more results.

So, in this case, I call again fetchNearbyPlacesbut this time passing a parameter...

(AT THIS MOMENT IS WHEN I GET THE ERROR)

... until at one point the result no longer returns a next_page_token, at that moment it enters else, I clean the results, I call to fetchNearbyBeachesfind nearby beaches, and finally from this function I return the entire result.

I added SEVERAL console.logto see if I can identify when the error appears, (I leave the console in the code) and what I see on the console is the following:

- llamamos a fetchnearbyplaces
- fetchNearbyPlaces indica que hay mas resultados, vuelvo a llamar
- ERROR: API resolved without sending a response for /api/google/places/33.807501/-78.70039, this may result in stalled requests.
- llamamos a fetchnearbyplaces
- fetchNearbyPlaces indica que hay mas resultados, vuelvo a llamar
- llamamos a fetchnearbyplaces
- Ya no hay mas resultados, limpio el resultado y llamo a fetchNearbyBeaches
- Desde fetchNearbyBeaches. Misma logica que para fecthNearbyPlaces
- Desde fetchNearbyBeaches. Misma logica que para fecthNearbyPlaces
- Finalmente devuelvo el resultado de la llamada

This is my code:

  const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude}%2C${longitude}&radius=${radius}&key=${process.env.CW_GOOGLE_MAPS_API_KEY}`;

  const beachesUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude}%2C${longitude}&radius=${radius}&type=natural_feature&key=${process.env.CW_GOOGLE_MAPS_API_KEY}`;

  try {
    let results = [];
    let beaches = [];
    const fetchNearbyBeaches = async (urlWithToken = null) => {
      console.log("Desde fetchNearbyBeaches. Misma logica que para fecthNearbyPlaces");
      await axios.get(urlWithToken ? urlWithToken : beachesUrl).then(data => {
        beaches = [...beaches, ...data.data.results];
        if (data?.data?.next_page_token) {
          const newUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=${process.env.CW_GOOGLE_MAPS_API_KEY}&pagetoken=${data.data.next_page_token}`;

          setTimeout(() => {
            fetchNearbyBeaches(newUrl);
          }, 2000);
        } else {
          console.log("Finalmente devuelvo el resultado de la llamada");
          beaches.length > 5 && beaches.splice(5);
          results.length > 5 && results.splice(5);

          const finalResults = [...beaches, ...results];

          finalResults.length > 10 && finalResults.splice(10);
          return res.status(200).json({
            data: {
              results: finalResults,
            },
            success: true,
          });
        }
      });
    };

    const fetchNearbyPlaces = async (urlWithToken = null) => {
      console.log("llamamos a fetchnearbyplaces");
      await axios.get(urlWithToken ? urlWithToken : url).then(data => {
        results = [...results, ...data.data.results];
        if (data?.data?.next_page_token) {
          const newUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=${process.env.CW_GOOGLE_MAPS_API_KEY}&pagetoken=${data.data.next_page_token}`;
          console.log("fetchNearbyPlaces indica que hay mas resultados, vuelvo a llamar");
          setTimeout(() => {
            fetchNearbyPlaces(newUrl);
          }, 2000);
        } else {
          console.log("Ya no hay mas resultados, limpio el resultado y llamo a fetchNearbyBeaches");

          const dirtyResultsWithDuplicates = [];
          results.map(result => {
            return types.map(type => {
              if (checkFunc(result.types, type) && !result.types.includes("lodging")) {
                dirtyResultsWithDuplicates.push(result);
              }
            });
          });

          const set = new Set(dirtyResultsWithDuplicates);
          const filtered = Array.from(set);

          results = filtered.length > 10 ? filtered.splice(10) : filtered;
          
          fetchNearbyBeaches();
        }
      });
    };

   fetchNearbyPlaces();
  } catch (err) {
    res.status(500).json({
      message: err.message,
      statusCode: 500,
    });
  }

EDIT:

This function to fetch the google api is executed from a component, throughuseSWR

 const nearbyPlacesURL = resortDetails?.geoCoordinates?.lat && resortDetails?.geoCoordinates?.lon ? `/api/google/places/${resortDetails?.geoCoordinates?.lat}/${resortDetails?.geoCoordinates?.lon}/` : null;

  if (nearbyPlacesURL) {
    dataFetcher = url => fetch(url).then(res => res.json()).then(data => data?.data?.results);
  }

  const {
    data: nearbyPlaces,
  } = useSWR(nearbyPlacesURL, dataFetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
  });

I have a query, I'm working on a project in React 17 and Next 12, and there is a way to validate that an object is not nullin a way that I didn't know, something like:

miObjeto?.objetoInterior?.propiedad = value

This avoids doing things likeif(miObjeto && miObjeto.objetoInterior) {...}

I first thought it was a JS feature, but when I tried it in a Vue project it threw errors.

Now, I want to make a function like this:

useEffect(() => {
    const body = document.querySelector("body") || null;
    if (mobileMapState === 3) {
      handleOpenMap();
      body.style.overflow = "hidden";
    } else {
      body.style.overflow = "auto";
    }
  }, [mobileMapState]);

And it happens to me that I want to make sure that bodyit is not nullbefore doing body.style.overflow = "hidden";, for what I am trying to do

body?.style?.overflow = "hidden";

And I get an error from Eslint:

Parsing error: Invalid left-hand side in assignment expression.

so i try

body && body.style.overflow = "hidden";

But the error is the same.

The only way I found to do this was:

  if (body) {
    body.style.overflow = "hidden";
  }

And although it works, I have doubts, such as why I can't use it ?in this case, and if there was a correct way to use it to make the validation shorter.

Thank you very much

I have some tabs, which look like these boxes: I would like to remove the border top of box 2, only in the first 100px so that it looks like the box has a single border.

Does anyone know how I can do something like this? (I attach an image of what I'm looking for in case you don't understand)

.caja1{
  border: 1px solid black;
  border-bottom: 0px;
  width: 100px;
}

.caja2{
  border: 1px solid black;
  width: 500px;
  height: 100px;
}

<div class="caja1">Caja 1</div>
<div class="caja2">Caja 2</div>

I have this code in react, and I hope that when I hover over a section, the function onMouseOverthat I pass by props to the component is executed. This function just prints a console.log of the e.target. The thing is that if I hover over the section, I correctly see <section id="amenities"... />, but if I hover over any inner element of this section, now the inner element is consoled. Is there a way to ALWAYS get as e.targetthe sectioninstead of its inner elements?

<section
  className="resort-amenities"
  id="amenities"
  onMouseEnter={onMouseOver}
 >
  <h2 className="title">Amenities</h2>
  <div className="amenities-wrapper">
    {renderAmenities}
  </div>
</section>

I have a list of news, initially the first 10 come from the API. Then, if I press the "load more" button, the next 10 appear, and so on.

I want to build an html block that respects a structure something like this: (repeating every 10 news, and in the last load that shows the ones there are, which will generally be less than 10)

At startup, the first page was loaded

<div class="row">
 {{ noticia 1 }}
 {{ noticia 2 }}
</div>
<div class="row">
 {{ noticia 3 }}
 {{ noticia 4 }}
</div>
<div class="row">
 {{ noticia 5 }}
 {{ noticia 6 }}
 {{ noticia 7 }}
</div>
<div class="row">
 {{ noticia 8 }}
 {{ noticia 9 }}
 {{ noticia 10 }}
</div>

Click on load more

<div class="row">
 {{ noticia 1 }}
 {{ noticia 2 }}
</div>
<div class="row">
 {{ noticia 3 }}
 {{ noticia 4 }}
</div>
<div class="row">
 {{ noticia 5 }}
 {{ noticia 6 }}
 {{ noticia 7 }}
</div>
<div class="row">
 {{ noticia 8 }}
 {{ noticia 9 }}
 {{ noticia 10 }}
</div>

<div class="row">
 {{ noticia 11 }}
 {{ noticia 12 }}
</div>
<div class="row">
 {{ noticia 13 }}
 {{ noticia 14 }}
</div>
<div class="row">
 {{ noticia 15 }}
 {{ noticia 16 }}
 {{ noticia 17 }}
</div>
<div class="row">
 {{ noticia 18 }}
 {{ noticia 19 }}
 {{ noticia 20 }}
</div>

Sorry for the repetitive code, I wanted to be clear. I don't know how to build this structure inside av-for

My big doubt is regarding the passage of props. When I call a component inside another, I can pass props to it as if they were HTML attributes. But if the component to which I am going to pass said prop is a view component (that is, I do not call it as <MiComponente :prop="miProp" />, but using router) I do not know how a prop would be passed in this case. This is what I tried and it doesn't work:

I have a route that uses the componentCharacter.vue

  {
    path: '/character/:character',
    name: 'Character',
    props: true,
    component: () => import(/* webpackChunkName: "character" */ '../views/Character.vue')
  }

And in another component Card.vue, (in which I have an object in prop.character) I have a function that does the following:

  router.push({
    name: "Character",
    params: {
      character: { ...props.character },
    },
  });

My intention is that when the name route is loaded Character, it has in its propsthe value that comes from the component Card.vue(props.character)

To do this, in the view component Character.vueI have

 props: {
    character: {
      type: Object,
      required: true,
    },
  },

When executing the function Card.vue, I am redirected to a route http://localhost:8080/#/character/[object%20Object], that is, I am passing a string instead of an object. Could someone tell me what is the correct way to receive the object in the view Character.vue? Thank you very much

I'm trying to sort an object but it's not working.

Suppose I have three objects in an array:

let arr = [
  {
   id: 1,
   tipos: [{id_vista: 10, nombre: "emprendimiento", orden: 2}]
  },
  {
   id: 3,
   tipos: [{id_vista: 10, nombre: "emprendimiento", orden: 3}, {id_vista: 12, nombre: "edificio", 
   orden: 1}]
  },
  {
   id:2,
   tipos: [{id_vista: 8, nombre: "desarrollo", orden: 10}, {id_vista: 10, nombre: "emprendimiento", 
   orden: 1}]
  }
 ]

Now, as you will see, I have the "Types" array, which is a property. The type tells me that this object will be listed in one or more views, for example:

The one with id 1 will be listed in Entrepreneurship

The one with id 2 will be listed in Developments and Entrepreneurship

The one with id 3 will be listed in Undertakings and Buildings

Let's suppose that I am in the start-ups view, and I want to order the array arraccording to the property ordenthat is found in the object that is in the array tipos, which has id_vista10 (corresponding to start-ups). I should keep (according to your ids) 2, then 1 and finally 3.

This is what I'm trying but it doesn't work for me:

   let arr = [
      {
       id: 1,
       tipos: [{id: 10, nombre: "emprendimiento", orden: 2}]
      },
      {
       id: 3,
       tipos: [{id: 10, nombre: "emprendimiento", orden: 3}, {id: 12, nombre: "edificio", 
       orden: 1}]
      },
      {
       id:2,
       tipos: [{id: 8, nombre: "desarrollo", orden: 10}, {id: 10, nombre: "emprendimiento", 
       orden: 1}]
      }
     ]

  arr.sort((a,b) => {
          b.tipos.map(e => 
          {
            if(e.id == 10){
              a.tipos.map(f => {
                if(f.id == 10){
                  return e.orden - f.orden
                }
              })
            }
          })
        })
        
        console.log(arr)

I am getting the same array without sorting.

In my backend I have a series of validations when logging in. These validations return errors. I see these errors (from the frontend) in the chrome inspector, in the network tab, filtering the XHR (image).

The thing is that, if I loginput a in my front-end action try catch, the error that it catches (and I show on the console) does not have all the details. It just says Error: Network error: Response not successful: Received status code 500.

I want to show custom alerts and for this it would be good to be able to get the error as I am seeing it in the browser inspector .

Login in the backend

async loginUser(_, { input }) {
        const { errors, valid } = validateLoginInput(input.username, input.password)
        if (!valid) {
            return new UserInputError("Errores:", { errors })
        }
        let user = await User.findOne({ username: input.username })
        if (!user) {
            user = await User.findOne({ email: input.username })
            if (!user) {
                errors.general = "El usuario o e-mail ingresado no se encuentran registrados"
                return new UserInputError("Error de credenciales", { errors })
            }
        }

        const match = await bcrypt.compare(input.password, user.password)

        if (!match) {
            console.log("tengo errores en valid: ",errors)
            errors.general = "La contraseña es incorrecta."
            return new UserInputError("Error de credenciales", { errors })
        }


        const token = generateToken(user)

        return {
            ...user._doc,
            id: user._id,
            password: 'null',
            token
        }
    },

Login on the front end

async loginUser({ commit }, userData) {
    try {
        let { data: { loginUser } } = await apolloClient.mutate({
            mutation: LOGIN_USER,
            variables: userData
        })

        const user = {
            username: loginUser.username,
            email: loginUser.email,
            id: loginUser._id
        }

        const token = loginUser.token
        commit('loginUser', user)
        commit('setToken', token)
        localStorage.setItem('apollo-token', token)
        router.push('/inicio')
    } catch (err) { 
        console.log(err)
        // ACA QUIERO VER EL ERROR DE LA IMAGEN
    }
},

Does anyone know how to do that? I am using Vue 2 with Apollo. Thank you very much.

I have a question with graphQL (actually I have a lot because I just started using it, but this one is punctual)

Let's imagine that I declare a type, for example Usuarios.

type Usuario {
    username: String!
    password: String!
}

And then I have the queryUsuarios

Querys {
    getUsuarios: [Usuario]!
}

If I define this query that instead of returning {Users} , I destruct it and hide the password in this way

{ ...Users, password: null } 

That's when all the questions come in.

The fact that I Usuariohave defined in the type password: String!makes the backend, when it wants to return the user created with the password to null, throw me an error saying that it cannot return null from a non-nullable property.

So, what is the correct way to say that a variable must be of a strict type, but at the same time be able to ''nullify'' it in case it is sensitive data?

On the other hand I don't quite understand the difference between returning [User], [User!], [User]! or [User!]!

From already thank you very much

Edit 24/8 - I'm going to bounty this question to see if someone can explain to me how to override this function, so it works globally in Vue 3.

const device = {
    install(Vue, options) {
        Vue.prototype.$device = devices()
    }
}

The answer that I published myself, although it served me to fulfill the intended purpose, requires moving some files. I would like to be able to modify the plugin to work globally, making use of app.use(directive)in my main.js.

As the question says, I want to get user data. This is because I want to apply a cssdifferent en android chrome, since the address bar occupies part of the screen and the entire site is not visible.

I tried with plugin https://www.npmjs.com/package/vue-device-detector-js

I get the following error:

Uncaught TypeError: Cannot set property '$device' of undefined
at Object.install (index.js:90)
at Object.use (runtime-core.esm-bundler.js:4136)
at eval (main.js:50)
at Module../src/main.js (app.js:7989)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:8758)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925

This is the plugin code, in case someone could find a way to make Vue 3 not have the error with the variable$device

import DeviceDetector from "device-detector-js";
import BotDetector from "device-detector-js/dist/parsers/bot";


const deviceDetector = new DeviceDetector();
const detector = deviceDetector.parse(window.navigator.userAgent);
const botDetector = new BotDetector();
const bot = botDetector.parse(window.navigator.userAgent);

function devices() {

    return {

        isMobile: detector.device.type == "smartphone",
        isTablet: detector.device.type == "tablet",
        isDesktop: detector.device.type == "desktop",

        model: detector.device.model,
        brand: detector.device.brand,
        type: detector.device.type,
        os_name: detector.os,
        os_platform: detector.os.platform,
        os_version: detector.os.version,
        browser_name: detector.client.name,
        browser_version: detector.client.version,
        browser_engine: detector.client.engine,
        browser_engine_version: detector.client.engineVersion,

        browser: {
            chrome: detector.client.name == "Chrome",
            chrome_view: detector.client.name == "Chrome Webview",
            chrome_mobile: detector.client.name == "Chrome Mobile",
            chrome_mobile_ios: detector.client.name == "Chrome Mobile iOS",
            safari: detector.client.name == "Safari",
            safari_mobile: detector.client.name == "Mobile Safari",
            msedge: detector.client.name == "Microsoft Edge",
            msie_mobile: detector.client.name == "IE Mobile",
            msie: detector.client.name == "Internet Explorer"
        },

        os: {
            android: detector.os.name == "Android",
            blackberry: detector.os.name == "BlackBerry OS",
            ios: detector.os.name == "iOS",
            windows: detector.os.name == "Windows",
            windows_phone: detector.os.name == "Windows Phone",
            mac: detector.os.name == "Mac",
            linux: detector.os.name == "GNU/Linux" || detector.os.name == "GNU\/Linux",
            chrome: detector.os.name == "Chrome OS",
            firefox: detector.os.name == "Firefox OS",
            gamingConsole: detector.os.name == "Gaming Console"
        },

        isAndroid: detector.os.name == "Android",
        isBlackberry: detector.os.name == "BlackBerry OS",
        isIOS: detector.os.name == "iOS",
        isWindows: detector.os.name == "Windows",
        isWindowsPhone: detector.os.name == "Windows Phone",
        isOsx: detector.os.name == "Mac",
        isLinux: detector.os.name == "GNU/Linux" || detector.os.name == "GNU\/Linux",
        isChromeOs: detector.os.name == "Chrome OS",
        isFireFoxOS: detector.os.name == "Firefox OS",
        GamingConsole: detector.os.name == "Gaming Console",
        isBot: bot,



        machine: {
            brand: detector.device.brand,
            model: detector.device.model,
            os_name: detector.os.name,
            os_version: detector.os.version,
            type: detector.device.type,
        },
        bot: bot,
        client: detector.client,
        device: detector.device
    }


}

const device = {
    install(Vue, options) {
        Vue.prototype.$device = devices()
    }
}


export default device

I am making a map with react, where there is a marker per province. When I hover on the marker, I want a small div to appear with the name of the province. I implemented it with one and it worked. Now when I want to render all the markers, if I hover over one, I see all 23 divs corresponding to all the markers, and I only want to see the one that corresponds. Should I create 23 states for each cartel?

import React, { useState } from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
import { Marker, InfoWindow } from '@react-google-maps/api';


const containerStyle = {
  width: '90%',
  height: '100%'
};

const center = {
  lat: -34.6037,
  lng: -58.3816
};

function MyComponent() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "xxxxxxxx"
  })


  const [info, setInfo] = useState(false)


  const ubicaciones = [
    { lat: -34.920345, lng: -57.969559, name: "La Plata" },
    { lat: -26.8753965086829, lng: -54.6516966230371, name: "Misiones" },
    { lat: -33.7577257449137, lng: -66.0281298195836, name: "San Luis" },
    { lat: -30.8653679979618, lng: -68.8894908486844, name: "San Juan" },
    { lat: -32.0588735436448, lng: -59.2014475514635, name: "Entre Ríos" },
    { lat: -48.8154851827063, lng: -69.9557621671973, name: "Santa Cruz" },
    { lat: -40.4057957178801, lng: -67.229329893694, name: "Río Negro" },
    { lat: -43.7886233529878, lng: -68.5267593943345, name: "Chubut" },
    { lat: -32.142932663607, lng: -63.8017532741662, name: "Córdoba" },
    { lat: -34.6298873058957, lng: -68.5831228183798, name: "Mendoza" },
    { lat: -29.685776298315, lng: -67.1817359694432, name: "La Rioja" },
    { lat: -27.3358332810217, lng: -66.9476824299928, name: "Catamarca" },
    { lat: -37.1315537735949, lng: -65.4466546606951, name: "La Pampa" },
    { lat: -27.7824116550944, lng: -63.2523866568588, name: "Santiago Del Estero" },
    { lat: -28.7743047046407, lng: -57.8012191977913, name: "Corrientes" },
    { lat: -30.7069271588117, lng: -60.9498369430241, name: "Santa Fe" },
    { lat: -26.9478001830786, lng: -65.3647579441481, name: "Tucumán" },
    { lat: -38.6417575824599, lng: -70.1185705180601, name: "Neuquén" },
    { lat: -24.2991344492002, lng: -64.8144629600627, name: "Salta" },
    { lat: -26.3864309061226, lng: -60.7658307438603, name: "Chaco" },
    { lat: -24.894972594871, lng: -59.9324405800872, name: "Formosa" },
    { lat: -23.3200784211351, lng: -65.7642522180337, name: "Jujuy" },
    { lat: -34.6144934119689, lng: -58.4458563545429, name: "CABA" },
    { lat: -82.52151781221, lng: -50.7427486049785, name: "Tierra Del Fuego" }]






  const handleMouseOver = e => {
    setInfo(true)
  };

  const handleMouseExit = e => {
    setInfo(false)
  };

  const icon = {
    path:
      "M8 12l-4.7023 2.4721.898-5.236L.3916 5.5279l5.2574-.764L8 0l2.3511 4.764 5.2574.7639-3.8043 3.7082.898 5.236z",
    fillColor: "green",
    fillOpacity: 0.9,
    scale: 1.3,
    strokeColor: "black",
    strokeWeight: 1,
  }

  const divStyle = {
    background: `white`,
    border: `1px solid #ccc`,
    padding: 15,
    outline: 'none'
  }


  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={4}
    >
      { /* Child components, such as markers, info windows, etc. */
        <div>
          {ubicaciones.map((e) =>
            <Marker
              position={e}
              icon={icon}
              onMouseOver={handleMouseOver}
              onMouseOut={handleMouseExit}
            > {info && (
              <InfoWindow>
                <div style={divStyle}>
                  <span>Estamos en {e.name}</span>
                </div>

              </InfoWindow>
            )}</Marker>)}
        </div>
      }
      <></>

    </GoogleMap>
  ) : <></>
}

export default React.memo(MyComponent)

I made a component in vue that splits into 3 boxes (I say views and 1 is the main view).

 ---------
|     | 2 |
|  1  |---|
|     | 3 |
 ---------

Initially I have an object that HAS multiple images, and MAY HAVE videos and/or 360 tours.

In box 1, I start by displaying the image gallery.

In box 2 there is a button. If the object has videos, the button is enabled. If I click on the button, the video is placed in box 1, and now box 2 has a preview of the image gallery (with a button that, when clicked, puts it back in view 1)

Box 3 behaves exactly the same as box 2, but with 360 traversal (it's an embedded HTML)

Right now my component is behaving fine and displaying things as it should. But now I want to add one more functionality and I don't know how to deal with it.

I want that, when the user interacts with the component, (for example by browsing the gallery, or playing the video, or browsing the 360 ​​gallery) and then changes views, that they do not lose where they were.

Example: In the gallery, I could keep a variable currentIndexfor example, and I verify in what position it is, and when I change the view (to video or 360) and return to the image gallery, when it is raised, indicate that start at the index.

I did this and it worked, however I can't keep a state of the 360 ​​gallery, it inevitably restarts.

What happens is that, since divsthey have the v-if statement, they conditionally render and mount or unmount their content.

I would like to find a solution (with some CSS) that makes the component load the images, videos, 360 gallery only the first time they are respectively added to view 1.

Then, when exchanging one view with another, the ones are not conditionally replaced (as it happens now), but one main view is superimposed on another. (this way you would never lose the current state of traversal 360)

Then if I unmount the component, there they should be unmounted.

Is it possible to do this without disassembling a lot of what I already did?

Thank you very much.

Here is the component:

 <template>
  <div class="container-multimedia">
    <div class="col-9 container-principal" v-if="mostrando == 1">
      
      <Galleria :value="arrImgs" :numVisible="5" :activeIndex="activeIndex" :showThumbnails="false" :showItemNavigators="true">
        <template #item="slotProps">
          <img
            class="img-galeria"
            :src="slotProps.item.image"
            :alt="slotProps.item.image"
          />
        </template>
        <template #thumbnail="slotProps">
          <img
            class="img-thumb"
            :src="slotProps.item.thumb"
            :alt="slotProps.item.image"
          />
        </template>
      </Galleria>

    </div>
    <div class="col-9 container-principal" v-else-if="mostrando == 2">
      <galeria-video :videos="arrVids" />
    </div>
    <div class="col-9 container-principal" v-else-if="mostrando == 3">
      <galeria-360 :keyVid="arr360[0].key" />
    </div>


    <div class="col-3 barra-lateral">
      
      <div class="container-1 multimedia" v-if="mostrando == 1">
        <div v-if="!arrVids.length" class="content-multimedia no-contenido">
          <!-- No hay video. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(2)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER LA GALERIA DE VIDEOS -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
      </div>

      <div class="container-1 multimedia" v-else-if="mostrando == 2" @click="setMostrando(1)">
        <!-- CLICK ACA PARA VER LA GALERIA DE IMAGENES -->
          <div class="content-multimedia normal">
            <div class="boton circular">
              <i><icon-base width="25" height="25" icon-name="Fotos"><IconFotos /></icon-base></i>
            </div>
          </div>
      </div>

      <div class="container-1 multimedia" v-else-if="mostrando == 3">
        <div v-if="!arrVids.length" class="content-multimedia no-contenido">
          <!-- No hay video. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(2)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER LA GALERIA DE VIDEOS -->
          <div class="boton circular">
            <i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
          </div>
        </div>
      </div>

      <!-- CASOS: 1) Hay fotos, videos y recorrida 360 -->

      <div class="container-2 multimedia" v-if="mostrando == 1">
        <div v-if="!arr360.length" class="content-multimedia no-contenido">
          <!-- No hay recorrido 360. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(3)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER EL RECORRIDO EN 360 -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
      </div>
      <div class="container-2 multimedia" v-if="mostrando == 2" @click="setMostrando(3)">
        <div v-if="!arr360.length" class="content-multimedia no-contenido">
          <!-- No hay recorrido 360. No funciono. -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
        <div v-else @click="setMostrando(3)" class="content-multimedia normal">
          <!-- CLICK ACA PARA VER EL RECORRIDO EN 360 -->
          <div class="boton circular">
            <i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
          </div>
        </div>
      </div>
      <div class="container-2 multimedia" v-if="mostrando == 3" @click="setMostrando(1)">
        <!-- CLICK ACA PARA VER LA GALERIA DE IMAGENES -->
          <div class="content-multimedia normal">
            <div class="boton circular">
              <i><icon-base width="25" height="25" icon-name="Fotos"><IconFotos /></icon-base></i>
            </div>
          </div>
      </div>

    </div>
  </div>
  <multimedia-full-screen :item="item"/>
</template>

<script>
import IconBase from '@/components/IconBase.vue';
import IconFavoritos from '@/assets/iconos/icono-favorito.vue';
import IconVideos from '@/assets/iconos/icono-videos.vue';
import Icon360 from '@/assets/iconos/icono-360.vue';
import IconFotos from "@/assets/iconos/icono-fotos.vue";
import IconPantallaCompleta from "@/assets/iconos/icono-pantalla-completa.vue";

import { ref } from "@vue/reactivity";
import Galleria from "primevue/galleria";
import Galeria360 from "../../../Galeria/Galeria360.vue";
import GaleriaVideo from "../../../Galeria/GaleriaVideo.vue";
import { useStore } from 'vuex';
import MultimediaFullScreen from './MultimediaFullScreen.vue';

import $ from 'jquery'
export default {
  components: {
    IconBase,
    IconFavoritos,
    IconVideos, 
    Icon360,
    IconFotos, 
    IconPantallaCompleta,

    Galleria,
    Galeria360,
    GaleriaVideo,
    MultimediaFullScreen,
  },
  props: ["item"],
  setup(props) {
    const item = ref(null);
    item.value = props.item;

    const store = useStore()

    const arrImgs = ref([]);
    const arrVids = ref([]);
    const arr360 = ref([]);

    const activeIndex = ref(0);

    // Variable para saber qué estoy mostrando: 1- imagenes. 2- video. 3-360
    const mostrando = ref(1);

    const setMostrando = (val) => {
      mostrando.value = val;
    };

    // Obtengo imagenes
    item.value.imagenes.map((e) => {
      let obj = {
        image: e.image,
        thumb: e.thumb,
      };
      arrImgs.value.push(obj);
    });

    // Obtengo videos
    if (item.value.videos.length) {
      item.value.videos.map((e) => {
        let obj = {
          id: e.id,
          titulo: e.title,
          descripcion: e.description,
          provider: e.provider,
          key: e.key_video,
          url: e.url,
          player_url: e.player_url,
        };
        if (e.provider == "matterport") {
          arr360.value.push(obj);
        } else if (e.provider == "youtube") {
          arrVids.value.push(obj);
        }
      });
    }

    const abrirGaleriaFullScreen = () => {
      store.dispatch("propiedadPopup/galeriaFullScreenAction", true);
       setTimeout(() => {
        $("#toolbar1").focus();
      }, 100);
    };

    return { arrImgs, arrVids, arr360, mostrando, setMostrando, activeIndex, abrirGaleriaFullScreen, item };
  },
};
</script>

I have a button similar to the one in the code, that when I click on it (the class is added or removed .active, which does not happen in the SO code editor, so I replaced it .activewith :hover) I want the "little arrow" that is at the beginning turn down, or point right again.

The thing is that, as you will see, when you hover the mouse over the button, the arrow animates and rotates correctly, but when you remove the mouse, the arrow returns abruptly.

My question is: Where or in what way should I place the transition so that it is displayed correctly when the arrow rotates from the bottom to the right?

.titulo-item::before{
    content: '> ';
    font-weight: 700;
    transition: .3s ease all;
}

.titulo-item:hover::before{
    display:inline-block;
    transform: rotate(90deg) !important;
    transition: .3s ease all;
}

.titulo-item{
    cursor:pointer ;
    padding: 1rem 0rem;
    border:none;
    background-color: transparent;
    display: block;
    border-bottom: 1px solid #eeeeee;
    transition: .3s ease all;
    outline:none;
}

  <button class="collapsible titulo-item">
                           Soy un boton
  </button>

I have a list of items that have a delete button with them.

.container-solicitud-cursos .lista-items .caja-item {
    display: grid;
    grid-template-columns: 90% 10%;
    border-bottom: 2px dashed #c6c6c6;
    padding: 1.5em 0em;
}

.container-solicitud-cursos .lista-items .caja-item:first-child {
    padding-top: 0;
}

.container-solicitud-cursos .lista-items .caja-item:last-child {
    border-bottom: 2px solid #c6c6c6;
}

.lista-items .caja-item .item-eliminar {
background-color: #d9d9d9;
color: #808080;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(45deg);
font-size: 40px;
border-radius: 50%;
border: 0px;
}

.lista-items .caja-item .item-eliminar:hover{
    background-color: #dedede;
    color: #adadad;
}

.lista-items .caja-item .item-eliminar::after {
    content: "+";
}

<div class="lista-items">
               <div class="caja-item">
                <div>
                  <div class="item-titulo">Trabajos de extension en vt (1kv)</div>
                  <div class="item-resumen">2 Empleados / 1º Trimestre 2021</div>
                </div>
                <div>
                  <button class="item-eliminar"></button>
                </div>
              </div>

And I see things different in Chrome and in Firefox:

This is how it looks in Chrome, it is the result that I expect

This is how it looks in firefox, and I don't want this.

(I tried to execute this code in both browsers, from the SO snippet and I see the same problem, so if you take this question from one browser to another you will see what I see)

I have the code that is presented below, what I want to do is that the box on the right measures the same as the first (in height), and that the texts of both are attached to bottomtheir respective box.

NOTE: This code, in my project, is inside the tag <header>, and in the browser I see the boxes of the same size. I don't understand why in the SO snippet one is bigger than the other. In my case I see them the same, but I can't adjust the text below.

WHAT I TRIED: Putting the boxes on the outside position: relativeand the one on the inside absoluta; bottom:0px, it partly works but it throws one box on top of the other and it's not what I'm looking for.

AND YES IT IS POSSIBLE: In addition to that, I would like the proportions of the distance between box and box to be maintained when changing resolution. In my case I have a connected monitor with a resolution of 1280x720 and the screen of the note in 1920x1080, and when I drag the browser from one monitor to the other the distances are not respected.

.filter-content {
    margin-left: 1vw;
    float: left;
    border: 1px solid black;
    height: 80%;
}

.logo-holder {
    display: inline;
    float: left;
    margin-left: 1vw;
    font-family: 'century';
    font-size: 2.7em;
    font-weight: 700;
    color: #bbbbbb;
    border: 1px solid black;
    height: 80%;
}

            <div class="logo-holder">
                <div style="">
                    textodellogo
                </div>
            </div>

           
            <div class="filter-content">
                <div class="gallery-filters">
                     <a href="#" style="color:#bbbbbb; margin-right: 1em;" data-filter=".nature">beauty</a>
                <a href="#" style="color:#bbbbbb" data-filter=".models">fashion</a>
</div>
            </div>

People, I hope you understand that this is a special situation. It is a question that does not follow the rules, but right now the world is a mess and I really need if someone can give me a hand with this. Fill me with negatives if you want but please don't close the question.

At my work we are manually uploading some files referring to the complaints reported by people regarding COVID-19. The issue is that this virus is growing exponentially, which is why our work is also growing, and we are behind in statistics, which is partly why the number of known cases is lower than it actually is. Without further ado, I'll show you what I have:

We receive a .doc file (ask in the chat before asking the question here, and they asked me the version of Word. Actually we work with different versions, I have the latest version at home because I am a student and MS gives it away and always updates it , but at work I have 2010, I think the version may not matter since I want to work with text, I could even copy it and take it to a notepad for example)

This .doc file has about 100 texts that have more or less this form

Illicit Investigation – Illicit Port (COVID-19 Coronavirus) – Senior Female 03/19 – PU. 81027 – High 07:06 am – CP Campana; 05:00 a.m. She received a call to XXXX (Dda. XXXX 1000), realizing that her neighbor XXX hers, returned from Brazil the day before, not complying with the isolation protocol. Personal proceeded to provide the corresponding telephone numbers for such cases, giving notice to Health personnel.

Each of these texts must be passed to a table in a database, which has about 20 fields. I would like to at least be able to get the 3 data that I put in bold, which are the date, the Urgent Part number, which is always after PU.and the time, which is always the one after the word alta(since there may be other times in the paragraph, anyway the time I'm looking for is the first one that appears, so you can have those two criteria, or the first appearance, or after "high")

If you don't know how to do it but you know tools that can do it, it would also be of great help to me

The thing is that we are passing them by hand, and this virus is growing by leaps and bounds with it the complaints, and we are not being able to upload this.

The idea is that each new text (could be identified by the appearance of the string PU.) creates a new row (it can be in an excel or access table, it doesn't matter) and place those 3 fields.

I hope you can understand an exceptional question at an exceptional time.

I have a jsonthat I want to travel through ajaxto a file php, and load my database into it, passing each item in the file jsonas a new table row.

ajax:

    var data = { 'data': JSON.stringify(arrayEventos) }

    $.ajax({
        type: 'POST',
        url: 'ajax/turnos.ajax.php',
        dataType: 'json',
        data: data,
        success: function(data, status, xhr) {
            alert("response was " + data);
        },
        error: function(xhr, status, errorMessage) {
            $("#debug").append("RESPONSE: " + xhr.responseText + ", error: " + errorMessage);
        }
    });

value of what I am passing by ajax

data = [{"title":"Agustin Guerra","start":"2020-03-13T09:00:00","end":"2020-03-13T10:00:00"},{"title":"Mariel Guerrieri","start":"2020-03-13T11:30:00","end":"2020-03-13T12:30:00"}]

php where I receive the variable data

<?php

require_once "../modelos/turnos.modelo.php";
class AjaxTurnos{

    public $data;

    public function ajaxActualizarTurnos(){

        $datos = $this->data;


        $respuesta = ModeloTurnos::mdlActualizarTurnos($datos);

        return $respuesta;

    }

}

/*==============================
    ACTUALIZAR TURNOS
    ==============================*/
    if(isset($_POST["data"])){
        $turnos = new AjaxTurnos();
        $turnos -> data = $_POST["data"];
        $turnos -> ajaxActualizarTurnos();
    }

php that saves to the database

static public function mdlActualizarTurnos($datos){

    $tabla = "turnos";
    $stmt1 = Conexion::conectar()->prepare("TRUNCATE $tabla");
    $stmt1->execute();

    $stmt = Conexion::conectar()->prepare("INSERT INTO $tabla(datos) VALUES (:datos)");

    $stmt->bindParam(":datos", $datos, PDO::PARAM_STR);


    if($stmt->execute()){
        return "ok";
    }else{
        return "error";
    }

    $stmt ->close();

    $stmt -> null;
}

What happens to me is that ALL the content of the data variable is saved in the database in a single row:

ID:1 | DATOS: [{"title":"Agustin Guerra","start":"2020-03-13T09:00:00","end":"2020-03-13T10:00:00"},{"title":"Mariel Guerrieri","start":"2020-03-13T11:30:00","end":"2020-03-13T12:30:00"}]

When what I need is to save it as follows:

ID:1 | DATOS: {"title":"Agustin Guerra","start":"2020-03-13T09:00:00","end":"2020-03-13T10:00:00"}

ID:2 | DATOS: {"title":"Mariel Guerrieri","start":"2020-03-13T11:30:00","end":"2020-03-13T12:30:00"}

I tried putting a foreach in itajax.php

    $datos = $this->data;

    foreach($datos as $key => $value){

        $respuesta = ModeloTurnos::mdlActualizarTurnos($value);

    }

but i didn't succeed, any suggestion is welcome.

I have the following problem: I am trying to modulate the system by applying the MVC pattern, and on the one hand I have a file phpfor the header of the page, another for the footer and another for the content. Everything was going well until, when trying to put a content like the one shown in the example, it overlaps the nav and is placed at the top left of the page, as if it had 0 margin top and left.

I want whatever the content was to be placed where it should be, which is below the navigation bar. Any suggestion?

A header.php

       <nav class="navbar navbar-light navbar-expand-md justify-content-center fixed-top pt-0 w-100" id="navigation-bar">
            <div class="container">

                <div class="navbar-collapse collapse justify-content-between align-items-center w-100 " id="collapsingNavbar2">
                    <ul class="topBotomBordersOut navbar-nav mx-auto text-center">
                        <li class="nav-item active pt-4">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item pt-4">
                            <a class="nav-link" href="#">My Glossaries</a>
                        </li>
                        <li class="nav-item pt-4">
                            <a class="nav-link" href="#">Al Glossaries</a>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="navbar-custom-menu float-lg-right">
                <ul class="nav topBotomBordersOut navbar-nav mx-auto text-center">
                    <li class="nav-item pt-4">
                        <a href="#" class="nav-link" data-toggle="dropdown" id="user-button">
                                <img src="" class="user-image">
                                <span class="hidden-xs">Logout</span>

                        </a>

                    </li>
                </ul>
            </div>
        </nav>

And a content.php

<div class="content">

<div class="row">
    <div class="col-4">Aca iria</div>
    <div class="col-4">El contenido</div>
    <div class="col-4">Principal</div>
</div>

I also add everything just cssin case

@import url(http://fonts.googleapis.com/css?family=Numans);
html,
body {
    background-color: #D8A7B1;
    height: 100%;
    font-family: 'Numans', sans-serif;
    }

a {
    color: #fff !important;
}

.nav-item {
    font-family: Century Gothic;
    margin: 0 auto;
    padding: 5em 3em;
    text-align: center;
}

.nav-item a {
    color: #FFF;
    text-decoration: none;
    font: 20px Century Gothic;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
}


/* Top & Bottom Borders Out */

.topBotomBordersOut a:before,
.topBotomBordersOut a:after {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.topBotomBordersOut a:before {
    top: 0px;
    transform: translateY(10px);
}

.topBotomBordersOut a:after {
    bottom: 0px;
    transform: translateY(-10px);
}

.topBotomBordersOut a:hover:before,
.topBotomBordersOut a:hover:after {
    opacity: 1;
    transform: translateY(0px);
}

.container {
    height: 100%;
    align-content: center;
    position: relative;
}

.card {
    height: 370px;
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.social_icon span {
    font-size: 60px;
    margin-left: 10px;
    color: #FAE8E0;
}

.social_icon span:hover {
    color: white;
    cursor: pointer;
}

.card-header h3 {
    color: white;
}

.social_icon {
    position: absolute;
    right: 20px;
    top: -45px;
}

.input-group-prepend span {
    width: 50px;
    background-color: #FAE8E0;
    ;
    color: black;
    border: 0 !important;
}

input:focus {
    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
}

.remember {
    color: white;
}

.remember input {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
}

.login_btn {
    color: black;
    background-color: #FAE8E0;
    width: 100px;
}

.login_btn:hover {
    color: black;
    background-color: white;
}

.links {
    color: white;
}

.links a {
    margin-left: 4px;
}

#user-button {
    text-decoration: none;
}

.navigation-bar {
    position: absolute;
}

.content {
    position: relative;
}

Good day, in addition to having a problem, what I think I have is a theoretical doubt: I have been making a system with several CRUDs applying the MVC model . In all my CRUDs I follow the same steps: file.php which makes the call to controller.php just before the closing of the tag form, controller.php processes and verifies the data, sends it to model.php and it does its thing by communicating with the DB.

What happens to me in the last CRUD is that the button submitof this form, in addition to submitting it, has a couple of actions onClickin a .js file .

I mention this about the actions JSbecause it is the only button submitof all my forms that has this type of behavior, and the CRUD does not work (specifically the Creation of elements)

I strongly suspect that it has something to do with the fact that the button executes actions in JS, but I'm not sure and that's why I'm missing something. I would appreciate it if you could help me.

Here is my code:

create-menu.php

  <div class="card-footer">
    <button type="submit" class="botonGuardar">Guardar Menú</button>
  </div>
</form>
<?php
  $crearMenu = new ControladorViandas();
  $crearMenu -> ctrCrearVianda();
?>

EDIT 1 : I have already tried putting this code phpboth inside and outside the tags form, with the same result in both attempts.

menu.js with this action, I collect data from the form and save it as an stringin valof an element of my html, to collect it later with the variables $_POST[]. I don't know if it's a good idea.

$(".botonGuardar").click(function() {

// Creo el objeto JSON 

listaIngredientes = [];

$(".listaIngredientes").each(function() {
    var ingrediente = $(this).children(".col-6").children().children(".nuevoNombreIngrediente").val();
    var cantidad = $(this).children(".col-2").children(".nuevaCantidadIngrediente").val();
    var precio = $(this).children(".ingresoPrecio").children().children(".precioIngrediente").val();
    var unidad = $(this).children(".div-unidad").children(".unidad-de-medida").val()


    listaIngredientes.push({
        "ingrediente": ingrediente,
        "cantidad": cantidad,
        "unidad": unidad,
        "precio": precio
    })
})



$("#ingredientesFinal").val(JSON.stringify(listaIngredientes));


});

controller.php As you can see, there are some console messages jsin the php code . When I go to create-menu.php the console throws a "there is no post new menu variable", but when I send the form it doesn't throw any of the two consoles. It's like it never reruns the method to create a new menu/package

 static public function ctrCrearVianda(){

    if(isset($_POST["nuevoMenu"])){
        echo '<script>console.log("hay variable post nuevo menu")</script>';

        if(  preg_match('/^[a-zA-Z0-9ñÑáéíóúÁÉÍÓÚüÜ ]+$/', $_POST["nuevoMenu"])) {
            $tabla = "viandas";

            $datos = array(
            "nombre" => $_POST["nuevoMenu"],
            "id_cliente" => $_POST["seleccionarCliente"],
            "productos" => $_POST["ingredientesFinal"],
            "costo" => $_POST["nuevoPrecioMenu"],
            "dmc" => $_POST["nuevoDmc"]
            );

           $respuesta = ModeloViandas::mdlCrearVianda($tabla,$datos);

           if($respuesta == "ok"){

            // El menu se creó correctamente

            echo '<script>
            swal.fire({
                type: "success",
                title: "El menu ha sido creado correctamente",
                showConfirmButton: true,
                confirmButtonText: "Cerrar",
                closeOnConfirm: false

            }).then(function(result){
                if(result.value){
                    var url = window.location
                    var parts = url.toString().split("/");
                    var lastSegment = parts.pop() || parts.pop();
                    window.location = lastSegment;

                }   

            });
            </script>';
        } 
        }else{
            //EL NOMBRE DE MENU NO PUEDE LLEVAR CARACTERES ESPECIALES
        }
    }else{
        echo '<script>console.log("no hay variable post nuevo menu")</script>';
    }


}

model.php Finally I leave the model, although it is in vain because I am almost sure that it is fine, and also the error returned by the system means that it does not directly interact with this file.

 /*============================================
CARGAR VIANDA
============================================*/

static public function mdlCrearVianda($tabla, $datos){


    $stmt = Conexion::conectar()->prepare("INSERT INTO $tabla(nombre, id_cliente, productos, costo, dmc) VALUES ( :nombre, :id_cliente, :productos, :costo, :dmc)");   

    $stmt->bindParam(":nombre", $datos["nombre"], PDO::PARAM_STR);
    $stmt->bindParam(":id_cliente", $datos["id_cliente"], PDO::PARAM_STR);
    $stmt->bindParam(":productos", $datos["productos"], PDO::PARAM_STR);
    $stmt->bindParam(":costo", $datos["costo"], PDO::PARAM_STR);
    $stmt->bindParam(":dmc", $datos["dmc"], PDO::PARAM_STR);


    if($stmt->execute()){

        return "ok";

    }else{
        return "error";
    }

    $stmt -> close();

    $stmt = null;



}

I have the following string

[{"idServicio":10},{"idServicio":11},{"idServicio":12}]

and what I want to do is remove an element from the value of the idService, for example removing the id value 11, and something like this:

[{"idServicio":10},{"idServicio":12}]

Could you help me with the method substrbut I wanted to know if there is a method or function to which I pass the value of the id and delete it in a single line of code, without worrying about the location of the element and the commas.

For me it is a JSON, but the JS console tells me that it is a string (could it be both?) That is why the title of the question is like this. If I have misconceptions I appreciate any comment, I'm taking my first steps.

Thank you very much