finalize sight, station, route, vehicle routes

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;
+}

src/pages/city/create.tsx

@@ -52,7 +52,7 @@ export const CityCreate = () => {
           fullWidth
           InputLabelProps={{shrink: true}}
           type="text"
-          label={'Название *'}
+          label={'Название'}
           name="name"
         />
       </Box>

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 = () => {

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: 'Это поле является обязательным',

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: 'Это поле является обязательным',

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>

src/pages/sight/edit.tsx

@@ -59,6 +59,7 @@ export const SightEdit = () => {
           label={'Долгота'}
           name="longitude"
         />
+
         <Controller
           control={control}
           name="city_id"

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: 'latitude'}, #
-    {label: 'Долгота', data: 'longitude'},
+    // {label: 'Долгота', data: 'longitude'}, #
-    {label: 'ID города', data: 'city_id'},
+    // {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>

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: 'latitude'}, #
-    {label: 'Долгота', data: 'longitude'},
+    // {label: 'Долгота', data: 'longitude'}, #
     {label: 'Описание', data: 'description'},
   ]
 
-  const sightFields = [
+  const sightFields: Array<{label: string; data: keyof SightItem}> = [
-    // {label: 'ID', data: 'id' as keyof SightItem},
+    // {label: 'ID', data: 'id'},
-    {label: 'Название', data: 'name' as keyof SightItem},
+    {label: 'Название', data: 'name'},
-    {label: 'Широта', data: 'latitude' as keyof SightItem},
+    // {label: 'Широта', data: 'latitude'}, #
-    {label: 'Долгота', data: 'longitude' as keyof SightItem},
+    // {label: 'Долгота', data: 'longitude'}, #
-    {label: 'ID города', data: 'city_id' as keyof SightItem},
+    // {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>
+              <InputLabel>Достопримечательность</InputLabel>
-              <Select value={selectedSightId} onChange={(e) => setSelectedSightId(Number(e.target.value))} label="Вид" fullWidth>
+              <Select value={selectedSightId} onChange={(e) => setSelectedSightId(Number(e.target.value))} label="Достопримечательность" fullWidth>
                 {availableSights.map((sight) => (
                   <MenuItem key={sight.id} value={sight.id}>
                     {sight.name}

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

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

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: 'Город',

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: 'tail_number'},
-    {label: 'Тип', data: 'type'},
+    {label: 'Тип', data: 'type', render: (value: number) => VEHICLE_TYPES.find((type) => type.value === value)?.label || value},
-    {label: 'ID города', data: 'city_id'},
+    // {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>