Início / user-10847401

pileup's questions

Martin Hope
pileup
Asked: 2025-04-29 14:40:03 +0800 CST
  • 5

Não tenho certeza de qual é a utilidade do URL de login, como visto aqui:

https://learn.microsoft.com/en-us/entra/identity/enterprise-apps/media/add-application-portal-setup-sso/saml-configuration.png

(Fonte: https://learn.microsoft.com/en-us/entra/identity/enterprise-apps/add-application-portal-setup-sso )

Editar: Na imagem acima, o URL de login está marcado como required, mas no meu caso diz optional.

Pelo que entendi, se eu configurar essa URL, ela redirecionará a resposta SAML de volta para essa URL em vez do ACS para login posterior no lado do SP.

Então, se, por exemplo, meu aplicativo precisar de uma página de login após ser autenticado pelo IDP, ele será redirecionado para uma página de login.

Mas por que não posso simplesmente usar o ACS para redirecionar para uma página de login?

Martin Hope
pileup
Asked: 2024-11-06 22:06:04 +0800 CST
  • 5

Tenho uma matriz de objetos da hierarquia da empresa que preciso enviar para o backend:

selectedTeams: [
  0: {team: "some_team_1", division: "some_division_1"}
  1: {team: "some_team_2", division: "some_division_2"}
  2: {team: "some_team_3", division: "some_division_3"}
]

Estou tentando fazer o seguinte usando URLSearchParams:

const urlParams = new URLSearchParams();
urlParams.append('selected_teams', selectedTeams)
fetch(`${backendUrl}?` + urlParams)
  .then(..)

Mas é nullporque claramente não está correto.

Qual é a maneira correta de fazer isso? Posso alterar os tipos de dados se necessário (por exemplo, alterá-los de array de objetos para objeto de objetos etc.)

javascript
Martin Hope
pileup
Asked: 2024-09-04 02:07:14 +0800 CST
  • 5

Eu segui este exemplo para criar um mapa simples com um ponto de marcador circular: https://openlayers.org/en/latest/examples/icon-color.html

Este é meu código atual:

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Point from 'ol/geom/Point.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';

const rome = new Feature({
  geometry: new Point(fromLonLat([12.5, 41.9])),
});

rome.setStyle(
  new Style({
    image: new Icon({
      color: '#BADA55',
      crossOrigin: 'anonymous',
      src: 'data/dot.svg',
    }),
  }),
);

const vectorSource = new VectorSource({
  features: [rome],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const tileLayer = new TileLayer({
  source: new OSM()
});

const map = new Map({
  layers: [tileLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: fromLonLat([2.896372, 44.6024]),
    zoom: 3,
  }),
});

E agora eu quero poder clicar no ponto e mudar sua posição para um novo ponto, dada uma nova longitude e latitude.

Procurei na documentação por Point: https://openlayers.org/en/latest/apidoc/module-ol_geom_Point-Point.html

Mas eles são realmente confusos, e não consegui encontrar uma maneira de tornar o ponto acima clicável e movido para um novo local (neste caso, eu só quero movê-lo para um local próximo, dada uma longitude e latitude fixas)

Os documentos são realmente confusos

openlayers
Martin Hope
pileup
Asked: 2024-05-25 16:15:30 +0800 CST
  • 5

Fiz uma tabela com colunas redimensionáveis. Estou definindo a largura do thelemento. Mas parece que não me permitirá definir a largura abaixo da largura do arquivo mais longo td.

O que eu quero fazer é permitir que as colunas sejam redimensionadas para um valor mínimo.

O que funcionou para permitir que o conteúdo tdfosse menor que o conteúdo foi set max-width, porém não quero ter um max-width. E se bem me lembro, min-widthnão funciona em tabelas.

Tenho algo a fazer sobre isso? Ou, neste caso, é melhor tentar criar uma tabela usando CSS Grid?

Meu objetivo é permitir o redimensionamento das colunas abaixo do thconteúdo tde e mostrar reticências (com ...)

activateTableResize();

function activateTableResize() {
  let table, tableContainer, resizeable, currentResizeBar, currentTh, tableFirstRow, tableRect, currentResizeBarRect;
  document.addEventListener("mousedown", (event) => {
    if (event.target.closest('.resize-bar')) {
      resizeable = true;
      currentResizeBar = event.target;
      currentTh = event.target.closest('th');
      table = document.getElementById('my-table');
      tableContainer = document.getElementById('my-table-container');
      tableFirstRow = table.querySelector('tbody tr');
      tableRect = tableContainer.getBoundingClientRect();
      currentResizeBarRect = currentResizeBar.getBoundingClientRect();
      document.querySelector("body").style.cursor = "col-resize";
      document.querySelector("body").style.userSelect = "none";
    }
  });

  document.addEventListener("mousemove", (event) => {
    if (resizeable) {
      if (event.clientX + 5 < tableContainer.getBoundingClientRect().right) {
        let distanceMoved = event.clientX - currentTh.getBoundingClientRect().x;
        currentTh.style.width = `${distanceMoved}px`;
      }
    }
  });

  document.addEventListener("mouseup", (event) => {
    document.querySelector("body").style.cursor = "default";
    document.querySelector("body").style.userSelect = "default";
    resizeable = false;
  });
}
#my-table-container {}

#my-table {
  margin: 0;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

#my-table thead {
  border-top: 2px solid rgb(140 140 140);
  border-left: 2px solid rgb(140 140 140);
}

#my-table th {
  position: relative;
  margin: 0;
  padding: 0;
}

