finalize sight, station, route, vehicle routes

2025-03-16 23:47:26 +03:00 · 2025-03-16 23:47:26 +03:00 · bcce7f9d73
commit bcce7f9d73
parent 34620d5a64
13 changed files with 139 additions and 95 deletions
--- a/src/globals.css
+++ b/src/globals.css
@ -1,2 +1,9 @@
@import './stylesheets/hidden-functionality.css';
@import './stylesheets/markdown-editor.css';
+
+.limited-text {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
--- a/src/pages/city/create.tsx
+++ b/src/pages/city/create.tsx
@ -52,7 +52,7 @@ export const CityCreate = () => {
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
-          label={'Название *'}
+          label={'Название'}
          name="name"
        />
      </Box>
--- a/src/pages/media/show.tsx
+++ b/src/pages/media/show.tsx
@ -1,6 +1,7 @@
 import {Stack, Typography} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
 import {MEDIA_TYPES} from '../../lib/constants'

 export const MediaShow = () => {
--- a/src/pages/route/create.tsx
+++ b/src/pages/route/create.tsx
@ -1,4 +1,4 @@
-import {Box, TextField, FormControlLabel, Checkbox} from '@mui/material'
+import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
 import {Create} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
@ -51,8 +51,13 @@ export const RouteCreate = () => {
          name="route_direction" // boolean
          control={control}
          defaultValue={false}
-          render={({field}: {field: any}) => <FormControlLabel control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} label="Направление маршрута" />}
+          render={({field}: {field: any}) => <FormControlLabel label="Прямой маршрут?" control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} />}
        />
+
+        <Typography variant="caption" color="textSecondary" sx={{mt: 0, mb: 1}}>
+          (Прямой / Обратный)
+        </Typography>
+
        <TextField
          {...register('path', {
            required: 'Это поле является обязательным',
--- a/src/pages/route/edit.tsx
+++ b/src/pages/route/edit.tsx
@ -1,4 +1,4 @@
-import {Box, TextField, FormControlLabel, Checkbox} from '@mui/material'
+import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
 import {Edit} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
@ -46,8 +46,13 @@ export const RouteEdit = () => {
          name="route_direction" // boolean
          control={control}
          defaultValue={false}
-          render={({field}: {field: any}) => <FormControlLabel control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} label="Направление маршрута" />}
+          render={({field}: {field: any}) => <FormControlLabel label="Прямой маршрут?" control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} />}
        />
+
+        <Typography variant="caption" color="textSecondary" sx={{mt: 0, mb: 1}}>
+          (Прямой / Обратный)
+        </Typography>
+
        <TextField
          {...register('path', {
            required: 'Это поле является обязательным',
--- a/src/pages/route/show.tsx
+++ b/src/pages/route/show.tsx
@ -10,9 +10,10 @@ export const RouteShow = () => {

  const fields = [
    // {label: 'ID', data: 'id'},
-    {label: 'ID перевозчика', data: 'carrier_id'},
+    // {label: 'ID перевозчика', data: 'carrier_id'},
+    {label: 'Перевозчик', data: 'carrier'},
    {label: 'Номер маршрута', data: 'route_number'},
-    {label: 'Путь', data: 'path'},
+    {label: 'Путь', data: 'path'}, // #
  ]

  return (
@ -31,7 +32,7 @@ export const RouteShow = () => {
          <Typography variant="body1" fontWeight="bold">
            Направление маршрута
          </Typography>
-          <TextField value={record?.route_direction ? 'ДА' : 'НЕТ'} />
+          <TextField style={{color: record?.route_direction ? '#48989f' : '#7f6b58'}} value={record?.route_direction ? 'прямое' : 'обратное'} />
        </Stack>
      </Stack>
    </Show>
--- a/src/pages/sight/edit.tsx
+++ b/src/pages/sight/edit.tsx
@ -59,6 +59,7 @@ export const SightEdit = () => {
          label={'Долгота'}
          name="longitude"
        />
+
        <Controller
          control={control}
          name="city_id"
--- a/src/pages/sight/show.tsx
+++ b/src/pages/sight/show.tsx
@ -99,9 +99,10 @@ export const SightShow = () => {
  const fields = [
    // {label: 'ID', data: 'id'},
    {label: 'Название', data: 'name'},
-    {label: 'Широта', data: 'latitude'},
-    {label: 'Долгота', data: 'longitude'},
-    {label: 'ID города', data: 'city_id'},
+    // {label: 'Широта', data: 'latitude'}, #
+    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'ID города', data: 'city_id'},
+    {label: 'Город', data: 'city'},
  ]

  return (
@ -126,14 +127,23 @@ export const SightShow = () => {
              <Typography>Загрузка статей...</Typography>
            ) : linkedArticles.length > 0 ? (
              linkedArticles.map((article) => (
-                <Box key={article.id} sx={{border: '2px solid #dddddd25', padding: '20px', marginBottom: '8px'}}>
+                <Box key={article.id} sx={{border: '2px solid #dddddd25', padding: '14px', marginBottom: '8px', borderRadius: 2}}>
                  <Stack gap={1}>
                    <Typography variant="h5">
                      <strong>{article.heading}</strong>
                    </Typography>
-                    <Typography>{article.body}</Typography>

-                    <Button variant="outlined" color="error" onClick={() => deleteArticle(article.id)} sx={{mt: 2}}>
+                    <Typography
+                      className="limited-text"
+                      sx={{
+                        whiteSpace: 'pre-wrap',
+                        lineClamp: 3,
+                      }}
+                    >
+                      {article.body}
+                    </Typography>
+
+                    <Button variant="outlined" color="error" onClick={() => deleteArticle(article.id)} sx={{mt: 1.5}}>
                      Отвязать статью
                    </Button>
                  </Stack>
--- a/src/pages/station/show.tsx
+++ b/src/pages/station/show.tsx
@ -13,6 +13,8 @@ type SightItem = {
  latitude: number
  longitude: number
  city_id: number
+  city: string
+  [key: string]: string | number
 }

 export const StationShow = () => {
@ -98,17 +100,18 @@ export const StationShow = () => {
  const fields = [
    // {label: 'ID', data: 'id'},
    {label: 'Название', data: 'name'},
-    {label: 'Широта', data: 'latitude'},
-    {label: 'Долгота', data: 'longitude'},
+    // {label: 'Широта', data: 'latitude'}, #
+    // {label: 'Долгота', data: 'longitude'}, #
    {label: 'Описание', data: 'description'},
  ]

-  const sightFields = [
-    // {label: 'ID', data: 'id' as keyof SightItem},
-    {label: 'Название', data: 'name' as keyof SightItem},
-    {label: 'Широта', data: 'latitude' as keyof SightItem},
-    {label: 'Долгота', data: 'longitude' as keyof SightItem},
-    {label: 'ID города', data: 'city_id' as keyof SightItem},
+  const sightFields: Array<{label: string; data: keyof SightItem}> = [
+    // {label: 'ID', data: 'id'},
+    {label: 'Название', data: 'name'},
+    // {label: 'Широта', data: 'latitude'}, #
+    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'ID города', data: 'city_id'},
+    {label: 'Город', data: 'city'},
  ]

  return (
@ -125,41 +128,41 @@ export const StationShow = () => {

        <Stack gap={2}>
          <Typography variant="body1" fontWeight="bold">
-            Привязанные виды
+            Привязанные достопримечательности
          </Typography>

          <Grid container gap={2}>
            {sightsLoading ? (
-              <Typography>Загрузка видов...</Typography>
+              <Typography>Загрузка достопримечательностей...</Typography>
            ) : linkedSights.length > 0 ? (
              linkedSights.map((sight, index) => (
-                <Box key={index} sx={{border: '2px solid #dddddd25', padding: '20px', marginBottom: '8px'}}>
+                <Box key={index} sx={{border: '2px solid #dddddd25', padding: '14px', marginBottom: '8px', borderRadius: 2}}>
                  <Stack gap={0.5}>
                    {sightFields.map(({label, data}) => (
                      <Typography key={data}>
-                        <strong>{label}:</strong> {sight?.[data]}
+                        <strong>{label}:</strong> {sight[data]}
                      </Typography>
                    ))}

-                    <Button variant="outlined" color="error" onClick={() => deleteSight(sight?.id)} sx={{mt: 2}}>
+                    <Button variant="outlined" color="error" onClick={() => deleteSight(sight?.id)} sx={{mt: 1.5}}>
                      Отвязать
                    </Button>
                  </Stack>
                </Box>
              ))
            ) : (
-              <Typography>Виды не найдены</Typography>
+              <Typography>Достопримечательности не найдены</Typography>
            )}
          </Grid>

          <Stack gap={2}>
            <Typography variant="body1" fontWeight="bold">
-              Привязать вид
+              Привязать достопримечательность
            </Typography>

            <FormControl fullWidth>
-              <InputLabel>Вид</InputLabel>
-              <Select value={selectedSightId} onChange={(e) => setSelectedSightId(Number(e.target.value))} label="Вид" fullWidth>
+              <InputLabel>Достопримечательность</InputLabel>
+              <Select value={selectedSightId} onChange={(e) => setSelectedSightId(Number(e.target.value))} label="Достопримечательность" fullWidth>
                {availableSights.map((sight) => (
                  <MenuItem key={sight.id} value={sight.id}>
                    {sight.name}
--- a/src/pages/vehicle/create.tsx
+++ b/src/pages/vehicle/create.tsx
@ -1,4 +1,4 @@
-import {Autocomplete, Box, TextField, FormControl, InputLabel, Select, MenuItem, Typography} from '@mui/material'
+import {Autocomplete, Box, TextField} from '@mui/material'
 import {Create, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
@ -32,33 +32,34 @@ export const VehicleCreate = () => {
          fullWidth
          InputLabelProps={{shrink: true}}
          type="number"
-          label="Номер рейса"
+          label="Бортовой номер"
          name="tail_number"
        />

-        <FormControl fullWidth margin="normal" error={!!errors.type}>
-          <InputLabel id="vehicle-type-label">Выберите тип</InputLabel>
-          <Select
-            labelId="vehicle-type-label"
-            label="Выберите тип"
-            {...register('type', {
+        <Controller
+          control={control}
+          name="type"
+          rules={{
            required: 'Это поле является обязательным',
-              valueAsNumber: true,
-            })}
-            defaultValue=""
-          >
-            {VEHICLE_TYPES.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </Select>
-          {errors.type && (
-            <Typography variant="caption" color="error">
-              {!!(errors as any)?.message}
-            </Typography>
+          }}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              options={VEHICLE_TYPES}
+              value={VEHICLE_TYPES.find((option) => option.value === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.value || null)
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.label : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.value === value?.value
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите тип" margin="normal" variant="outlined" error={!!errors.type} helperText={(errors as any)?.type?.message} required />}
+            />
          )}
-        </FormControl>
+        />

        <Controller
          control={control}
--- a/src/pages/vehicle/edit.tsx
+++ b/src/pages/vehicle/edit.tsx
@ -1,17 +1,23 @@
-import {Autocomplete, Box, TextField, FormControl, InputLabel, Select, MenuItem, Typography} from '@mui/material'
+import {Autocomplete, Box, TextField} from '@mui/material'
 import {Edit, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'

 import {VEHICLE_TYPES} from '../../lib/constants'

+type VehicleFormValues = {
+  tail_number: number
+  type: number
+  city_id: number
+}
+
 export const VehicleEdit = () => {
  const {
    saveButtonProps,
    register,
    control,
    formState: {errors},
-  } = useForm({})
+  } = useForm<VehicleFormValues>({})

  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
    resource: 'city',
@ -31,33 +37,34 @@ export const VehicleEdit = () => {
          fullWidth
          InputLabelProps={{shrink: true}}
          type="number"
-          label="Номер рейса"
+          label="Бортовой номер"
          name="tail_number"
        />

-        <FormControl fullWidth margin="normal" error={!!errors.type}>
-          <InputLabel id="vehicle-type-label">Выберите тип</InputLabel>
-          <Select
-            labelId="vehicle-type-label"
-            label="Выберите тип"
-            {...register('type', {
+        <Controller
+          control={control}
+          name="type"
+          rules={{
            required: 'Это поле является обязательным',
-              valueAsNumber: true,
-            })}
-            defaultValue=""
-          >
-            {VEHICLE_TYPES.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </Select>
-          {errors.type && (
-            <Typography variant="caption" color="error">
-              {!!(errors as any)?.message}
-            </Typography>
+          }}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              options={VEHICLE_TYPES}
+              value={VEHICLE_TYPES.find((option) => option.value === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.value || null)
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.label : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.value === value?.value
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите тип" margin="normal" variant="outlined" error={!!errors.type} helperText={(errors as any)?.type?.message} required />}
+            />
          )}
-        </FormControl>
+        />

        <Controller
          control={control}
--- a/src/pages/vehicle/list.tsx
+++ b/src/pages/vehicle/list.tsx
@ -20,9 +20,18 @@ export const VehicleList = () => {
        align: 'left',
        headerAlign: 'left',
      },
+      {
+        field: 'city_id',
+        headerName: 'ID города',
+        type: 'string',
+        minWidth: 150,
+        display: 'flex',
+        align: 'left',
+        headerAlign: 'left',
+      },
      {
        field: 'tail_number',
-        headerName: 'Номер рейса',
+        headerName: 'Бортовой номер',
        type: 'number',
        minWidth: 150,
        display: 'flex',
@ -42,15 +51,6 @@ export const VehicleList = () => {
          return VEHICLE_TYPES.find((type) => type.value === value)?.label || value
        },
      },
-      {
-        field: 'city_id',
-        headerName: 'ID города',
-        type: 'string',
-        minWidth: 150,
-        display: 'flex',
-        align: 'left',
-        headerAlign: 'left',
-      },
      {
        field: 'city',
        headerName: 'Город',
--- a/src/pages/vehicle/show.tsx
+++ b/src/pages/vehicle/show.tsx
@ -2,6 +2,8 @@ import {Stack, Typography} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'

+import {VEHICLE_TYPES} from '../../lib/constants'
+
 export const VehicleShow = () => {
  const {query} = useShow({})
  const {data, isLoading} = query
@ -10,20 +12,21 @@ export const VehicleShow = () => {

  const fields = [
    // {label: 'ID', data: 'id'},
-    {label: 'Номер рейса', data: 'tail_number'},
-    {label: 'Тип', data: 'type'},
-    {label: 'ID города', data: 'city_id'},
+    {label: 'Бортовой номер', data: 'tail_number'},
+    {label: 'Тип', data: 'type', render: (value: number) => VEHICLE_TYPES.find((type) => type.value === value)?.label || value},
+    // {label: 'ID города', data: 'city_id'},
+    {label: 'Город', data: 'city'},
  ]

  return (
    <Show isLoading={isLoading}>
      <Stack gap={4}>
-        {fields.map(({label, data}) => (
+        {fields.map(({label, data, render}) => (
          <Stack key={data} gap={1}>
            <Typography variant="body1" fontWeight="bold">
              {label}
            </Typography>
-            <TextField value={record?.[data]} />
+            <TextField value={render ? render(record?.[data]) : record?.[data]} />
          </Stack>
        ))}
      </Stack>