open-split/index.html at master · jjsantos01/open-split · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open-split</title>
    <link rel="stylesheet" href="styles.css">
    <!-- PyScript CSS -->
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.10.1/core.css">
    <!-- This script tag bootstraps PyScript -->
    <script type="module" src="https://pyscript.net/releases/2024.10.1/core.js"></script>
</head>
<body>
    <h1>Open Split - Divisor de Gastos</h1>

    <p>
      Esta aplicación te ayuda a dividir gastos entre un grupo de personas de manera flexible y equitativa.
      Puedes especificar diferentes formas de dividir cada gasto, desde división equitativa hasta montos específicos por persona.
    </p>

    <p>
      Para comenzar, introduce tus gastos en una hoja de cálculo de Google y copia la URL a continuación.
    </p>

    <div id="main-content">
      <div>
        <label for="sheet-url">URL de la Hoja de Cálculo:</label>
        <input id="sheet-url" type="text" placeholder="https://docs.google.com/spreadsheets/d/{ID}/edit?usp=sharing"/>
      </div>
      <div>
        <label for="extra-participants">Participantes adicionales (no vienen en la hoja de cálculo):</label>
        <input id="extra-participants" type="text" placeholder="participante1,participante2"/>
      </div>
      <button id="sheet-url-btn" type="submit" py-click="calculate_from_url">
          Calcular
      </button>
      <div id="results"></div>
    </div>

    <div class="tip">
      Para llenar la hoja de cálculo, sigue las <a href="#instrucciones">instrucciones de más abajo</a>.
    </div>

    <div class="warning">
      La hoja de calculo debe ser visible públicamente para que la aplicación pueda acceder a ella.
    </div>


    <div class="tip">
      <p>Si no tienes una hoja de cálculo, puedes usar este ejemplo para comenzar:
      https://docs.google.com/spreadsheets/d/1dsHb32ksG2k_YNeneAodtBOU_xsmXlcK8ClqK9L0fRk/edit?usp=sharing</p>
    </div>

    <script type="py" src="./main.py" config="./pyscript.toml"></script>

    <h2 id="instrucciones">Estructura de la Hoja de Cálculo</h2>
    <p>La hoja de cálculo debe tener las siguientes columnas:</p>
    <table>
        <tr>
            <th>Columna</th>
            <th>Descripción</th>
            <th>Obligatorio</th>
        </tr>
        <tr>
            <td>item</td>
            <td>Descripción del gasto (ej: "Supermercado", "Gasolina")</td>
            <td>Sí</td>
        </tr>
        <tr>
            <td>name</td>
            <td>Nombre de quien realizó el pago</td>
            <td>Sí</td>
        </tr>
        <tr>
            <td>amount</td>
            <td>Monto total del gasto</td>
            <td>Sí</td>
        </tr>
        <tr>
            <td>participants</td>
            <td>Quiénes participan en el gasto y cómo se divide</td>
            <td>No</td>
        </tr>
    </table>

    <p>Por ejemplo:</p>
    <img src="images/ejemplo_1.png" alt="Ejemplo de hoja de cálculo">

    <h2>Formas de Dividir los Gastos</h2>

    <h3>1. División Equitativa entre Todos</h3>
    <div class="example">
        <p>Deja la columna 'participants' vacía para dividir el gasto equitativamente entre todos los participantes.</p>
        <table>
            <tr>
                <th>item</th>
                <th>name</th>
                <th>amount</th>
                <th>participants</th>
            </tr>
            <tr>
                <td>Snacks</td>
                <td>María</td>
                <td>430</td>
                <td></td>
            </tr>
        </table>
    </div>

    <p>Por ejemplo:</p>
    <img src="images/ejemplo_1.png" alt="Ejemplo de hoja de cálculo">
    <p>
      En este caso, todos los gastos se dividirán por igual entre Ana, Luis, María y Pedro.
    </p>
    <div class="tip">
      Puedes usar el campo de "participantes adicionales" para incluir a aquellos participantes que no hicieron un gasto o cuyo nombre no aparece en la hoja de cálculo. Estos participantes solo serán considerados en todos los gastos donde participan todos. Los nombres de los participantes deben ponerse separados por comas.
    </div>

    <h3>2. División Equitativa entre Algunos</h3>
    <div class="example">
        <p>Lista los nombres de los participantes separados por comas:</p>
        <table>
            <tr>
                <th>item</th>
                <th>name</th>
                <th>amount</th>
                <th>participants</th>
            </tr>
            <tr>
                <td>Gasolina</td>
                <td>Luis</td>
                <td>720</td>
                <td>Luis,Ana</td>
            </tr>
        </table>
      <p>En este caso, el gasto se dividirá equitativamente solo entre Luis y Ana. Pedro y María no participarán en este gasto.</p>
    </div>


    <p>Por ejemplo:</p>
    <img src="images/ejemplo_2.png" alt="Ejemplo de hoja de cálculo">

    <h3>3. División con Montos Específicos</h3>
    <div class="example">
        <p>Usa el símbolo = para asignar montos específicos:</p>
        <table>
            <tr>
                <th>item</th>
                <th>name</th>
                <th>amount</th>
                <th>participants</th>
            </tr>
            <tr>
                <td>Almuerzo</td>
                <td>Ana</td>
                <td>1500</td>
                <td>Ana=1000,Luis=200,María=300</td>
            </tr>
        </table>
        <p>En este caso, Ana pagará $1000, Luis $200 y María $300.</p>
    </div>

    <p>Por ejemplo:</p>
    <img src="images/ejemplo_3.png" alt="Ejemplo de hoja de cálculo">

    <h3>4. División Mixta</h3>
    <div class="example">
        <p>Combina montos específicos con división equitativa del resto:</p>
        <table>
            <tr>
                <th>item</th>
                <th>name</th>
                <th>amount</th>
                <th>participants</th>
            </tr>
            <tr>
                <td>Super</td>
                <td>Ana</td>
                <td>950</td>
                <td>Ana=250,Luis,María</td>
            </tr>
        </table>
        <p>En este ejemplo, Ana pagará $250 y el resto se dividirá equitativamente entre Luis y María, es decir, $350 cada uno.</p>
    </div>

    <h2>Consejos y Advertencias</h2>

    <div class="tip">
        Para una división equitativa entre varios participantes, simplemente lista sus nombres separados por comas sin usar el símbolo =.
    </div>

    <div class="tip">
      Si quieres incluir a alguien que no ha hecho ningún gasto, añádelo en el campo de "participantes adicionales" separado por comas.
    </div>

    <div class="warning">
        La suma de los montos específicos no puede exceder el monto total del gasto.
    </div>

    <div class="tip">
        Si algunos participantes tienen montos específicos y otros no, el monto restante se dividirá equitativamente entre los participantes sin monto específico.
        Por ejemplo, si Ana=500,Luis,María, María pagará el monto restante de forma equitativa con Ana y Luis.
    </div>

    <div class="warning">
        Todos los nombres en la columna 'participants' deben corresponder exactamente a los nombres de los participantes del grupo. Si hay un error de ortografía, como "Ana" en lugar de "ana", la aplicación no podrá dividir el gasto correctamente.
    </div>

    <div class="tip">
        Revisa siempre el resumen generado por la aplicación para verificar que los gastos se hayan dividido como esperas.
    </div>

    <div class="warning">
        La aplicación no guarda ni almacena ninguna información de las hojas de cálculo que procesa, tus datos son privados y nunca salen de tu navegador.
    </div>

    <footer>
      <p>
        Creado por <a href="https://twitter.com/jjsantoso" target="_blank">@jjsantoso</a>
        - <a href="https://github.com/jjsantos01" target="_blank">GitHub</a>
        - <a href="https://www.jjsantoso.com/" target="_blank">Web</a>

      </p>
    </footer>


</body>
</html>