#my-table th:first-child {
  width: 150px;
}

#my-table th .resize-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: black;
  cursor: col-resize;
}

#my-table tbody td div.cell-container,
#my-table thead th div.cell-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div id="my-table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th scope="col">
          <div class="cell-container">Name<span class="resize-bar"><span></div></th>
                <th scope="col"><div class="cell-container">Type<span class="resize-bar"><span></div></th>
                <th scope="col"><div class="cell-container">Size<span class="resize-bar"></span></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="cell-container">James Smith</div>
        </td>
        <td>
          <div class="cell-container">20</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell-container">Jane Doe</div>
        </td>
        <td>
          <div class="cell-container">19</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

javascript
Martin Hope
pileup
Asked: 2024-05-22 05:29:49 +0800 CST
  • 5

Quero adicionar a contagem de linhas por grupo de uma das colunas. Funciona bem com consultas regulares, mas não com paginação porque cada página inicia a contagem em 0.

Por exemplo, tenho a seguinte tabela:

id | category_id | item_id | created_at
---|-------------|---------|-----------
 7 |      11     |   106   | 2024-05-06
 6 |      3      |   102   | 2024-05-06
 5 |      11     |   101   | 2024-05-05
 4 |      9      |   98    | 2024-05-04
 3 |      3      |   97    | 2024-05-03
 2 |      1      |   91    | 2024-05-02
 1 |      11     |   89    | 2024-05-01

E quero contar em que ordem item_idestá sua categoria até a data de criação.

Para isso estou usando a seguinte consulta:

DB::('table')->select(
    table.*,
    DB::raw('ROW_NUMBER() OVER(PARTITION BY category_id ORDER BY created_at) as order')
)->get();

Que é o mesmo que a seguinte consulta bruta:

SELECT table.*, ROW_NUMBER() OVER(PARTITION BY category_id ORDER BY created_at) as order 
FROM table

E isso resulta em:

id | category_id | item_id | created_at | order
---|-------------|---------|------------|-------
 7 |      11     |   106   | 2024-05-06 |    3
 6 |      3      |   102   | 2024-05-06 |    2
 5 |      11     |   101   | 2024-05-05 |    2
 4 |      9      |   98    | 2024-05-04 |    1
 3 |      3      |   97    | 2024-05-03 |    1
 2 |      1      |   91    | 2024-05-02 |    1  
 1 |      11     |   89    | 2024-05-01 |    1

Mas não funcionará com paginação porque cada página tem seu próprio subconjunto e a contagem começa em outra linha, se por exemplo eu paginar a tabela acima a cada 4 resultados e terminar com 2 páginas, então a página número 2 resultaria em a seguir:

id | category_id | item_id | created_at | order
---|-------------|---------|------------|-------
 7 |      11     |   106   | 2024-05-06 |    2
 6 |      3      |   102   | 2024-05-06 |    1
 5 |      11     |   101   | 2024-05-05 |    1

Mas eu quero que seja

id | category_id | item_id | created_at | order
---|-------------|---------|------------|-------
 7 |      11     |   106   | 2024-05-06 |    3
 6 |      3      |   102   | 2024-05-06 |    2
 5 |      11     |   101   | 2024-05-05 |    2

Como eu posso fazer isso?

sql
Martin Hope
pileup
Asked: 2024-01-09 20:43:24 +0800 CST
  • 6

Como posso detectar se um clique está dentro de um elemento cujo ouvinte está selecionado por uma classe?

Por exemplo, tenho alguns elementos com nome de classe "my-class":

<div class="my-class">
    <button>Hello</button>
    <p>World</p>
</div>
<div class="my-class">
    <a href="">Click</a>
    <a href="">Here</a>
</div>

Se eu apenas ouvir a aula, não funcionará se o clique for feito nos elementos internos:

document.addEventListener("click", function(event) {
    if(event.target.classList.contains("my-class") {
        // 
    }
});

Como também posso detectar cliques em qualquer um dos elementos internos?

Encontrei a seguinte pergunta, mas funciona apenas para um único elemento que foi selecionado por um id e sem delegação: Detectar clique dentro/fora do elemento com manipulador de evento único

javascript